Add: Styling , layout changes and many other interface changes.

Update: new Prisma migration.

prisma/schema.prisma

@@ -8,7 +8,6 @@ generator client {
 datasource db {
   provider = "postgresql"
   url               = env("DATABASE_URL")
-  directUrl         = env("DIRECT_URL")
 }
 
 model Product {

src/app/(customerFacing)/layout.tsx

@@ -1,62 +1,86 @@
-import { Nav, NavLink } from "@/components/Nav";
-
+import { MobileNav, Nav, NavItem, NavLink } from "@/components/Nav";
 export const dynamic = "force-dynamic";
 
 import {
    Sheet,
    SheetContent,
-   SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
 } from "@/components/ui/sheet";
-import { sign } from "crypto";
+import { Menu, ShoppingCart } from "lucide-react";
 
 export default function Layout({
    children,
 }: Readonly<{
    children: React.ReactNode;
 }>) {
+   // Define the nav items, some with href (NavLink) and some without (NavItem)
+   const navItems = [
+      { name: "Home", href: "/" },
+      { name: "Products", href: "/products" },
+      { name: "My orders", href: "/orders" },
+      { name: "Sign In", href: "/sign-in" },
+      { name: "Logout" }, // No href for NavItem
+      { name: "Cart (0)" }, // No href for NavItem
+   ];
+
    return (
       <div className="sm:flex sm:flex-row sm:min-h-screen relative">
+         {/* Large screen nav */}
          <Nav>
-            <NavLink href="/">Home</NavLink>
-            <NavLink href="/products">Products</NavLink>
-            <NavLink href="/orders">My orders</NavLink>
-            <NavLink href="/sign-in">Sign In</NavLink>
+            {navItems.map((item) =>
+               item.href ? (
+                  <NavLink key={item.href} href={item.href}>
+                     {item.name}
+                  </NavLink>
+               ) : (
+                  <NavItem key={item.name}>{item.name}</NavItem>
+               )
+            )}
          </Nav>
 
-         <div>
-            <div className="flex justify-between">
-               <Sheet>
-                  <SheetTrigger className="text-xl">Open</SheetTrigger>
-                  <SheetContent side="left" className="max-w-40">
-                     <SheetHeader>
-                        <SheetTitle>Are you absolutely sure?</SheetTitle>
-                        <SheetDescription>
-                           This action cannot be undone. This will permanently delete your
-                           account and remove your data from our servers.
-                        </SheetDescription>
-                     </SheetHeader>
-                  </SheetContent>
-               </Sheet>
+         {/* Mobile sheet nav */}
+         <MobileNav>
+            <Sheet>
+               <SheetTrigger className="text-xl">
+                  <Menu size={40} />
+               </SheetTrigger>
+               <SheetContent side="left" className="max-w-40 flex flex-col p-0">
+                  <SheetTitle className="text-center mt-20">
+                     <span aria-hidden></span>
+                  </SheetTitle>
+                  {navItems.map((item) =>
+                     item.href ? (
+                        <NavLink key={item.href} href={item.href}>
+                           {item.name}
+                        </NavLink>
+                     ) : (
+                        <NavItem key={item.name}>{item.name}</NavItem>
+                     )
+                  )}
+               </SheetContent>
+            </Sheet>
 
-               <Sheet>
-                  <SheetTrigger className="text-xl">Open</SheetTrigger>
-                  <SheetContent side="right" className="max-w-48">
-                     <SheetHeader>
-                        <SheetTitle>Are you absolutely sure?</SheetTitle>
-                        <SheetDescription>
-                           This action cannot be undone. This will permanently delete your
-                           account and remove your data from our servers.
-                        </SheetDescription>
-                     </SheetHeader>
-                  </SheetContent>
-               </Sheet>
-            </div>
-         </div>
+            <Sheet>
+               <SheetTrigger className="text-xl relative">
+                  <ShoppingCart size={40} />
+                  <p className="absolute top-2.5 right-3 text-xs">0</p>
+               </SheetTrigger>
+               <SheetContent side="right" className="max-w-72">
+                  <SheetHeader>
+                     <SheetTitle>Are you absolutely sure?</SheetTitle>
+                     <p>
+                        This action cannot be undone. This will permanently delete your
+                        account and remove your data from our servers.
+                     </p>
+                  </SheetHeader>
+               </SheetContent>
+            </Sheet>
+         </MobileNav>
 
-         <div className="sm:ml-56 flex-1 container py-6">{children}</div>
+         {/* Page content */}
+         <div className="sm:ml-32 md:ml-40 flex-1 container py-6">{children}</div>
       </div>
    );
 }

src/app/(customerFacing)/page.tsx

@@ -60,7 +60,7 @@ type ProductGridSectionProps = {
 
 function ProductGridSection({ productsFetcher, title }: ProductGridSectionProps) {
    return (
-      <div className="space-y-4">
+      <div className="space-y-4 mt-10">
          <div className="flex gap-4">
             <h2 className="text-3xl font-bold">{title}</h2>
             <Button variant="outline">

src/app/(customerFacing)/products/[id]/page.tsx

@@ -0,0 +1,3 @@
+export default function ProductViewPage() {
+   return <div></div>;
+}

src/app/(customerFacing)/products/download/expired/page.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 export default function Expired() {
    return (
       <>
-         <h1 className="text-4xl mb-4 font-semibold text-blue-950">
+         <h1 className="text-4xl mb-4 font-semibold text-blue-950 mt-10">
             The download link has expired.
          </h1>
          <Button size="lg" asChild>

src/app/(customerFacing)/products/page.tsx

@@ -17,7 +17,7 @@ const getProducts = cache((): Promise<Product[]> => {
 
 export default function ProductPage() {
    return (
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-10">
          <Suspense
             fallback={
                <>

src/components/Nav.tsx

@@ -14,13 +14,29 @@ export function Nav({
 }) {
    return (
       <nav
-         className={`hidden sm:block bg-primary text-primary-foreground fixed inset-y-0 left-0 sm:w-56 sm:h-screen ${className}`}
+         className={`hidden sm:block bg-primary text-primary-foreground fixed inset-y-0 left-0 sm:w-32 md:w-40  sm:h-screen ${className}`}
       >
          <div className="flex flex-col h-full">{children}</div>
       </nav>
    );
 }
 
+export function MobileNav({
+   children,
+   className,
+}: {
+   children: ReactNode;
+   className?: string;
+}) {
+   return (
+      <nav
+         className={`sm:hidden bg-primary text-primary-foreground p-2 px-4 fixed z-50 w-full ${className}`}
+      >
+         <div className="flex flex-row justify-between">{children}</div>
+      </nav>
+   );
+}
+
 export function NavLink(props: Omit<ComponentProps<typeof Link>, "className">) {
    const pathname = usePathname();
    return (
@@ -33,3 +49,21 @@ export function NavLink(props: Omit<ComponentProps<typeof Link>, "className">) {
       />
    );
 }
+
+type NavItemProps = {
+   className?: string;
+   [key: string]: any;
+   children: ReactNode;
+};
+
+export function NavItem({ className, children, ...props }: NavItemProps) {
+   return (
+      <p
+         {...props}
+         className={`p-4 hover:bg-secondary hover:text-secondary-foreground focus:bg-secondary focus:text-secondary-foreground 
+            ${className}`}
+      >
+         {children}
+      </p>
+   );
+}

src/components/ProductCard.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { formatCurrency } from "@/lib/formatter";
 import {
    Card,
@@ -10,6 +12,7 @@ import {
 import { Button } from "./ui/button";
 import Link from "next/link";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 
 type ProductCardProps = {
    id: string;
@@ -26,22 +29,39 @@ export function ProductCard({
    description,
    imagePath,
 }: ProductCardProps) {
+   const router = useRouter();
+
    return (
-      <Card className="flex overflow-hidden flex-col">
+      <Card
+         className="flex overflow-hidden flex-col hover:cursor-pointer hover:opacity-90"
+         onClick={() => router.push(`/products/${id}`)}
+      >
          <div className="relative w-full h-auto aspect-video">
             <Image src={imagePath} alt={name} fill />
          </div>
          <CardHeader>
             <CardTitle>{name}</CardTitle>
-            <CardDescription>{formatCurrency(priceInCents / 100)}</CardDescription>
+            <CardDescription>
+               {priceInCents === 1 ? "Free" : formatCurrency(priceInCents / 100)}
+            </CardDescription>
          </CardHeader>
          <CardContent className="flex flex-grow">
             <p className="line-clamp-4">{description}</p>
          </CardContent>
          <CardFooter>
-            <Button asChild size="lg" className="w-full">
-               <Link href={`/products/${id}/purchase`}>Purchase</Link>
-            </Button>
+            {priceInCents === 1 ? (
+               <Button
+                  size="lg"
+                  className="w-full bg-green-700 text-white hover:bg-green-600"
+               >
+                  Download now
+               </Button>
+            ) : (
+               // {TODO: ADD TO CART FUNCTIONALITY}
+               <Button asChild size="lg" className="w-full">
+                  <Link href={`/products/${id}/purchase`}>Add to cart</Link>
+               </Button>
+            )}
          </CardFooter>
       </Card>
    );