import { cloneElement, Children } from 'react'; import { styled } from '@compiled/react'; import { VerticalStack, Heading, colors, Text } from '@compiled/website-ui'; import { Link } from 'react-router-dom'; interface SectionProps { children: React.ReactNode; title: string; } export const Section = ({ children, title }: SectionProps) => { const id = `section--${title.toLowerCase().split(' ').join('-')}`; return ( <VerticalStack gap={2} spacing={6}> <Heading id={id} as="div" look="h500"> {title} </Heading> {Children.map(children, (child) => cloneElement(child as JSX.Element, { 'aria-labelledby': id }) )} </VerticalStack> ); }; const StyledLink = styled(Link)` user-select: none; color: currentColor; text-decoration: none; :hover, :focus { cursor: pointer; color: ${colors.primary}; } :active { opacity: 0.8; } &[aria-current='page'] { color: ${colors.primary}; position: relative; :before { content: ''; border-left: 2px solid ${colors.primary}; transform: translateX(-8px); position: absolute; top: 0; bottom: 0; } } `; export const LinkItem = ({ children, href, ...props }: { children: React.ReactNode; href: string; }) => { return ( <Text as="div" variant="aside"> <StyledLink {...props} to={href}> {children} </StyledLink> </Text> ); };