table created with modal for adding new items via dialog

src/App.tsx

@@ -2,29 +2,90 @@ import * as React from "react";
 import "./App.css";
 import { FaRegPlusSquare } from "react-icons/fa";
 import { Button } from "./components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import ModalContent1 from "./components/Modal/ModalContent1";
 
 function App() {
+  const dialogRef = React.useRef<HTMLDialogElement>(null);
+  const [dialogContent, setDialogContent] =
+    React.useState<React.ReactNode>(null);
+
+  function toggleDialog() {
+    if (!dialogRef.current) {
+      return;
+    }
+    dialogRef.current.hasAttribute("open")
+      ? dialogRef.current.close()
+      : dialogRef.current.showModal();
+  }
+
   return (
     <main className="w-full h-screen flex flex-col justify-center bg-stone-200 p-8">
       <h1 className="text-3xl font-bold text-center">KEVO'S ATTIRE BACKEND</h1>
       <div className="flex flex-col w-full h-screen mt-8">
-        {/* Add item */}
+        {/* Add item via dialog */}
         <div className="w-full text-3xl flex justify-end pr-20">
-          <Button className="bg-transparent text-3xl text-black hover:bg-slate-300">
+          <Button
+            onClick={() => {
+              setDialogContent(<ModalContent1 />);
+              toggleDialog();
+            }}
+            className="bg-transparent text-3xl text-black hover:bg-slate-300"
+          >
             <FaRegPlusSquare />
           </Button>
         </div>
-        {/* Table headings */}
-        <div className="flex w-full justify-evenly font-bold text-2xl pb-8 border-b-2 border-black">
-          <span>Item</span>
-          <span>Design Number</span>
-          <span>isActive</span>
-        </div>
-        <div className="w-full h-full bg-purple-300">
-          <ul>
-            <li></li>
-          </ul>
+        {/* Dialog content */}
+        <dialog
+          ref={dialogRef}
+          onClick={(e) => {
+            if (e.currentTarget === e.target) {
+              toggleDialog();
+            }
+          }}
+          className="p-12 bg-slate-400 rounded-xl border-black border-2 items-center"
+        >
+          <div className="flex flex-col">
+            {dialogContent}
+            {/* close button */}
+            <Button
+              onClick={() => {
+                toggleDialog();
+              }}
+              className="text-xl text-black hover:bg-slate-300 mt-4 bg-slate-500 rounded-xl"
+            >
+              Close
+            </Button>
           </div>
+        </dialog>
+        {/* Table */}
+        <Table className="bg-slate-500 text-white">
+          <TableCaption>All products within the database.</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Invoice</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Method</TableHead>
+              <TableHead className="text-right">Amount</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell className="font-medium">INV001</TableCell>
+              <TableCell>Paid</TableCell>
+              <TableCell>Credit Card</TableCell>
+              <TableCell className="text-right">$250.00</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
       </div>
     </main>
   );

src/components/Modal/ModalContent1.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const ModalContent1 = () => {
+  return (
+    <div>ModalContent1</div>
+  )
+}
+
+export default ModalContent1

src/components/Modal/ModelContent2.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const ModelContent2 = () => {
+  return (
+    <div>ModelContent2</div>
+  )
+}
+
+export default ModelContent2

src/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-white [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}