working on preview screen

package.json

@@ -39,6 +39,7 @@
     "react-dom": "18.2.0",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.8.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

prisma/schema.prisma

@@ -64,11 +64,11 @@ model UserBio {
     twitterLink            String?
     linkedinLink           String?
     portfolioLink          String?
-    otherLinks             String[]
+    projectLink            String[]
     // publishedOrDraft isPublished
     includeProfilePicOrNot Boolean
 
-    @@unique([id, email, githubLink, twitterLink, linkedinLink, portfolioLink, otherLinks])
+    @@unique([id, email, githubLink, twitterLink, linkedinLink, portfolioLink, projectLink])
 }
 
 enum isPublished {

src/app/(pages)/dashboard/_components/UploaderWidget.tsx

@@ -2,20 +2,23 @@
 
 import dynamic from "next/dynamic"
 import Image from "next/image"
-import { type ComponentType, type ChangeEvent, useState, useEffect } from "react"
-import { Upload } from "lucide-react"
+import { type ComponentType, type ChangeEvent, useState } from "react"
 import classNames from "classnames"
 
-import { inputFieldDetails } from "../_constants/input-details-list"
-import { submitUserBio } from "../../../../actions/submit-user-bio"
-import { Label } from "@/components/ui/label"
+import { inputFieldDetails } from "../_constants/profile-input-details-list"
+import { submitUserBio } from "@/actions/submit-user-bio"
+import { PlusCircle } from "lucide-react"
 
+
+const PublishButton = dynamic(() => import("./buttons/publish-button"))
+const PreviewButton = dynamic(() => import("./buttons/preview-button"))
+const GithublinkButton = dynamic(() => import("./buttons/github-link-button"))
 const OtherLinkInputFields = dynamic(() => import("./other-link-input-field"))
-const FooterButtons = dynamic(() => import("./footer-buttons"))
 const InputsField = dynamic(() => import("./profile-input-field"))
 const Button = dynamic(() => import("@/components/ui/button").then((mod) => mod.Button))
 const Separator = dynamic(() => import("@/components/ui/separator").then((mod) => mod.Separator))
 const Checkbox = dynamic(() => import("@/components/ui/checkbox").then((mod) => mod.Checkbox))
+const Label = dynamic(() => import("@/components/ui/label").then((mod) => mod.Label))
 
 
 type TProps = {
@@ -28,7 +31,7 @@ type TProps = {
 export default function UploaderWidget(
   { userName, userEmail, userProfilePic }: TProps
 ) {
-  const [otherLinks, setOtherLinks] = useState<ComponentType<{
+  const [projectLinks, setProjectLinks] = useState<ComponentType<{
     onClick: () => void,
     onChange: (e: ChangeEvent<HTMLInputElement>) => void
   }>[]>([]);
@@ -41,8 +44,8 @@ export default function UploaderWidget(
     linkedinLink: "",
     twitterLink: "",
     portfolioLink: "",
-    otherLinks: [],
-    includeProfilePicOrNot: true
+    projectLinks: [],
+    includeProfilePicOrNot: true,
   });
 
 
@@ -53,15 +56,15 @@ export default function UploaderWidget(
 
   // function for deleting other link input field
   function removeInputField(idx: number) {
-    setOtherLinks(prevOtherLinks => prevOtherLinks.filter((_, i) => idx !== i));
+    setProjectLinks(prevLinks => prevLinks.filter((_, i) => idx !== i));
   }
 
 
   // for updating single index of 'otherLinks' array
   const updateOtherLinkAtIndex = (idx: number, newLink: string) => {
     setUserBio((prevState) => ({
       ...prevState,
-      otherLinks: prevState.otherLinks.map((link, i) =>
+      projectLinks: prevState.projectLinks.map((link, i) =>
         i === idx ? newLink : link
       ),
     }));
@@ -81,8 +84,8 @@ export default function UploaderWidget(
         "flex flex-col items-center justify-center gap-y-5": true,
       })}>
         <Image
-          src={userProfilePic!}
-          alt="profile image"
+          src={userProfilePic}
+          alt="profile pic"
           width={200}
           height={200}
           className={classNames({
@@ -98,10 +101,10 @@ export default function UploaderWidget(
           <Label htmlFor="profile-image">Include Profile pic in your BioSync</Label>
           <Checkbox
             id="profile-image"
+            defaultChecked={userBio.includeProfilePicOrNot}
             onCheckedChange={() => setUserBio((prev) => (
-              { ...prev, includeProfilePic: !prev.includeProfilePicOrNot }
+              { ...prev, includeProfilePicOrNot: !prev.includeProfilePicOrNot }
             ))}
-            defaultChecked
           />
         </div>
       </div>
@@ -132,18 +135,18 @@ export default function UploaderWidget(
         ))}
 
 
-        {/* ADDITION LINKS INPUT FIELD...!! */}
+        {/* PROJECT LINKS INPUT FIELD...!! */}
         <div className={classNames({
           "text-xl font-bold text-center": true,
           "py-6 my-1": true,
           "space-y-8": true,
         })}>
-          <h1>Mention other links</h1>
+          <h1>Mention Project links</h1>
 
           <div className={classNames({
             "space-y-5 w-[30rem]": true,
           })}>
-            {otherLinks.map((Comp, idx: number) => (
+            {projectLinks.map((Comp, idx: number) => (
               <Comp
                 key={idx}
                 onClick={() => removeInputField(idx)}
@@ -159,16 +162,24 @@ export default function UploaderWidget(
                 "font-bold": true,
               })}
               // @ts-expect-error "giving soome unknown error"
-              onClick={() => setOtherLinks([...otherLinks, OtherLinkInputFields])}
+              onClick={() => setProjectLinks([...projectLinks, OtherLinkInputFields])}
             >
-              Add More...
+              <PlusCircle />
             </Button>
           </div>
         </div>
       </div>
 
+
       {/* footer buttons */}
-      <FooterButtons />
+      <div className={classNames({
+        "flex flex-row flex-wrap items-center justify-around": true,
+        "mt-10": true,
+      })}>
+        <PreviewButton />
+        <PublishButton />
+        <GithublinkButton />
+      </div>
     </form>
   )
 }

src/app/(pages)/dashboard/_components/buttons/github-link-button.tsx

@@ -0,0 +1,20 @@
+import { Button } from "@/components/ui/button";
+import { Github } from "lucide-react";
+import Link from "next/link";
+
+export default function GithublinkButton() {
+  return (
+    <Link
+      target="_blank"
+      href={"https://github.com/rohitmondal03/Bio-Sync"}
+    >
+      <Button
+        type="button"
+        variant={"default"}
+        className={`font-bold`}
+      >
+        Github <Github className={`ml-3 scale-90`} />
+      </Button>
+    </Link>
+  )
+}

src/app/(pages)/dashboard/_components/buttons/preview-button.tsx

@@ -0,0 +1,33 @@
+import dynamic from "next/dynamic";
+import { ScreenShare } from "lucide-react";
+import classNames from "classnames";
+
+const PreviewScreen = dynamic(() => import("../preview-screen"));
+const Button = dynamic(() => import("@/components/ui/button").then((mod) => mod.Button))
+const Sheet= dynamic(() => import("@/components/ui/sheet").then((mod) => mod.Sheet))
+const SheetContent= dynamic(() => import("@/components/ui/sheet").then((mod) => mod.SheetContent))
+const SheetTrigger= dynamic(() => import("@/components/ui/sheet").then((mod) => mod.SheetTrigger))
+
+
+export default function PreviewButton() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          type="button"
+          variant={"default"}
+          className={`font-bold`}
+        >
+          Preview <ScreenShare className={`ml-3 scale-90`} />
+        </Button>
+      </SheetTrigger>
+
+      <SheetContent className={classNames({
+        "bg-black": true,
+        "rounded-l-xl": true,
+      })}>
+        <PreviewScreen />
+      </SheetContent>
+    </Sheet>
+  )
+}

src/app/(pages)/dashboard/_components/buttons/publish-button.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { Send } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useFormStatus } from "react-dom";
+
+const Button= dynamic(() => import("@/components/ui/button").then((mod) => mod.Button))
+
+
+export default function PublishBioButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      type="submit"
+      variant={"default"}
+      className={`font-bold`}
+    >
+      {pending ?
+        "Publishing..."
+        : (
+          <>Publish <Send className={`ml-3 scale-90`} /></>
+        )
+      }
+    </Button>
+  )
+}

src/app/(pages)/dashboard/_components/preview-screen.tsx

@@ -1,14 +1,7 @@
-import { DialogContent, DialogHeader } from "@/components/ui/dialog";
-import classNames from "classnames";
-
 export default function PreviewScreen() {
   return (
-    <DialogContent className={classNames({
-      "w-screen border-zinc-500 border-2": true,
-    })}>
-      <DialogHeader>
-
-      </DialogHeader>
-    </DialogContent>
+    <div className="text-white w-[100rem]">
+      Preview screen
+    </div>
   )
 }