UI refactoring

package.json

@@ -20,6 +20,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-menubar": "^1.0.4",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",

src/app/dashboard/layout.tsx

@@ -6,8 +6,8 @@ interface DashboardLayoutProps {
 
 export default function DashboardLayout({ children }: DashboardLayoutProps) {
   return (
-    <div className="container ">
-      <div className="flex min-h-[calc(100vh-140px)] flex-col gap-8 rounded-md border bg-primary-foreground px-5 py-8 md:min-h-[calc(100vh-160px)] lg:flex-row">
+    <div className="container">
+      <div className="flex min-h-[calc(100vh-140px)] flex-col gap-8 rounded-md py-8 md:min-h-[calc(100vh-160px)] lg:flex-row 2xl:gap-12">
         <aside className="lg:w-1/5">
           <SidebarNav />
         </aside>

src/app/dashboard/projects/action.ts

@@ -53,6 +53,9 @@ export async function getProjects() {
     where: {
       userId: user.id,
     },
+    orderBy: {
+      createdAt: "desc",
+    },
   });
   return projects as Project[];
 }

src/app/dashboard/projects/page.tsx

@@ -7,7 +7,8 @@ export default async function Projects() {
   const projects = await getProjects();
 
   return (
-    <div className="grid grid-cols-4 gap-4 ">
+    <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-4 ">
+      <CreateProjectModal />
       {projects.map((project) => (
         <Card
           role="button"
@@ -24,8 +25,6 @@ export default async function Projects() {
           </Link>
         </Card>
       ))}
-
-      <CreateProjectModal />
     </div>
   );
 }

src/app/dashboard/settings/settings-form.tsx

@@ -115,14 +115,14 @@ export default function SettingsForm({
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="max-w-2xl space-y-8 "
+        className="max-w-2xl space-y-8 rounded-md border p-6 "
       >
         <FormField
           control={form.control}
           name="image"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Image</FormLabel>
+              <FormLabel>Picture</FormLabel>
               <FormControl>
                 <Avatar className="group relative h-28 w-28 rounded-full">
                   <AvatarImage src={field.value} alt={form.getValues().name} />

src/components/layout/footer.tsx

@@ -1,12 +1,13 @@
 import Image from "next/image";
 import Link from "next/link";
 import { siteConfig } from "~/config/site";
+import ThemeToggle from "../shared/theme-toggle";
 
 export default function Footer() {
   return (
     <footer className="relative z-10 w-full py-4 md:py-0">
-      <div className="container flex flex-col items-center justify-between gap-4 md:h-20 md:flex-row">
-        <div className="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
+      <div className="container flex items-center justify-between gap-4 md:h-20 md:flex-row">
+        <div className="flex flex-col items-center gap-4 md:flex-row md:gap-2">
           <Image
             src="/chad-next.png"
             alt="ChadNext logo"
@@ -26,20 +27,8 @@ export default function Footer() {
             </Link>
           </p>
         </div>
-        <p className="space-x-4 text-center text-sm leading-loose text-muted-foreground md:text-left">
-          <Link
-            href="/about"
-            className="font-semibold hover:underline hover:underline-offset-4"
-          >
-            About
-          </Link>
-          <Link
-            href="/changelog"
-            className="font-semibold hover:underline hover:underline-offset-4"
-          >
-            Changelog
-          </Link>
-        </p>
+
+        <ThemeToggle />
       </div>
     </footer>
   );

src/components/layout/header/index.tsx

@@ -4,5 +4,11 @@ import Navbar from "./navbar";
 
 export default async function Header() {
   const currentUser = (await getUser()) as CurrentUser;
-  return <Navbar currentUser={currentUser} />;
+  return (
+    <header className="h-20 w-full bg-transparent">
+      <div className="container h-full">
+        <Navbar loggedInUser={currentUser} />
+      </div>
+    </header>
+  );
 }

src/components/layout/header/navbar.tsx

@@ -1,50 +1,94 @@
 "use client";
 
+import { MenuIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
+import { useState } from "react";
 import { buttonVariants } from "~/components/ui/button";
-import useScroll from "~/hooks/use-scroll";
-import { cn } from "~/lib/utils";
+import { Sheet, SheetContent, SheetTrigger } from "~/components/ui/sheet";
 import { type CurrentUser } from "~/types";
-import ThemeToggle from "../../shared/theme-toggle";
 import UserNav from "../user-nav";
-
-export default function Navbar({ currentUser }: { currentUser: CurrentUser }) {
-  const scrolled = useScroll(50);
-
+export default function Navbar({
+  loggedInUser,
+}: {
+  loggedInUser: CurrentUser;
+}) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
   return (
-    <header
-      className={cn(
-        "sticky top-0 z-30  w-full bg-transparent ",
-        scrolled
-          ? " h-16 border-b backdrop-blur-xl  transition-all duration-300 ease-in-out"
-          : " h-20"
-      )}
-    >
-      <div className="container h-full">
-        <div className="flex h-full  items-center justify-between">
-          <Link href="/" className="flex items-center text-2xl font-bold">
-            <Image
-              src="/chad-next.png"
-              alt="ChadNext logo"
-              width="30"
-              height="30"
-              className="mr-2 rounded-sm object-contain"
-            />
-            <p>ChadNext</p>
+    <nav className="flex h-full items-center justify-between">
+      <Link href="/" className="flex items-center text-2xl font-bold">
+        <Image
+          src="/chad-next.png"
+          alt="ChadNext logo"
+          width="30"
+          height="30"
+          className="mr-2 rounded-sm object-contain"
+        />
+        <p>ChadNext</p>
+      </Link>
+      <div className="hidden items-center gap-12 md:flex 2xl:gap-16">
+        <div className="space-x-4 text-center text-sm leading-loose text-muted-foreground md:text-left">
+          <Link
+            href="/changelog"
+            className="font-semibold hover:underline hover:underline-offset-4"
+          >
+            Changelog
+          </Link>
+          <Link
+            href="/about"
+            className="font-semibold hover:underline hover:underline-offset-4"
+          >
+            About
           </Link>
-          <div className=" flex items-center gap-x-2">
-            <ThemeToggle />
-            {currentUser ? (
-              <UserNav user={currentUser} />
-            ) : (
-              <Link href="/signin" className={buttonVariants()}>
-                Sign In
-              </Link>
-            )}
-          </div>
+        </div>
+        <div className="flex items-center gap-x-2">
+          {loggedInUser ? (
+            <UserNav user={loggedInUser} />
+          ) : (
+            <Link href="/signin" className={buttonVariants()}>
+              Sign In
+            </Link>
+          )}
         </div>
       </div>
-    </header>
+      <Sheet open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <SheetTrigger className="md:hidden">
+          <MenuIcon />
+        </SheetTrigger>
+        <SheetContent>
+          <div className="flex flex-col items-center space-y-10 py-10">
+            <div className="space-y-4 text-center text-sm leading-loose text-muted-foreground">
+              <Link
+                href="/changelog"
+                className="block font-semibold hover:underline hover:underline-offset-4"
+                onClick={() => setIsModalOpen(false)}
+              >
+                Changelog
+              </Link>
+              <Link
+                href="/about"
+                className="block font-semibold hover:underline hover:underline-offset-4"
+                onClick={() => setIsModalOpen(false)}
+              >
+                About
+              </Link>
+            </div>
+            <div className="flex items-center gap-x-2">
+              {loggedInUser ? (
+                <UserNav user={loggedInUser} />
+              ) : (
+                <Link
+                  href="/signin"
+                  className={buttonVariants()}
+                  onClick={() => setIsModalOpen(false)}
+                >
+                  Sign In
+                </Link>
+              )}
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </nav>
   );
 }

src/components/layout/user-nav.tsx

@@ -1,8 +1,9 @@
+"use client";
+
 import { LayoutDashboardIcon, LogOut } from "lucide-react";
 import { signOut } from "next-auth/react";
 import Link from "next/link";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
-import { Button } from "~/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,14 +18,12 @@ export default function UserNav({ user }: { user: CurrentUser }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
-          <Avatar className="h-8 w-8">
-            <AvatarImage src={user.image || ""} alt={user.name || ""} />
-            <AvatarFallback>{user.name?.[0]}</AvatarFallback>
-          </Avatar>
-        </Button>
+        <Avatar className="h-8 w-8">
+          <AvatarImage src={user.image || ""} alt={user.name || ""} />
+          <AvatarFallback>{user.name?.[0]}</AvatarFallback>
+        </Avatar>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56" align="end" forceMount>
+      <DropdownMenuContent>
         <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
             <p className="text-sm font-medium leading-none">{user.name}</p>

src/components/sections/hero.tsx

@@ -31,7 +31,7 @@ export default async function Hero() {
               Introducing ChadNext
             </p>
           </a>
-          <h1 className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-400 bg-clip-text text-center font-heading text-4xl font-bold tracking-[-0.02em] text-transparent drop-shadow-sm duration-300 ease-linear animate-in zoom-in-50 dark:bg-gradient-to-br dark:from-gray-100 dark:to-gray-900 md:text-7xl md:leading-[5rem]">
+          <h1 className=" bg-gradient-to-br from-gray-900 via-gray-800 to-gray-400 bg-clip-text text-center font-heading text-[40px] font-bold leading-tight tracking-[-0.02em] text-transparent drop-shadow-sm duration-300 ease-linear animate-in zoom-in-50 dark:bg-gradient-to-br dark:from-gray-100 dark:to-gray-900 md:text-7xl md:leading-[5rem]">
             <Balancer>Quick Starter Template for your Next.js project</Balancer>
           </h1>
           <p className="mt-6 text-center text-muted-foreground md:text-xl">