on profile section

package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",

src/app/(pages)/dashboard/_components/input-field.tsx

@@ -35,7 +35,7 @@ export default function InputFields({
 ) {
   return (
     <div className={classNames(`${widthClass}`, {
-      "border-4 rounded-lg": true,
+      "border-4 border-zinc-400 rounded-lg": true,
       "p-4 space-y-4": true,
     })}>
       <Label

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

@@ -8,11 +8,10 @@ export async function generateMetadata(): Promise<Metadata> {
   const sessionDetails = await getServerAuthSession();
 
   const userDetails = sessionDetails?.user;  //user details
-  const userName = userDetails?.name;   //user's name
   const userProfilePic = userDetails?.image  // user's pic
 
   return {
-    title: `${userName}'s Dashboard`,
+    title: "Create new BioSync",
     icons: [`${userProfilePic}`],
   }
 }

src/app/(pages)/profile/_components/UserProfileWidget.tsx

@@ -0,0 +1,79 @@
+import Image from "next/image";
+import classNames from "classnames";
+
+import { getServerAuthSession } from "@/server/auth"
+import { db } from "@/server/db";
+import { Label } from "@/components/ui/label";
+
+
+export default async function UserProfileWidget() {
+  const session = await getServerAuthSession();
+
+  const userDetails = session?.user;
+  const userId = String(userDetails?.id);
+  const userName = String(userDetails?.name);
+  const userImage = String(userDetails?.image)
+  const userEmail = String(userDetails?.email)
+
+
+  const getAccountProvider = await db.account.findFirst({
+    where: {
+      userId: userId
+    },
+    select: {
+      provider: true,
+    }
+  })
+
+  const provider = String(getAccountProvider?.provider);
+
+  const providerFormatted = provider.charAt(0).toUpperCase() + provider.slice(1);
+
+
+
+  return (
+    <>
+      <div className="flex flex-row items-center justify-center gap-40">
+        <Image
+          alt="PROFILE PIC OF USER"
+          src={userImage}
+          blurDataURL={userImage}
+          height={400}
+          width={400}
+          className="rounded-2xl"
+          priority
+        />
+
+
+        <div className="space-y-8">
+          <div>
+            <Label className="text-lg text-muted-foreground underline">Your Name</Label>
+            <h1 className={classNames({
+              "font-bold text-3xl text-gray-600": true,
+            })}>
+              {userName}
+            </h1>
+          </div>
+
+          <div>
+            <Label className="text-lg text-muted-foreground underline">Email</Label>
+            <h1 className={classNames({
+              "font-bold text-3xl text-gray-600": true,
+            })}>
+              {userEmail}
+            </h1>
+          </div>
+
+          <div>
+            <Label className="text-lg text-muted-foreground underline">OAuth Provider</Label>
+            <h1 className={classNames({
+              "font-bold text-3xl text-gray-600": true,
+            })}>
+              {providerFormatted}
+            </h1>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/app/(pages)/profile/layout.tsx

@@ -0,0 +1,32 @@
+import { getServerAuthSession } from '@/server/auth'
+import { type Metadata } from 'next'
+
+import type { ILayout } from 'types'
+
+
+export async function generateMetadata(): Promise<Metadata> {
+  const sessionDetails = await getServerAuthSession();
+
+  const userDetails = sessionDetails?.user;
+
+  const userProfilePic = userDetails?.image;
+  const userName = userDetails?.name;
+
+
+  return {
+    title: "Profile || " + userName,
+    icons: [`${userProfilePic}`]
+  }
+}
+
+
+
+export default function ProfileLayout(
+  { children }: ILayout
+) {
+  return (
+    <>
+      {children}
+    </>
+  )
+}

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

@@ -1,5 +1,21 @@
-export default function UsersProfilePage() {
+import { getServerAuthSession } from "@/server/auth"
+import { redirect } from "next/navigation";
+
+import UserProfileWidget from "./_components/UserProfileWidget";
+import classNames from "classnames";
+
+
+export default async function UsersProfilePage() {
+  const session = await getServerAuthSession();
+
+  !session && redirect("/api/auth/signin?callbackUrl=%2Fprofile")
+
+
   return (
-    <div>UsersProfilePage</div>
+    <section className={classNames({
+      "py-12 px-20 my-2": true,
+    })}>
+      <UserProfileWidget />
+    </section>
   )
 }

src/app/(pages)/view/_components/BioSyncViewWidget.tsx

@@ -1,7 +1,6 @@
 "use client"
 
-import Image from "next/image";
-import { notFound, useSearchParams } from "next/navigation"
+import { useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import type { TUserBio } from "types";
 import BioSyncNotFound from "./not-found";

src/app/(pages)/view/_components/view-bio-sync-widget.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import React from 'react'
-import { TUserBio } from 'types'
+import type { TUserBio } from 'types'
 
 
 type TProps = {

src/app/layout.tsx

@@ -3,7 +3,7 @@ import { type Metadata } from "next";
 import type { ILayout } from "types"
 import ContextProvider from "@/components/shared/ContextProvider";
 import { AuthProvider } from "@/components/shared/AuthProvider";
-import Navbar from "@/components/layout/Navbar";
+import LargeScreenNavbar from "@/components/layout/large-screen-navbar";
 import "@/styles/globals.css"
 
 
@@ -19,7 +19,7 @@ export default function RootLayout(
     <html lang="en">
       <body className={`font-serif`}>
         <AuthProvider>
-          <Navbar />
+          <LargeScreenNavbar />
           <ContextProvider>
             <main>{children}</main>
           </ContextProvider>