product page init

app/(root)/login/page.tsx

@@ -4,29 +4,29 @@ import Head from "next/head";
 import Image from "next/image";
 import React, { useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
-import useAuth from "@/hooks/useAuth";
+
 
 interface Inputs {
   email: string;
   password: string;
 }
 
 const Login = () => {
-  const [login, setLogin] = useState(false);
-  const {signIn, signUp} = useAuth()
+  // const [login, setLogin] = useState(false);
+  // // const {signIn, signUp} = useAuth()
 
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<Inputs>();
-  const onSubmit: SubmitHandler<Inputs> = async ({email, password}) => {
-    if(login) {
-        await signIn(email, password)
-    }else {
-        await signUp(email, password)
-    }
-  }
+  // const {
+  //   register,
+  //   handleSubmit,
+  //   formState: { errors },
+  // } = useForm<Inputs>();
+  // const onSubmit: SubmitHandler<Inputs> = async ({email, password}) => {
+  //   if(login) {
+  //       await signIn(email, password)
+  //   }else {
+  //       await signUp(email, password)
+  //   }
+  // }
 
   return (
     <div className="relative flex h-screen w-screen flex-col bg-black md:items-center md:justify-center md:bg-transparent">
@@ -51,7 +51,7 @@ const Login = () => {
       />
 
       <form
-        onSubmit={handleSubmit(onSubmit)}
+        // onSubmit={handleSubmit(onSubmit)}
         className="relative mt-24 space-y-8 rounded bg-black/75 py-10 px-6 md:mt-0 md:max-w-md md:px-14 "
       >
         <h1 className="text-4xl font-semibold">Sign In</h1>
@@ -61,38 +61,38 @@ const Login = () => {
               type="email"
               placeholder="Email"
               className="input"
-              {...register("email", { required: true })}
+              // {...register("email", { required: true })}
             />
-            {errors.email && (
+            {/* {errors.email && (
               <p className=" w-[80%] p-1 text-[14px] font-light  text-[#e87c03]">
                 Please enter a valid email.
               </p>
-            )}
+            )} */}
           </label>
           <label className="inline-block w-full">
             <input
               type="password"
               placeholder="Password"
               className="input"
-              {...register("password", { required: true })}
+              // {...register("password", { required: true })}
             />
-            {errors.password && (
+            {/* {errors.password && (
               <p className="p-1 text-[14px] font-light  text-[#e87c03]">
                 Your password must contain between 4 and 60 characters.
               </p>
-            )}
+            )} */}
           </label>
         </div>
         <button
 
           className="w-full rounded bg-[#e50914] py-3 font-semibold"
-          onClick={() => setLogin(true)}
+          // onClick={() => setLogin(true)}
         >
           Sign In
         </button>
         <div className="text-[gray]">
           New to Netflix? {"  "}
-          <button type="submit" className="text-white hover:underline" onClick={() => setLogin(false)}>Sign up now</button>
+          <button type="submit" className="text-white hover:underline" onClick={() => ''}>Sign up now</button>
         </div>
       </form>
     </div>

app/(root)/product/[id]/page.tsx

@@ -0,0 +1,13 @@
+import db from "@/db/db";
+import React from "react";
+
+export default async function ProductPage({
+  params: { id },
+}: {
+  params: { id: string };
+}) {
+  const product = await db.product.findUnique({
+    where: { id },
+  });
+  return <div></div>;
+}

app/admin/(root)/sales/page.tsx

@@ -1,15 +1,26 @@
 import React from "react";
 import PageHeader from "../../_components/PageHeader";
 import db from "@/db/db";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { formatCurrency, formatNumber } from "@/lib/formatters";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { MoreVertical } from "lucide-react";
 import CancelDropdownOrder from "./_components/OrderActions";
 
 export default function AdminSalesPage() {
   return (
-    <div>
+    <div className="space-y-8">
       <PageHeader>Orders</PageHeader>
       <SalesTable />
     </div>
@@ -20,8 +31,8 @@ async function SalesTable() {
   const orders = await db.order.findMany({
     select: {
       id: true,
-      product : true,
-      createdAt : true
+      product: true,
+      createdAt: true,
     },
     orderBy: { createdAt: "desc" },
   });
@@ -50,14 +61,13 @@ async function SalesTable() {
                   <span className="sr-only">Actions</span>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
-                  <CancelDropdownOrder
-                    id={order.id}
-                  />
+                  <CancelDropdownOrder id={order.id} />
                 </DropdownMenuContent>
               </DropdownMenu>
             </TableCell>
           </TableRow>
         ))}
       </TableBody>
-    </Table>)
-}
+    </Table>
+  );
+}

components/hero/Hero.tsx

@@ -12,6 +12,7 @@ import {
 } from "../ui/carousel";
 import { Card, CardContent } from "../ui/card";
 import Image from "next/image";
+import Link from "next/link";
 
 const getNewCollection = cache(
   () => {
@@ -69,17 +70,20 @@ async function NewCollectionCarousel({
 type ProductCarouselProps = {
   name: string;
   imagePath: string;
+  id: string;
 };
 
-function ProductCarousel({ name, imagePath }: ProductCarouselProps) {
+function ProductCarousel({ id, name, imagePath }: ProductCarouselProps) {
   return (
     <CarouselItem className="w-fit h-fit items-center flex justify-center">
-      <Card>
-        <CardContent className="p-0">
-          {/* <h1>{name}</h1> */}
-          <Image src={imagePath} alt={name} height={300} width={300} />
-        </CardContent>
-      </Card>
+      <Link href={`/product/${id}`}>
+        <Card>
+          <CardContent className="p-0">
+            {/* <h1>{name}</h1> */}
+            <Image src={imagePath} alt={name} height={300} width={300} />
+          </CardContent>
+        </Card>
+      </Link>
     </CarouselItem>
   );
 }