redid button

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;

barkmanui/src/common/components/Button.tsx

@@ -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

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>
         </>
     )
 }

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>
 
         </>
     )