feat: settings UI

package.json

@@ -26,6 +26,7 @@
     "@kinde-oss/kinde-auth-nextjs": "^2.2.6",
     "@langchain/google-genai": "^0.0.16",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",

src/app/dashboard/_components/SideNavBottomSection.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { Archive, CheckCircle2, File, Github, Trash2 } from "lucide-react";
+import { Archive, CheckCircle2, File, Github, Settings, Trash2 } from "lucide-react";
 import React, { useState, useContext, useEffect } from "react";
 import {
   Dialog,
@@ -55,6 +55,12 @@ function SideNavBottomSection({ onFileCreate, totalFiles, activeTeam }: any) {
       icon: Archive,
       path: `/dashboard/archive`,
     },
+    {
+      id: 3,
+      name: "Settings",
+      icon: Settings,
+      path: `/dashboard/settings`,
+    },
   ];
 
   const { fileList_, setFileList_ } = useContext(FileListContext);

src/app/dashboard/settings/_components/Navbar.tsx

@@ -0,0 +1,17 @@
+import { Button } from "@/components/ui/button";
+import { ArrowBigLeftIcon } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+
+export default function Navbar() {
+  return (
+    <div className="flex gap-2 items-center justify-start p-4">
+      <Link href={"/dashboard"}>
+        <Button variant={"ghost"} size={"icon"}>
+          <ArrowBigLeftIcon className="w-7 h-7" />
+        </Button>
+      </Link>
+      <h1 className=" text-lg">Settings</h1>
+    </div>
+  );
+}

src/app/dashboard/settings/_components/SettingsForm.tsx

@@ -0,0 +1,70 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+
+
+const FormSchema = z.object({
+  newName: z.string().min(1, {
+    message: "Username required!",
+  }),
+});
+
+export function SettingsForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      newName: "",
+    },
+  });
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {}
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="w-full space-y-6 flex flex-col items-center justify-center"
+      >
+        <FormField
+          control={form.control}
+          name="newName"
+          render={({ field }) => (
+            <div className="flex w-[400px] flex-col">
+              <FormItem className="w-full">
+                <FormLabel className="px-2">Email</FormLabel>
+                <FormControl>
+                  <Input placeholder="Email..." {...field} className="" />
+                </FormControl>
+              </FormItem>
+              <FormItem className="w-full">
+                <FormLabel className="px-2">Username</FormLabel>
+                <FormControl>
+                  <Input placeholder="Name..." {...field} className="" />
+                </FormControl>
+                <FormDescription className="px-2">
+                  Enter username here!
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            </div>
+          )}
+        />
+        <Button type="submit" className="flex gap-2 font-semibold">
+          Save
+        </Button>
+      </form>
+    </Form>
+  );
+}

src/app/dashboard/settings/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import Navbar from "./_components/Navbar";
+import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
+import { Separator } from "@/components/ui/separator";
+import { useEffect, useState } from "react";
+import { useConvex } from "convex/react";
+import { api } from "../../../../convex/_generated/api";
+import { SettingsForm } from "./_components/SettingsForm";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { PencilIcon } from "lucide-react";
+
+export default function Page() {
+  const { user } = useKindeBrowserClient();
+  const convex = useConvex();
+  const [savedData, setSavedData] = useState<any>(null);
+
+  useEffect(() => {
+    const getData = async () => {
+      const result = await convex.query(api.user.getUser, {
+        email: user?.email!,
+      });
+      setSavedData(result[0]);
+    };
+    if (user) {
+      getData();
+    }
+  }, [user]);
+
+  console.log(savedData);
+
+  return (
+    <div className="flex flex-col">
+      <Navbar />
+      {user && savedData && (
+        <div className="flex w-full h-full xl:p-5 items-center justify-center">
+          <Card className="flex rounded-lg overflow-hidden relative sm:w-[700px] flex-col items-center justify-center p-10 gap-6 px-10">
+            <div className="absolute w-full h-[140px] z-0 gradientBackground top-0"></div>
+
+            <Button
+              variant={"secondary"}
+              size={"icon"}
+              className="absolute top-14 w-[32px] h-[32px] right-[37%] rounded-full z-10"
+            >
+              <PencilIcon className="w-4 h-4" />
+            </Button>
+            <Avatar className="w-[180px] relative h-[180px]">
+              <AvatarImage src="https://github.com/shadcn.png" />
+              <AvatarFallback>
+                {user?.given_name?.charAt(0)}
+                {user?.family_name?.charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col items-center justify-center">
+              <h1 className=" font-bold">{savedData.name}</h1>
+              <p className=" text-gray-400">{savedData.email}</p>
+            </div>
+            <div className="flex gap-3">
+              <Button variant={"secondary"}>Change Picture</Button>
+              <Button className="bg-red-500 hover:bg-red-600">
+                Delete Picture
+              </Button>
+            </div>
+            <Separator />
+            <SettingsForm />
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}

src/app/globals.css

@@ -135,3 +135,7 @@
 .tc-popover__item-icon {
   background-color: black !important;
 }
+
+.gradientBackground{
+  background-image: linear-gradient(to bottom right, red, yellow);
+}

src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }