78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import { Card } from 'components/Form/Card';
|
|
import Row from 'components/Form/Row';
|
|
import Heading from 'components/Form/Heading';
|
|
import colors from 'styles/colors';
|
|
|
|
const cardStyles = `
|
|
small { margin-top: 1rem; opacity: 0.5; }
|
|
a {
|
|
color: ${colors.textColor};
|
|
}
|
|
details {
|
|
// display: inline;
|
|
display: flex;
|
|
transition: all 0.2s ease-in-out;
|
|
h3 {
|
|
display: inline;
|
|
}
|
|
summary {
|
|
padding: 0;
|
|
margin: 1rem 0 0 0;
|
|
cursor: pointer;
|
|
}
|
|
summary:before {
|
|
content: "►";
|
|
position: absolute;
|
|
margin-left: -1rem;
|
|
color: ${colors.primary};
|
|
cursor: pointer;
|
|
}
|
|
&[open] summary:before {
|
|
content: "▼";
|
|
}
|
|
}
|
|
`;
|
|
|
|
const getPathName = (link: string) => {
|
|
try {
|
|
const url = new URL(link);
|
|
return url.pathname;
|
|
} catch(e) {
|
|
return link;
|
|
}
|
|
};
|
|
|
|
const ContentLinksCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
|
|
const internal = props.data.internal || [];
|
|
const external = props.data.external || [];
|
|
return (
|
|
<Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
|
|
<Heading as="h3" size="small" color={colors.primary}>Summary</Heading>
|
|
<Row lbl="Internal Link Count" val={internal.length} />
|
|
<Row lbl="External Link Count" val={external.length} />
|
|
{ internal && internal.length > 0 && (
|
|
<details>
|
|
<summary><Heading as="h3" size="small" color={colors.primary}>Internal Links</Heading></summary>
|
|
{internal.map((link: string) => (
|
|
<Row key={link} lbl="" val="">
|
|
<a href={link} target="_blank" rel="noreferrer">{getPathName(link)}</a>
|
|
</Row>
|
|
))}
|
|
</details>
|
|
)}
|
|
{ external && external.length > 0 && (
|
|
<details>
|
|
<summary><Heading as="h3" size="small" color={colors.primary}>External Links</Heading></summary>
|
|
{external.map((link: string) => (
|
|
<Row key={link} lbl="" val="">
|
|
<a href={link} target="_blank" rel="noreferrer">{link}</a>
|
|
</Row>
|
|
))}
|
|
</details>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default ContentLinksCard;
|