beginnings of product table

Author: syntapy

app/src/App.tsx

@@ -1,14 +1,12 @@
 import { useState } from 'react'
 import './App.css'
-import ProductRow from "./components/ProductRow/index"
+import ProductTable from "./components/ProductTable/index"
 
 function App() {
   const [count, setCount] = useState(0)
 
   return (
-    <>
-        <ProductRow item="rat food" price={6} />
-    </>
+    <ProductTable />
   )
 }
 

app/src/components/FilterableProductTable/component.tsx

@@ -0,0 +1,9 @@
+interface Prop {
+    category: string
+}
+
+export default function ProductCategoryRow(props: Props) {
+    return (
+        <div>{props.category}</div>
+    )
+}

app/src/components/FilterableProductTable/index.ts

@@ -0,0 +1 @@
+export { default } from "./ProductCategoryRow.tsx"

app/src/components/ProductCategoryRow/ProductCategoryRow.tsx

@@ -1,6 +1,7 @@
 interface Props {
     item: string
     price: number
+    stocked: boolean
 }
 
 export default function ProductRow(props: Props) {

app/src/components/ProductCategoryRow/index.ts

@@ -0,0 +1,11 @@
+import ProductCategoryRow from "../ProductCategoryRow/index"
+import ProductRow from "../ProductRow/index"
+
+export default function ProductTable() {
+    return (
+        <>
+            <ProductCategoryRow category="Vegetables" />
+            <ProductRow item="Lettuce" price={6} stocked={true} />
+        </>
+    )
+}

app/src/components/ProductRow/ProductRow.tsx

@@ -0,0 +1,2 @@
+export { default } from "./ProductTable.tsx"
+