Feat/hng create edit product detail page team kimiko

src/app/dashboard/(admin)/admin/products/_components/ProductTable/product-table.tsx

@@ -1,17 +1,6 @@
-"use client";
-
-import clsx from "clsx";
-import { ChevronLeft, ChevronRight, EllipsisVertical } from "lucide-react";
-import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
 import { Button } from "~/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
 import {
   Pagination,
   PaginationContent,
@@ -23,68 +12,12 @@ import {
   Table,
   TableBody,
   TableCaption,
-  TableCell,
   TableHead,
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import { Product, products } from "../../data/mock.products";
-import DeleteDialog from "../ProductModal/delete-dialog";
-
-const ProductRow = ({ product }: { product: Product }) => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const handleOpenDialog = () => setIsDialogOpen(true);
-  const handleCloseDialog = () => setIsDialogOpen(false);
-  return (
-    <>
-      <TableRow className="h-[99px] w-full border-b border-slate-300 p-4 text-center text-sm font-medium text-black *:text-black last-of-type:border-b">
-        <TableCell>
-          <div className="justify-betweenitems-center flex items-center gap-3">
-            <div className="aspect-square h-[37px] w-[37px] rounded bg-gradient-to-b from-[#f6c790] to-[#e67e1e] md:h-[47px] md:w-[47px] lg:h-[67px] lg:w-[67px]" />
-            <span className="truncate text-left text-sm font-medium lg:text-right">
-              {product.name}
-            </span>
-          </div>
-        </TableCell>
-        <TableCell>{product.price}</TableCell>
-        <TableCell>{product.totalSold}</TableCell>
-        <TableCell>
-          <div
-            className={clsx(
-              product.status === "Active"
-                ? "border-lime-500 text-lime-500"
-                : "border-black text-black",
-              "inline-flex h-[27px] w-[57px] items-center justify-center gap-2.5 rounded-[80px] border",
-            )}
-          >
-            <span className="text-xs">{product.status}</span>
-          </div>
-        </TableCell>
-        <TableCell className="text-right">{product.createdAt}</TableCell>
-        <TableCell>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                className="border border-transparent bg-transparent text-black hover:border-primary hover:bg-transparent hover:text-primary focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-                size={"icon"}
-              >
-                <EllipsisVertical />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel className="sr-only">Actions</DropdownMenuLabel>
-              <DropdownMenuItem>Edit</DropdownMenuItem>
-              <DropdownMenuItem onClick={handleOpenDialog}>
-                Delete
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </TableCell>
-      </TableRow>
-      {isDialogOpen && <DeleteDialog onClose={handleCloseDialog} />}
-    </>
-  );
-};
+import { products } from "../../data/mock.products";
+import ProductRow from "./single-product-row";
 
 const ProductTable = () => {
   return (

src/app/dashboard/(admin)/admin/products/_components/ProductTable/single-product-row.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import clsx from "clsx";
+import { EllipsisVertical } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "~/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { TableCell, TableRow } from "~/components/ui/table";
+import { Product } from "../../data/mock.products";
+import DeleteDialog from "../ProductModal/delete-dialog";
+
+const ProductRow = ({ product }: { product: Product }) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const handleOpenDialog = () => setIsDialogOpen(true);
+  const handleCloseDialog = () => setIsDialogOpen(false);
+  return (
+    <>
+      <TableRow className="h-[99px] w-full border-b border-slate-300 p-4 text-center text-sm font-medium text-black *:text-black last-of-type:border-b">
+        <TableCell>
+          <div className="justify-betweenitems-center flex items-center gap-3">
+            <div className="aspect-square h-[37px] w-[37px] rounded bg-gradient-to-b from-[#f6c790] to-[#e67e1e] md:h-[47px] md:w-[47px] lg:h-[67px] lg:w-[67px]" />
+            <span className="truncate text-left text-sm font-medium lg:text-right">
+              {product.name}
+            </span>
+          </div>
+        </TableCell>
+        <TableCell>{product.price}</TableCell>
+        <TableCell>{product.totalSold}</TableCell>
+        <TableCell>
+          <div
+            className={clsx(
+              product.status === "Active"
+                ? "border-lime-500 text-lime-500"
+                : "border-black text-black",
+              "inline-flex h-[27px] w-[57px] items-center justify-center gap-2.5 rounded-[80px] border",
+            )}
+          >
+            <span className="text-xs">{product.status}</span>
+          </div>
+        </TableCell>
+        <TableCell className="text-right">{product.createdAt}</TableCell>
+        <TableCell>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                className="border border-transparent bg-transparent text-black hover:border-primary hover:bg-transparent hover:text-primary focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+                size={"icon"}
+              >
+                <EllipsisVertical />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel className="sr-only">Actions</DropdownMenuLabel>
+              <DropdownMenuItem>Edit</DropdownMenuItem>
+              <DropdownMenuItem onClick={handleOpenDialog}>
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </TableCell>
+      </TableRow>
+      {isDialogOpen && <DeleteDialog onClose={handleCloseDialog} />}
+    </>
+  );
+};
+
+export default ProductRow;

src/app/dashboard/(admin)/admin/products/data/mock.products.ts

@@ -1,4 +1,5 @@
 export interface Product {
+  id: string;
   name: string;
   price: string;
   totalSold: string;
@@ -8,27 +9,31 @@ export interface Product {
 
 export const products: Product[] = [
   {
+    id: "product-1",
     name: "Hypernova Headphones",
     price: "$129.99",
     totalSold: "25",
     status: "Draft",
     createdAt: "2024-07-16 10:36AM",
   },
   {
+    id: "product-2",
     name: "Galaxy Tablet",
     price: "$399.99",
     totalSold: "40",
     status: "Active",
     createdAt: "2024-07-14 03:15PM",
   },
   {
+    id: "product-3",
     name: "Astro Smartwatch",
     price: "$199.99",
     totalSold: "15",
     status: "Draft",
     createdAt: "2024-07-10 09:20AM",
   },
   {
+    id: "product-4",
     name: "Nebula Laptop",
     price: "$899.99",
     totalSold: "50",

src/app/dashboard/(admin)/admin/products/edit/[productID]/_components/ProductMedia.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import Image from "next/image";
+import { useRef, useState } from "react";
+
+import uploadBg from "~/app/dashboard/(admin)/admin/products/edit/[productID]/_components/upload-bg.jpeg";
+
+const ProductMedia = () => {
+  const [productImg, setProductImg] = useState<string>("");
+  const fileUploaderReference = useRef<HTMLInputElement | null>(null);
+  const getUploadedPicUrl = () => {
+    if (
+      fileUploaderReference.current !== null &&
+      fileUploaderReference.current.files !== null
+    ) {
+      const picURL = URL.createObjectURL(
+        fileUploaderReference.current.files[0],
+      );
+      setProductImg(picURL);
+    }
+  };
+
+  const triggerFileUploader = () => {
+    if (fileUploaderReference.current !== null)
+      fileUploaderReference.current.click();
+  };
+
+  return (
+    <>
+      <div className="imgs-uploader flex flex-col items-center justify-center gap-4 px-2 xl:flex-row xl:gap-2">
+        <Image
+          width={277}
+          height={292}
+          src={productImg === "" ? uploadBg : productImg}
+          alt="product img"
+          className="bg-[#F1F5F9]"
+        />
+
+        <div
+          className="m-0 flex w-[14rem] cursor-pointer justify-center rounded-[0.375rem] border-[1px] border-solid border-[#CBD5E1] px-1 text-xl font-semibold xl:my-3 xl:h-[11rem] xl:w-fit xl:items-center"
+          onClick={triggerFileUploader}
+        >
+          +
+        </div>
+        <input
+          ref={fileUploaderReference}
+          hidden
+          type="file"
+          name="upload-image"
+          id="upload-image"
+          onChange={getUploadedPicUrl}
+        />
+      </div>
+    </>
+  );
+};
+
+export default ProductMedia;

src/app/dashboard/(admin)/admin/products/edit/[productID]/_components/StockTable.tsx

@@ -0,0 +1,126 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+
+// id: string;
+//   name: string;
+//   price: string;
+//   totalSold: string;
+//   status: "Active" | "Draft";
+//   createdAt: string;
+interface TableType {
+  price: string;
+}
+
+const StockTable = ({ price }: TableType) => {
+  return (
+    <>
+      <div className="stock flex w-full max-w-[690px] flex-col gap-6 rounded-[0.375rem] border-[1px] border-solid border-[#CBD5E1] p-6">
+        <div className="border-b-solid w-full border-b-[1px] border-b-[#CBD5E1] pb-4">
+          <h1 className="text-6 font-semibold text-[#0A0A0A]">Stock</h1>
+          <p className="text-[0.875rem] font-normal text-[#525252]">
+            Add and remove products
+          </p>
+        </div>
+        <Table className="max-w-[500px] whitespace-nowrap rounded-lg border-[1px] border-solid border-[#E4E4E7]">
+          <TableHeader className="max-w-[500px] rounded-lg bg-[#F1F5F9] shadow-none *:text-left *:text-base *:text-neutral-950 *:shadow-none hover:bg-primary/10">
+            <TableRow className="max-w-[500px] rounded-lg">
+              <TableHead className="text-[0.875rem] font-medium text-[#0A0A0A]">
+                Size
+              </TableHead>
+              <TableHead className="text-[0.875rem] font-medium text-[#0A0A0A]">
+                Stock
+              </TableHead>
+              <TableHead className="text-[0.875rem] font-medium text-[#0A0A0A]">
+                Price
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody className="max-w-[500px]">
+            <TableRow className="max-w-[500px] border-none bg-white shadow-none *:text-left *:text-base *:text-neutral-950 *:shadow-none hover:bg-[#F1F5F9]">
+              <TableCell>Small</TableCell>
+              <TableCell>
+                <input
+                  type="text"
+                  name="small"
+                  id="small"
+                  className="rounded-[0.375rem] border-[1px] border-solid border-[#E4E4E7] px-3 py-[0.72rem]"
+                />
+              </TableCell>
+              <TableCell>
+                <div className="flex w-fit items-center gap-2 rounded-[0.375rem] border-[1px] border-solid border-[#E4E4E7]">
+                  <h1 className="mx-3 my-2 text-2xl font-medium">$</h1>
+                  <input
+                    type="text"
+                    name="small"
+                    id="small-price"
+                    defaultValue={price}
+                    className="rounded-[0.375rem] px-3 py-[0.72rem]"
+                  />
+                </div>
+              </TableCell>
+            </TableRow>
+
+            <TableRow className="max-w-[500px] border-none bg-white shadow-none *:text-left *:text-base *:text-neutral-950 *:shadow-none hover:bg-[#F1F5F9]">
+              <TableCell>Standard</TableCell>
+              <TableCell>
+                <input
+                  type="text"
+                  name="standard"
+                  id="standard"
+                  className="rounded-[0.375rem] border-[1px] border-solid border-[#E4E4E7] px-3 py-[0.72rem]"
+                />
+              </TableCell>
+              <TableCell>
+                <div className="flex w-fit items-center gap-2 rounded-[0.375rem] border-[1px] border-solid border-[#E4E4E7]">
+                  <h1 className="mx-3 my-2 text-2xl font-medium">$</h1>
+                  <input
+                    type="text"
+                    name="standard-price"
+                    id="standard-price"
+                    defaultValue={price}
+                    className="rounded-[0.375rem] px-3 py-[0.72rem]"
+                  />
+                </div>
+              </TableCell>
+            </TableRow>
+
+            <TableRow className="max-w-[500px] border-none bg-white shadow-none *:text-left *:text-base *:text-neutral-950 *:shadow-none hover:bg-[#F1F5F9]">
+              <TableCell>Large</TableCell>
+              <TableCell>
+                <input
+                  type="text"
+                  name="large"
+                  id="large"
+                  className="rounded-[0.375rem] border-[1px] border-solid border-[#E4E4E7] px-3 py-[0.72rem]"
+                />
+              </TableCell>
+              <TableCell>
+                <div className="flex w-fit items-center gap-2 rounded-[0.375rem] border-[1px] border-solid border-[#E4E4E7]">
+                  <h1 className="mx-3 my-2 text-2xl font-medium">$</h1>
+                  <input
+                    type="text"
+                    name="large-price"
+                    id="large-price"
+                    defaultValue={price}
+                    className="rounded-[0.375rem] px-3 py-[0.72rem]"
+                  />
+                </div>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+        <button className="w-fit rounded-[0.375rem] border-[1px] border-solid border-[#E2E8F0] px-4 py-2 text-[0.875rem] font-medium text-[#0F172A]">
+          Add a variant
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default StockTable;