feat: update social share component, and enhance modal structure

2025-02-23 19:43:45 +08:00
parent e8df14880d
commit feff32f588
10 changed files with 37 additions and 18 deletions
@@ -0,0 +1,60 @@
+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'
+
+interface SocialMediaProperties {
+  className?: 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,
+  },
+]
+
+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>
+  )
+}
+
+export default IconsSocial