60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import type { FC } from 'react'
|
|
import { Link } from 'react-router'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
import { FacebookIcon } from '~/components/icons/facebook'
|
|
import { InstagramIcon } from '~/components/icons/instagram'
|
|
import { LinkIcon } from '~/components/icons/link-icon'
|
|
import { LinkedinIcon } from '~/components/icons/linkedin'
|
|
import { XIcon } from '~/components/icons/x'
|
|
|
|
type SocialMediaProperties = {
|
|
className?: string
|
|
slug?: string
|
|
}
|
|
|
|
const dataSocialMedia = [
|
|
{
|
|
type: 'link',
|
|
url: 'post-id/',
|
|
icon: LinkIcon,
|
|
},
|
|
{
|
|
type: 'facebook',
|
|
url: 'https://facebook.com/',
|
|
icon: FacebookIcon,
|
|
},
|
|
{
|
|
type: 'linkedin',
|
|
url: 'https://linkedin.com/',
|
|
icon: LinkedinIcon,
|
|
},
|
|
{
|
|
type: 'x',
|
|
url: 'https://x.com/',
|
|
icon: XIcon,
|
|
},
|
|
{
|
|
type: 'instagram',
|
|
url: 'https://instagram.com/',
|
|
icon: InstagramIcon,
|
|
},
|
|
]
|
|
|
|
export const IconsSocial: FC<SocialMediaProperties> = ({ className }) => {
|
|
return (
|
|
<div className={twMerge('flex gap-2', className)}>
|
|
{dataSocialMedia.map(({ url, icon: Icon }, index) => (
|
|
<Link
|
|
key={index}
|
|
to={url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Icon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|