de4b3c1c3c
Chore/eslint curly braces * Add eslint rule for curly braces * run eslint --fix for all files Approved-by: Linus Flood
58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import { MaterialIcon } from '../../Icons/MaterialIcon'
|
|
import { Typography } from '../../Typography'
|
|
|
|
import styles from './linkListItem.module.css'
|
|
import {
|
|
IllustrationIcon,
|
|
IllustrationIconProps,
|
|
} from '../LinkListItem/IllustrationIcon'
|
|
|
|
import { cx } from 'class-variance-authority'
|
|
import { Link } from 'react-aria-components'
|
|
|
|
export interface LinkListItemProps {
|
|
text: string
|
|
isExternal?: boolean
|
|
href: string
|
|
className?: string
|
|
illustration?: IllustrationIconProps
|
|
onClick?: () => void
|
|
}
|
|
|
|
export function LinkListItem({
|
|
text,
|
|
isExternal,
|
|
href,
|
|
illustration,
|
|
onClick,
|
|
}: LinkListItemProps) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
target="_blank"
|
|
onClick={onClick}
|
|
className={cx(styles.content, {
|
|
[styles.graphic]: illustration,
|
|
[styles.noGraphic]: !illustration,
|
|
})}
|
|
>
|
|
{illustration && (
|
|
<div className={styles.illustrationWrapper}>
|
|
<IllustrationIcon
|
|
illustration={illustration.illustration}
|
|
size={illustration.size}
|
|
className={styles.illustration}
|
|
/>
|
|
</div>
|
|
)}
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<p>{text}</p>
|
|
</Typography>
|
|
<MaterialIcon
|
|
color="Icon/Interactive/Default"
|
|
icon={isExternal ? 'open_in_new' : 'arrow_forward'}
|
|
/>
|
|
</Link>
|
|
)
|
|
}
|