working on dashboard page

package.json

@@ -16,7 +16,9 @@
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.6.0",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@t3-oss/env-nextjs": "^0.7.1",
     "class-variance-authority": "^0.7.0",

prisma/migrations/20231212151503_/migration.sql

@@ -0,0 +1,66 @@
+-- CreateTable
+CREATE TABLE "Account" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "provider" TEXT NOT NULL,
+    "providerAccountId" TEXT NOT NULL,
+    "refresh_token" TEXT,
+    "access_token" TEXT,
+    "expires_at" INTEGER,
+    "token_type" TEXT,
+    "scope" TEXT,
+    "id_token" TEXT,
+    "session_state" TEXT,
+
+    CONSTRAINT "Account_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" TEXT NOT NULL,
+    "sessionToken" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Session_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "name" TEXT,
+    "email" TEXT,
+    "emailVerified" TIMESTAMP(3),
+    "image" TEXT,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "VerificationToken" (
+    "identifier" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Account_provider_providerAccountId_key" ON "Account"("provider", "providerAccountId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_sessionToken_key" ON "Session"("sessionToken");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_identifier_token_key" ON "VerificationToken"("identifier", "token");
+
+-- AddForeignKey
+ALTER TABLE "Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

src/app/(pages)/dashboard/page.tsx

@@ -1,4 +1,14 @@
-export default function DashboardPage() {
+import { redirect } from "next/navigation";
+
+import { getServerAuthSession } from "@/server/auth"
+
+
+export default async function DashboardPage() {
+  const sessionDetails= await getServerAuthSession();
+
+  if(!sessionDetails) redirect("/api/auth/signin?callbackUrl=%2Fdashboard")
+
+
   return (
     <div>Dashboard</div>
   )

src/app/(pages)/signin/_component/SignInPage.tsx

@@ -1,85 +1,112 @@
 "use client"
 
+import Image from "next/image";
+import Link from "next/link";
 import { signIn } from "next-auth/react";
 import classNames from "classnames";
 
 import { montserrat } from "@/lib/fonts";
 import { Button } from "@/components/ui/button";
-import { FloatingUsersComponent } from "./floating-users";
+import { useUser } from "@/hooks/useUser";
 
 
 export default function SignInLandingComponent() {
+  const { authStatus, userDetails } = useUser();
+
+
   return (
     <section className={classNames(`${montserrat.className}`, {
-      "flex flex-row items-center justify-between divide-x-2": true,
-      "divide-zinc-400 dark:divide-zinc-600": true,
+      "flex flex-row items-center justify-around": true,
     })}>
       <div className={classNames({
         "space-y-16": true,
       })}>
         <h1 className={classNames({
-          "font-bold dark:text-amber-400 text-5xl": true,
+          "font-bold text-5xl": true,
         })}
         >
           Welcome to BioSync
         </h1>
 
         <p className={classNames({
-          "text-3xl": true,
+          "text-3xl text-blue-700 dark:text-sky-300": true,
         })}>
           Your one stop to share your bio with anyone, <br /> anytime and anywhere...
         </p>
 
-        <p className={classNames({
-          "text-4xl font-bold text-orange-400": true,
-        })}>
-          Sign In to continue to BioSync
-        </p>
+        {authStatus === "unauthenticated"
+          ? demo.unauthFooter
+          : demo.authFooter
+        }
+      </div >
 
-        <div className={classNames({
-          "flex flex-row gap-x-3": true,
-        })}>
-          <Button
-            variant={"secondary"}
-            onClick={() => signIn("github", { callbackUrl: "/dashboard" })}
-            className={classNames({
-              "outline outline-1 outline-zinc-500 text-pink-500 font-bold": true,
-            })}
-          >
-            Continue with GitHub
-          </Button>
-
-          <Button
-            variant={"secondary"}
-            onClick={() => signIn("discord", { callbackUrl: "/dashboard" })}
-            className={classNames({
-              "outline outline-1 outline-zinc-500 text-pink-500 font-bold": true,
-            })}
-          >
-            Continue with Discord
-          </Button>
-        </div>
+      <div className={classNames({
+      })}>
+        <Image
+          alt="sign-in image"
+          src={"/sign-in.svg"}
+          width={"500"}
+          height={"500"}
+          placeholder="blur"
+          blurDataURL="/sign-in.svg"
+        />
       </div>
+    </section >
+  )
+}
+
+
+
+const demo = {
+  unauthFooter: (
+    <>
+      <p className={classNames({
+        "text-4xl font-bold text-orange-400": true,
+      })}>
+        Sign In to continue to BioSync
+      </p>
 
       <div className={classNames({
-        "relative h-[60vh] w-[35vw]": true,
+        "flex flex-row gap-x-3": true,
       })}>
-        <FloatingUsersComponent
-          top={"top-5"}
-          left={"left-0"}
-          bgColor="bg-red-600 dark:bg-amber-700"
-          skeleton1Bg="bg-orange-400"
-          skeleton2Bg="bg-yellow-400"
-        />
+        <Button
+          variant={"secondary"}
+          onClick={() => signIn("github", { callbackUrl: "/dashboard" })}
+          className={classNames({
+            "outline outline-1 outline-zinc-100 text-zinc-700 dark:text-white font-bold": true,
+          })}
+        >
+          Continue with GitHub
+        </Button>
 
-        <FloatingUsersComponent
-          top={"top-10"}
-          left={"left-48"}
-          bgColor="bg-sky-600"
-          skeleton1Bg="bg-cyan-400"
-          skeleton2Bg="bg-violet-300"
-        />
+        <Button
+          variant={"secondary"}
+          onClick={() => signIn("discord", { callbackUrl: "/dashboard" })}
+          className={classNames({
+            "outline outline-1 outline-zinc-100 text-zinc-700 dark:text-white font-bold": true,
+          })}
+        >
+          Continue with Discord
+        </Button>
       </div>
-    </section>
+    </>
+  ),
+
+  authFooter: (
+    <div className={classNames({
+      "flex flex-col gap-y-5": true
+    })}>
+      <p className={classNames({
+        "": true,
+      })}>
+        Continue to your Dashboard
+      </p>
+
+      <Link href={"/dashboard"}>
+        <Button variant={"secondary"}>
+          Head to Dashboard
+        </Button>
+      </Link>
+    </div>
   )
-}
+}

src/app/(pages)/signin/_component/floating-users.tsx

@@ -25,7 +25,7 @@ export function FloatingUsersComponent({
     <div className={classNames(`${top} ${left} ${bgColor}`, {
       "p-5 rounded-3xl": true,
       "flex flex-row items-center gap-3": true,
-      "w-fit relative scale-75": true,
+      "w-fit scale-75": true,
     })}>
       <User color="white" className={classNames({
         "scale-[1.5]": true,

src/app/(pages)/signin/page.tsx

@@ -6,7 +6,7 @@ import SignInLandingComponent from "./_component/SignInPage";
 export default function SignInPage() {
   return (
     <section className={classNames({
-      "px-24 py-24": true,
+      "px-20 py-24": true,
     })}>
       <SignInLandingComponent />
     </section>

src/components/shared/Logo.tsx

@@ -2,11 +2,13 @@ import classNames from "classnames"
 import { Montserrat } from "next/font/google"
 import Link from "next/link"
 
+
 const font = Montserrat({
   subsets: ["cyrillic-ext"],
   weight: "800",
 })
 
+
 export default function Logo() {
   return (
     <Link href={"/"} className={classNames(`${font.className}`, {