diff --git a/apps/website/src/app/demos/snapchat-share/Content.tsx b/apps/website/src/app/demos/snapchat-share/Content.tsx new file mode 100644 index 0000000..23a32e0 --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +export default Component diff --git a/apps/website/src/app/demos/snapchat-share/hooks/useSnapKit.ts b/apps/website/src/app/demos/snapchat-share/hooks/useSnapKit.ts new file mode 100644 index 0000000..5a495da --- /dev/null +++ b/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 diff --git a/apps/website/src/app/demos/snapchat-share/page.tsx b/apps/website/src/app/demos/snapchat-share/page.tsx new file mode 100644 index 0000000..f43b933 --- /dev/null +++ b/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

{title}

+} + +const PageContent = () => { + return ( + + + + ) +} + +const Page: NextPage = () => { + return ( + } + /> + ) +} + +export default Page diff --git a/apps/website/src/app/demos/snapchat-share/seo.ts b/apps/website/src/app/demos/snapchat-share/seo.ts new file mode 100644 index 0000000..e4e66dd --- /dev/null +++ b/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}