Refactor package.json to add next-themes dependency

hasanshahriar32 · Oct 13, 2024 · 983b3a6 · 983b3a6
1 parent 2f610e0
commit 983b3a6
Show file tree

Hide file tree

Showing 10 changed files with 279 additions and 11 deletions.
diff --git a/app/(personal)/layout.tsx b/app/(personal)/layout.tsx
@@ -9,7 +9,7 @@ import { Suspense } from 'react'
 
 import { Footer } from '@/components/global/Footer'
 import { Navbar } from '@/components/global/Navbar'
-import IntroTemplate from '@/intro-template'
+import { Toaster } from '@/components/ui/sonner'
 import { urlForOpenGraphImage } from '@/sanity/lib/utils'
 import { loadHomePage, loadSettings } from '@/sanity/loader/loadQuery'
 
@@ -61,10 +61,9 @@ export default async function IndexRoute({
         <Suspense>
           <Footer />
         </Suspense>
-        <Suspense>
-          {/* <IntroTemplate /> */}
-        </Suspense>
+        <Suspense>{/* <IntroTemplate /> */}</Suspense>
       </div>
+      <Toaster />
       {draftMode().isEnabled && <LiveVisualEditing />}
     </>
   )

diff --git a/app/(personal)/projects/[slug]/gallery/page.tsx b/app/(personal)/projects/[slug]/gallery/page.tsx
@@ -17,7 +17,14 @@ type Props = {
 
 const Home: NextPage = async ({ params }: Props,) => {
   const initial = await loadProject(params.slug)
-
+  const currentURL = `https://ece21.vercel.app/projects/${params.slug}/gallery`
+  const handleSocialShare = (socialPlatform: any) => {
+    // Replace this with your custom share functionality
+    navigator?.share({
+      title: 'HKD Blog',
+      text: currentURL,
+    })
+  }
 
   return (
     <>
@@ -36,7 +43,7 @@ const Home: NextPage = async ({ params }: Props,) => {
         <div className="columns-1 gap-4 sm:columns-2 xl:columns-3 2xl:columns-4">
           <div className="after:content border-spacing-2 border relative mb-5 flex h-[540px] flex-col items-center justify-end gap-4 overflow-hidden rounded-lg bg-white/90 px-6 pb-16 pt-64 text-center shadow-highlight after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:shadow-highlight lg:pt-0">
             <a
-              className="pointer z-10 rounded-lg border absolute top-2 left-2 border-black bg-black px-3 py-2 text-sm font-semibold text-white transition hover:bg-black/10 hover:text-black md:mt-4"
+              className="pointer z-10 rounded-lg border absolute top-2 left-2 border-black hover:bg-black px-3 py-2 text-sm font-semibold hover:text-white transition bg-black/10 text-black md:mt-4"
               href={`/projects/${params.slug}`}
               rel="noreferrer"
             >
@@ -54,7 +61,7 @@ const Home: NextPage = async ({ params }: Props,) => {
               <span className="absolute left-0 right-0 bottom-0 h-[400px] bg-gradient-to-b from-black/0 via-black to-black"></span>
             </div>
             {/* <Logo /> */}
-            <div className=''>
+            <div className="">
               <Image
                 src="/logo.jpg"
                 width={120}
@@ -67,14 +74,17 @@ const Home: NextPage = async ({ params }: Props,) => {
               {initial?.data?.title || 'Rinattok21: Images'}
             </h1>
             <p className="max-w-[40ch] font-extralight text-xs md:text-base text-black/75 sm:max-w-[32ch]">
-              {'A collection of images from Rinattok21. Please enjoy the images and share them with your friends.'}
+              {
+                'A collection of images from Rinattok21. Please enjoy the images and share them with your friends.'
+              }
             </p>
             <a
               className="pointer z-0 mt-6 rounded-lg border border-black bg-black px-3 py-2 text-sm font-semibold text-white transition hover:bg-black/10 hover:text-black md:mt-4"
-              href="#"
+              href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentURL)}`}
+              target="_blank"
               rel="noreferrer"
             >
-              Share <Share1Icon className="inline-block ml-1" />
+              Share on FB <Share1Icon className="inline-block ml-1" />
             </a>
           </div>
           <Gallery data={initial?.data} />

diff --git a/app/apple-icon.png b/app/apple-icon.png
diff --git a/app/icon.png b/app/icon.png
diff --git a/components/pages/project/ProjectPage.tsx b/components/pages/project/ProjectPage.tsx
@@ -4,9 +4,11 @@ import Link from 'next/link'
 import { CustomPortableText } from '@/components/shared/CustomPortableText'
 import { Header } from '@/components/shared/Header'
 import ImageBox from '@/components/shared/ImageBox'
+import SocialShare from '@/components/shared/socialShare'
 import type { ProjectPayload } from '@/types'
-import { VortexUi } from './VortexUi'
+
 import DisqusLoader from './DisqusLoader'
+import { VortexUi } from './VortexUi'
 
 export interface ProjectPageProps {
   data: ProjectPayload | null
@@ -112,6 +114,7 @@ export function ProjectPage({ data, encodeDataAttribute }: ProjectPageProps) {
           />
         )}
       </div>
+      <SocialShare />
       <VortexUi />
       <div className="absolute left-0 w-screen my-6 border-t" />
       <DisqusLoader data={data} />

diff --git a/components/shared/socialShare.tsx b/components/shared/socialShare.tsx
@@ -0,0 +1,201 @@
+"use client";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "../ui/button";
+import { CopyIcon } from "@radix-ui/react-icons";
+export default function SocialShare() {
+  const [currentURL, setCurrentURL] = useState("");
+
+  useEffect(() => {
+    // Get the current URL
+    setCurrentURL(window.location.href);
+  }, []);
+
+  const handleCopyLink = () => {
+    // Copy the link to the clipboard
+    const textArea = document.createElement("textarea");
+    textArea.value = currentURL;
+    navigator.clipboard.writeText(currentURL);
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textArea);
+    toast.success("Link copied to clipboard!");
+
+    // alert("Link copied to clipboard!");
+  };
+
+  const handleSocialShare = (socialPlatform: any) => {
+    // Replace this with your custom share functionality
+    navigator?.share({
+      title: "HKD Blog",
+      text: currentURL,
+    });
+  };
+
+  const handleSocialClick = (socialPlatform: any) => {
+    // Construct shareable link based on the social platform
+    let shareableLink = "";
+
+    switch (socialPlatform) {
+      case "facebook":
+        shareableLink = `https://www.facebook.com/sharer/sharer.php?u=${currentURL}`;
+        break;
+      case "twitter":
+        shareableLink = `https://twitter.com/intent/tweet?url=${currentURL}`;
+        break;
+      case "instagram":
+        // Instagram doesn't support direct sharing via URL, so you can open in a new window
+        window.open(`https://www.instagram.com/`);
+        return;
+      case "whatsapp":
+        shareableLink = `https://api.whatsapp.com/send?text=${encodeURIComponent(
+          currentURL,
+        )}`;
+        break;
+      case "telegram":
+        shareableLink = `https://t.me/share/url?url=${currentURL}`;
+        break;
+      default:
+        break;
+    }
+
+    // Open the shareable link in a new window
+    window.open(shareableLink);
+  };
+
+  return (
+    <div className="my-4 max-w-md">
+      <p className="text-lg font-bold text-slate-700">Share this doc via</p>
+
+      <div className="my-4 flex justify-around">
+        {/* FACEBOOK ICON */}
+        <div
+          onClick={() => handleSocialClick('facebook')}
+          className="shadow-xl flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border border-blue-200 fill-[#1877f2] hover:bg-[#1877f2] hover:fill-white hover:shadow-blue-500/50"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path d="M13.397 20.997v-8.196h2.765l.411-3.209h-3.176V7.548c0-.926.258-1.56 1.587-1.56h1.684V3.127A22.336 22.336 0 0 0 14.201 3c-2.444 0-4.122 1.492-4.122 4.231v2.355H7.332v3.209h2.753v8.202h3.312z"></path>
+          </svg>
+        </div>
+
+        {/* TWITTER ICON */}
+        <div
+          onClick={() => handleSocialClick('twitter')}
+          className="shadow-xl flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border border-blue-200 fill-[#1d9bf0] hover:bg-[#1d9bf0] hover:fill-white hover:shadow-sky-500/50"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"></path>
+          </svg>
+        </div>
+
+        {/* INSTAGRAM ICON */}
+        {/* <div
+          onClick={() => handleSocialClick("instagram")}
+          className="shadow-xl flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border border-pink-200 fill-[#bc2a8d] hover:bg-[#bc2a8d] hover:fill-white hover:shadow-pink-500/50"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path d="M11.999 7.377a4.623 4.623 0 1 0 0 9.248 4.623 4.623 0 0 0 0-9.248zm0 7.627a3.004 3.004 0 1 1 0-6.008 3.004 3.004 0 0 1 0 6.008z"></path>
+            <circle cx="16.806" cy="7.207" r="1.078"></circle>
+            <path d="M20.533 6.111A4.605 4.605 0 0 0 17.9 3.479a6.606 6.606 0 0 0-2.186-.42c-.963-.042-1.268-.054-3.71-.054s-2.755 0-3.71.054a6.554 6.554 0 0 0-2.184.42 4.6 4.6 0 0 0-2.633 2.632 6.585 6.585 0 0 0-.419 2.186c-.043.962-.056.267-.056 3.71 0 2.442 0 2.753.056 3.71.015.748.156 1.486.419 2.187a4.61 4.61 0 0 0 2.634 2.632 6.584 6.584 0 0 0 2.185.45c.963.042 1.268.055 3.71.055s2.755 0 3.71-.055a6.615 6.615 0 0 0 2.186-.419 4.613 4.613 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.186.043-.962.056-1.267.056-3.71s0-2.753-.056-3.71a6.581 6.581 0 0 0-.421-2.217zm-1.218 9.532a5.043 5.043 0 0 1-.311 1.688 2.987 2.987 0 0 1-1.712 1.711 4.985 4.985 0 0 1-1.67.311c-.95.044-1.218.055-3.654.055-2.438 0-2.687 0-3.655-.055a4.96 4.96 0 0 1-1.669-.311 2.985 2.985 0 0 1-1.719-1.711 5.08 5.08 0 0 1-.311-1.669c-.043-.95-.053-1.218-.053-3.654 0-2.437 0-2.686.053-3.655a5.038 5.038 0 0 1 .311-1.687c.305-.789.93-1.41 1.719-1.712a5.01 5.01 0 0 1 1.669-.311c.951-.043 1.218-.055 3.655-.055s2.687 0 3.654.055a4.96 4.96 0 0 1 1.67.311 2.991 2.991 0 0 1 1.712 1.712 5.08 5.08 0 0 1 .311 1.669c.043.951.054 1.218.054 3.655 0 2.436 0 2.698-.043 3.654h-.011z"></path>
+          </svg>
+        </div> */}
+
+        {/* WHATSAPP ICON */}
+        <div
+          onClick={() => handleSocialClick('whatsapp')}
+          className="border-green-200 shadow-xl hover:shadow-green-500/50 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border fill-[#25D366] hover:bg-[#25D366] hover:fill-white"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M18.403 5.633A8.919 8.919 0 0 0 12.053 3c-4.948 0-8.976 4.027-8.978 8.977 0 1.582.413 3.126 1.198 4.488L3 21.116l4.759-1.249a8.981 8.981 0 0 0 4.29 1.093h.004c4.947 0 8.975-4.027 8.977-8.977a8.926 8.926 0 0 0-2.627-6.35m-6.35 13.812h-.003a7.446 7.446 0 0 1-3.798-1.041l-.272-.162-2.824.741.753-2.753-.177-.282a7.448 7.448 0 0 1-1.141-3.971c.002-4.114 3.349-7.461 7.465-7.461a7.413 7.413 0 0 1 5.275 2.188 7.42 7.42 0 0 1 2.183 5.279c-.002 4.114-3.349 7.462-7.461 7.462m4.093-5.589c-.225-.113-1.327-.655-1.533-.73-.205-.075-.354-.112-.504.112s-.58.729-.711.879-.262.168-.486.056-.947-.349-1.804-1.113c-.667-.595-1.117-1.329-1.248-1.554s-.014-.346.099-.458c.101-.1.224-.262.336-.393.112-.131.149-.224.224-.374s.038-.281-.019-.393c-.056-.113-.505-1.217-.692-1.666-.181-.435-.366-.377-.504-.383a9.65 9.65 0 0 0-.429-.008.826.826 0 0 0-.599.28c-.206.225-.785.767-.785 1.871s.804 2.171.916 2.321c.112.15 1.582 2.415 3.832 3.387.536.231.954.369 1.279.473.537.171 1.026.146 1.413.089.431-.064 1.327-.542 1.514-1.066.187-.524.187-.973.131-1.067-.056-.094-.207-.151-.43-.263"
+            ></path>
+          </svg>
+        </div>
+
+        {/* TELEGRAM ICON */}
+        <div
+          onClick={() => handleSocialClick('telegram')}
+          className="shadow-xl flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border border-sky-200 fill-[#229ED9] hover:bg-[#229ED9] hover:fill-white hover:shadow-sky-500/50"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path d="m20.665 3.717-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42 10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15 4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z"></path>
+          </svg>
+        </div>
+
+        {/* SHARE ICON */}
+        <div
+          onClick={() => handleSocialShare('share')}
+          className="shadow-xl flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border border-gray-200 hover:bg-gray-300"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="text-gray-500"
+          >
+            <circle cx="18" cy="5" r="3"></circle>
+            <circle cx="6" cy="12" r="3"></circle>
+            <circle cx="18" cy="19" r="3"></circle>
+            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+          </svg>
+        </div>
+      </div>
+
+      <p className="text-sm">Or copy link</p>
+      {/* BOX LINK */}
+      <div className="mt-4 flex items-center justify-between border-2 border-gray-200 py-2">
+        <CopyIcon className="h-5 w-5 mx-2 text-gray-500" />
+
+        <input
+          className="w-full bg-transparent outline-none"
+          type="text"
+          placeholder="link"
+          value={currentURL}
+          readOnly
+        />
+        <Button
+          variant={'outline'}
+          onClick={handleCopyLink}
+          className="mr-2 rounded bg-indigo-500 px-5 py-2"
+        >
+          Copy
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "lucide-react": "^0.452.0",
     "next": "14.2.13",
     "next-sanity": "9.5.0",
+    "next-themes": "^0.3.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-helmet": "^6.1.0",
@@ -53,6 +54,7 @@
     "sanity-plugin-cloudinary": "^1.1.3",
     "server-only": "0.0.1",
     "simplex-noise": "^4.0.3",
+    "sonner": "^1.5.0",
     "styled-components": "6.1.13",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7"

diff --git a/public/logo.jpg b/public/logo.jpg