hensei-web/components/about/LinkItem/index.tsx
2023-08-20 04:06:26 -07:00

37 lines
894 B
TypeScript

import { ComponentProps } from 'react'
import Link from 'next/link'
import classNames from 'classnames'
import ShareIcon from '~public/icons/Share.svg'
import styles from './index.module.scss'
interface Props extends ComponentProps<'div'> {
title: string
link: string
icon: React.ReactNode
}
const LinkItem = ({ icon, title, link, className, ...props }: Props) => {
const classes = classNames(
{
[styles.item]: true,
},
className?.split(' ').map((c) => styles[c])
)
return (
<div className={classes}>
<Link legacyBehavior href={link}>
<a href={link} target="_blank" rel="noreferrer">
<div className={styles.left}>
<i className={styles.icon}>{icon}</i>
<h3>{title}</h3>
</div>
<ShareIcon className={styles.shareIcon} />
</a>
</Link>
</div>
)
}
export default LinkItem