From d41f812fd35e75a4ab9deaf81a7804472b9794b5 Mon Sep 17 00:00:00 2001
From: Drew Rautenberg <drew@drewrautenberg.com>
Date: Thu, 16 Jan 2025 21:17:49 -0600
Subject: [PATCH] redid button

---
 .../src/common/components/BarkButton.tsx      | 10 ++++
 barkmanui/src/common/components/Button.tsx    |  9 ----
 .../src/features/inventory/InventoryList.tsx  | 49 +++++++++----------
 barkmanui/src/pages/home.tsx                  |  8 ---
 4 files changed, 32 insertions(+), 44 deletions(-)
 create mode 100644 barkmanui/src/common/components/BarkButton.tsx
 delete mode 100644 barkmanui/src/common/components/Button.tsx

diff --git a/barkmanui/src/common/components/BarkButton.tsx b/barkmanui/src/common/components/BarkButton.tsx
new file mode 100644
index 0000000..5a0037e
--- /dev/null
+++ b/barkmanui/src/common/components/BarkButton.tsx
@@ -0,0 +1,10 @@
+import {PropsWithChildren} from "react";
+import { Button } from '@mantine/core';
+
+function BarkButton({children}: PropsWithChildren) {
+   return (
+       <Button variant="filled" color="red" size="md" radius="md">{children}</Button>
+   )
+}
+
+export default BarkButton;
\ No newline at end of file
diff --git a/barkmanui/src/common/components/Button.tsx b/barkmanui/src/common/components/Button.tsx
deleted file mode 100644
index f181445..0000000
--- a/barkmanui/src/common/components/Button.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {PropsWithChildren} from "react";
-
-function Button({children}: PropsWithChildren) {
-   return (
-    <button className="bg-brand rounded text-white font-bold px-4 py-2">{children}</button>
-   )
-}
-
-export default Button
\ No newline at end of file
diff --git a/barkmanui/src/features/inventory/InventoryList.tsx b/barkmanui/src/features/inventory/InventoryList.tsx
index 45844f2..ca97bc8 100644
--- a/barkmanui/src/features/inventory/InventoryList.tsx
+++ b/barkmanui/src/features/inventory/InventoryList.tsx
@@ -1,8 +1,8 @@
 import {useQuery} from "@tanstack/react-query";
-import {Link} from "react-router";
 import {InventoryItem} from "./types";
-import Button from "../../common/components/Button.tsx";
 import {BarkHeader} from "../../common/components/BarkHeader.tsx";
+import { Table } from '@mantine/core';
+import BarkButton from "../../common/components/BarkButton.tsx";
 
 
 function InventoryList() {
@@ -28,38 +28,33 @@ function InventoryList() {
     return (
         <>
             <BarkHeader></BarkHeader>
-
-            <div>
-                <h1 className={"text-brand"}>Inventory</h1>
-            </div>
             <p>
                 ARFF ARFF BARK BARK
             </p>
-            <Link to="/">
-                <Button>Home</Button>
-            </Link>
+            <BarkButton>Add Item</BarkButton>
+
             <div>{isFetching ? 'Updating...' : ''}</div>
 
-            <table className="w-1/2">
-                <thead>
-                <tr className="text-left">
-                    <th className="text-brand">ID</th>
-                    <th className="text-brand">Brand</th>
-                    <th className="text-brand">Item</th>
-                    <th className="text-brand">Status</th>
-                </tr>
-                </thead>
-                <tbody>
+            <Table striped>
+                <Table.Thead>
+                <Table.Tr className="text-left">
+                    <Table.Th color="red">ID</Table.Th>
+                    <Table.Th className="text-brand">Brand</Table.Th>
+                    <Table.Th className="text-brand">Item</Table.Th>
+                    <Table.Th className="text-brand">Status</Table.Th>
+                </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
                 {data.map((data) => (
-                    <tr key={data.id}>
-                        <td>{data.id}</td>
-                        <td>{data.brand}</td>
-                        <td>{data.name}</td>
-                        <td>{data.status}</td>
-                    </tr>
+                    <Table.Tr key={data.id}>
+                        <Table.Td>{data.id}</Table.Td>
+                        <Table.Td>{data.brand}</Table.Td>
+                        <Table.Td>{data.name}</Table.Td>
+                        <Table.Td>{data.status}</Table.Td>
+                    </Table.Tr>
                 ))}
-                </tbody>
-            </table>
+                </Table.Tbody>
+            </Table>
         </>
     )
 }
diff --git a/barkmanui/src/pages/home.tsx b/barkmanui/src/pages/home.tsx
index 6c7c4e7..2d1c00a 100644
--- a/barkmanui/src/pages/home.tsx
+++ b/barkmanui/src/pages/home.tsx
@@ -1,5 +1,3 @@
-import {Link} from "react-router";
-import Button from "../common/components/Button.tsx";
 import {BarkHeader} from "../common/components/BarkHeader.tsx";
 
 
@@ -9,15 +7,9 @@ function Home() {
     return (
         <>
             <BarkHeader></BarkHeader>
-            <div>
-                <h1 className={"text-brand"}>Home</h1>
-            </div>
             <p>
                 ARFF ARFF BARK BARK
             </p>
-            <Link to="/inventory">
-                <Button>Inventory</Button>
-            </Link>
 
         </>
     )