added kantha project with pdf

package.json

@@ -33,7 +33,8 @@
     "tailwind-merge": "^2.2.2",
     "validator": "^13.11.0",
     "zod": "^3.22.4",
-    "zod-formik-adapter": "^1.3.0"
+    "zod-formik-adapter": "^1.3.0",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/projects/[projectSlug]/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { FollowerPointerCard } from "@/components/following-pointer";
+import PdfViewer from "@/components/pdf-viewer";
 import { PROJECTS } from "@/constants";
 import { syncopate } from "@/fonts";
 import Image from "next/image";
@@ -188,8 +189,14 @@ export default function ProjectPage({ params: { projectSlug } }: IProps) {
             })}
           </div>
 
-          <div className="flex gap-6 flex-col">
-            {project.images.main.map((image, index) => (
+          <div
+            className={`flex gap-6 flex-col ${
+              project.images.main && project.images.main.length > 0
+                ? ""
+                : "hidden"
+            }`}
+          >
+            {project.images.main?.map((image, index) => (
               <Image
                 key={index}
                 src={`/projects/${project.projectSlug}/main/${image}`}
@@ -201,6 +208,12 @@ export default function ProjectPage({ params: { projectSlug } }: IProps) {
               />
             ))}
           </div>
+
+          {project.pdf && (
+            <PdfViewer
+              pdfFile={`/projects/${project.projectSlug}/pdf/${project.pdf}`}
+            />
+          )}
         </div>
       </div>
     </main>

src/app/projects/page.tsx

@@ -3,9 +3,11 @@
 import { motion, useScroll, useTransform, MotionValue } from "framer-motion";
 import { syncopate } from "@/fonts";
 import Image from "next/image";
-import { useRef } from "react";
+import { Key, useRef, useState } from "react";
 import Link from "next/link";
 import { IProject, PROJECTS } from "@/constants";
+import { Tabs, Tab } from "@nextui-org/react";
+import { useProjectCategory } from "@/store/useProjectCategory";
 // import type { Metadata } from "next";
 // import { SITE_NAME } from "@/constants";
 
@@ -73,6 +75,8 @@ function Card({ data, index }: CardProps) {
 }
 
 export default function ProjectsPage() {
+  const { category, setCategory } = useProjectCategory();
+
   return (
     <main className="">
       <div className="px-4 mx-auto max-w-screen-md">
@@ -81,10 +85,35 @@ export default function ProjectsPage() {
         >
           Projects
         </h2>
-        <div className="m-auto">
-          {PROJECTS.map((project, i) => (
-            <Card data={project} index={i + 1} key={i} />
-          ))}
+
+        <div className="w-full flex flex-col justify-center items-center mt-16">
+          <Tabs
+            key="secondary"
+            color="secondary"
+            aria-label="Options"
+            selectedKey={category}
+            onSelectionChange={setCategory as any}
+            radius="full"
+          >
+            <Tab key="3d" title="3D">
+              <div className="m-auto">
+                {PROJECTS.filter((project) => project.category === "3D").map(
+                  (project, i) => (
+                    <Card data={project} index={i + 1} key={i} />
+                  )
+                )}
+              </div>
+            </Tab>
+            <Tab key="ux/xr" title="UX/XR">
+              <div className="m-auto">
+                {PROJECTS.filter((project) => project.category === "UI/UX").map(
+                  (project, i) => (
+                    <Card data={project} index={i + 1} key={i} />
+                  )
+                )}
+              </div>
+            </Tab>
+          </Tabs>
         </div>
       </div>
     </main>

src/app/pdf/page.tsx → src/components/pdf-viewer.tsx

@@ -19,9 +19,13 @@ const options = {
   //   standardFontDataUrl: "/standard_fonts/",
 };
 
-const maxWidth = 800;
+const maxWidth = 768;
 
-const PdfViewer = () => {
+interface IProps {
+  pdfFile: string;
+}
+
+const PdfViewer = ({ pdfFile }: IProps) => {
   const [numPages, setNumPages] = useState<number>(0);
   const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
   const [containerWidth, setContainerWidth] = useState<number>();
@@ -42,7 +46,7 @@ const PdfViewer = () => {
   return (
     <div className="p-4" ref={setContainerRef}>
       <Document
-        file="/pdfs/research-paper.pdf"
+        file={`${pdfFile}`}
         onLoadSuccess={onDocumentLoadSuccess}
         options={options}
         className="flex flex-col items-center gap-6"

src/constants/index.ts

@@ -15,9 +15,14 @@ export interface IImage {
   alt: string;
 }
 
+export type IProjectCategory = "3D" | "UI/UX";
+export type IProjectType = "photos/videos" | "pdfs";
+
 export type IImages = (string | IImage)[];
 
 export interface IProject {
+  type: IProjectType;
+  category: IProjectCategory;
   title: string;
   subTitle?: string;
   description: string[];
@@ -28,12 +33,13 @@ export interface IProject {
     thumbnail: string;
     startMain?: IImages;
     startGrid?: IImages;
-    main: IImages;
+    main?: IImages;
   };
   videos?: {
     main?: string[];
     middle?: string[];
   };
+  pdf?: string;
 }
 
 export const TOOLS = {
@@ -117,6 +123,8 @@ export const TOOLS = {
 
 export const PROJECTS: IProject[] = [
   {
+    type: "photos/videos",
+    category: "3D",
     title: "MUSIC WITH\nA MISSION",
     subTitle: `Skullcandy "All Love" Edition Crusher Evo`,
     description: [
@@ -142,6 +150,8 @@ export const PROJECTS: IProject[] = [
     },
   },
   {
+    type: "photos/videos",
+    category: "3D",
     title: "SHOWCASE",
     subTitle: `Podiums for Beauty Products`,
     description: [
@@ -167,6 +177,8 @@ export const PROJECTS: IProject[] = [
     },
   },
   {
+    type: "photos/videos",
+    category: "3D",
     title: "PET IN YOUR\nDREAMS",
     subTitle: `Meet Rob!`,
     description: [
@@ -190,6 +202,8 @@ export const PROJECTS: IProject[] = [
     },
   },
   {
+    type: "photos/videos",
+    category: "3D",
     title: "CAPTIVATING",
     subTitle: `Hello100 saying Hi to 3D.`,
     description: [
@@ -236,6 +250,8 @@ export const PROJECTS: IProject[] = [
     },
   },
   {
+    type: "photos/videos",
+    category: "3D",
     title: "INTERACTIVE\nPRODUCT\nSHOWCASE",
     subTitle: `Stream VR`,
     description: [
@@ -262,4 +278,16 @@ export const PROJECTS: IProject[] = [
       main: ["low-bitrate.mp4"],
     },
   },
+  {
+    type: "photos/videos",
+    category: "UI/UX",
+    title: "Kantha",
+    subTitle: `Kantha`,
+    description: [`kantha`],
+    projectSlug: "kantha",
+    images: {
+      thumbnail: "thumbnail.png",
+    },
+    pdf: "kantha.pdf",
+  },
 ];

src/store/useProjectCategory.ts

@@ -0,0 +1,22 @@
+import { IProjectCategory } from "@/constants";
+import { create } from "zustand";
+
+type Store = {
+  category: IProjectCategory;
+  setCategory: (category: IProjectCategory) => void;
+};
+
+export const useProjectCategory = create<Store>()((set) => ({
+  category: "3D",
+  setCategory: (category) => set({ category }),
+}));
+
+// function Counter() {
+//   const { count, inc } = useStore()
+//   return (
+//     <div>
+//       <span>{count}</span>
+//       <button onClick={inc}>one up</button>
+//     </div>
+//   )
+// }