snapchat button could be used for sharing a content

apps/website/src/app/demos/snapchat-share/Content.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import React, {FC} from 'react'
+import useSnapKit from './hooks/useSnapKit'
+
+const Component: FC = () => {
+  useSnapKit()
+
+  return (
+    <div>
+      <button
+        className="snapchat-custom-share-button"
+        data-share-url="https://zaynvipkey.fan3.io/share"
+      >
+        Share on Snapchat
+      </button>
+    </div>
+  )
+}
+
+export default Component

apps/website/src/app/demos/snapchat-share/hooks/useSnapKit.ts

@@ -0,0 +1,44 @@
+import {useEffect} from 'react'
+
+declare global {
+  interface Window {
+    snapKitInit: () => void
+  }
+}
+
+/**
+ * Documentation page:
+ * https://developers.snap.com/snap-kit/creative-kit/web#customize-the-share-button
+ */
+const useSnapKit = () => {
+  useEffect(() => {
+    const loadSnapKit = () => {
+      const script = document.createElement('script')
+      script.src = 'https://sdk.snapkit.com/js/v1/create.js'
+      script.async = true
+
+      script.onload = () => {
+        setTimeout(() => {
+          console.log('Snap Kit SDK loaded')
+        })
+      }
+
+      script.onerror = () => {
+        console.error('Failed to load Snap Kit SDK')
+      }
+
+      document.body.appendChild(script)
+
+      window.snapKitInit = function () {
+        // @ts-ignore
+        snap.creativekit.initalizeShareButtons(
+          document.getElementsByClassName('snapchat-custom-share-button'),
+        )
+      }
+    }
+
+    loadSnapKit()
+  }, [])
+}
+
+export default useSnapKit

apps/website/src/app/demos/snapchat-share/page.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type {NextPage} from 'next'
+
+import Content from './Content'
+
+import Layout from '@/components/MainLayout'
+import LeftDrawer from '@/components/Drawers/LeftDrawer'
+import {menuItems} from '@/menu'
+
+import {drawerWidth} from '@/config/layout'
+import {LayoutProvider} from '@/providers'
+
+import {title} from './seo'
+
+const Title = () => {
+  return <h1>{title}</h1>
+}
+
+const PageContent = () => {
+  return (
+    <LayoutProvider>
+      <Content />
+    </LayoutProvider>
+  )
+}
+
+const Page: NextPage = () => {
+  return (
+    <Layout
+      PageContent={PageContent}
+      HeaderTitle={Title}
+      drawerWidth={drawerWidth}
+      LeftDrawer={<LeftDrawer items={menuItems} />}
+    />
+  )
+}
+
+export default Page

apps/website/src/app/demos/snapchat-share/seo.ts

@@ -0,0 +1,15 @@
+import {InternalMetadata} from '@/seo/metadata'
+
+const title = 'Simple Snapchat Share Button'
+const description = 'Simple Snapchat Share Button'
+const canonical = '/demos/snapchat-share'
+
+const props: InternalMetadata = {
+  title,
+  description,
+  canonical,
+}
+
+export default props
+
+export {title}