46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import { ReactNode } from 'react'
|
|
import './styles.css'
|
|
|
|
type Link = {
|
|
text: string
|
|
href: string
|
|
}
|
|
|
|
interface PolicyProps {
|
|
links: Link[]
|
|
children: string
|
|
sizing?: 'small' | 'medium' | 'large'
|
|
}
|
|
|
|
const sizes = {
|
|
small: 'policy--small',
|
|
medium: 'policy--medium',
|
|
large: 'policy--large',
|
|
}
|
|
|
|
function Policy({ links, children, sizing = 'small' }: PolicyProps): JSX.Element {
|
|
const createLinkedContent = (sentence: string): ReactNode[] => {
|
|
const pattern = links.map(link => `(${link.text})`).join('|');
|
|
const regex = new RegExp(pattern, 'g');
|
|
return sentence.split(regex).map((part, idx) => {
|
|
const link = links.find(({ text }) => text === part);
|
|
|
|
if (!link) return part
|
|
|
|
return (
|
|
<a key={`${link.text}-${idx}`} href={link.href} target="_blank" rel="noreferrer nofollow">
|
|
{link.text}
|
|
</a>
|
|
);
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className={`policy ${sizes[sizing]}`}>
|
|
<p>{createLinkedContent(children)}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Policy
|