Skip to content

Commit 88e6573

Browse files
syntapysyntapy
authored
Add initial markup (#1)
* add data.json * rm initial markup & styles * got something basic displayed from a component * fix data.json * beginnings of product table
1 parent 7e4de25 commit 88e6573

File tree

13 files changed

+95
-62
lines changed

13 files changed

+95
-62
lines changed

‎app/src/App.css‎

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,3 @@
44
padding: 2rem;
55
text-align: center;
66
}
7-
8-
.logo {
9-
height: 6em;
10-
padding: 1.5em;
11-
will-change: filter;
12-
transition: filter 300ms;
13-
}
14-
.logo:hover {
15-
filter: drop-shadow(0 0 2em #646cffaa);
16-
}
17-
.logo.react:hover {
18-
filter: drop-shadow(0 0 2em #61dafbaa);
19-
}
20-
21-
@keyframes logo-spin {
22-
from {
23-
transform: rotate(0deg);
24-
}
25-
to {
26-
transform: rotate(360deg);
27-
}
28-
}
29-
30-
@media (prefers-reduced-motion: no-preference) {
31-
a:nth-of-type(2) .logo {
32-
animation: logo-spin infinite 20s linear;
33-
}
34-
}
35-
36-
.card {
37-
padding: 2em;
38-
}
39-
40-
.read-the-docs {
41-
color: #888;
42-
}

‎app/src/App.tsx‎

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,12 @@
11
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from './assets/vite.svg'
42
import './App.css'
3+
import ProductTable from "./components/ProductTable/index"
54

65
function App() {
76
const [count, setCount] = useState(0)
87

98
return (
10-
<>
11-
<div>
12-
<a href="https://vite.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
18-
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.tsx</code> and save to test HMR
26-
</p>
27-
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
31-
</>
9+
<ProductTable />
3210
)
3311
}
3412

‎app/src/assets/data.json‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"items":[
3+
{"category": "Fruits", "name": "Apples", "price": 3, "stocked": true },
4+
{"category": "Fruits", "name": "Oranges", "price": 3, "stocked": true },
5+
{"category": "Fruits", "name": "Tangerines", "price": 2, "stocked": true },
6+
{"category": "Fruits", "name": "Dragnfruit", "price": 6, "stocked": true },
7+
{"category": "Fruits", "name": "Pineapple", "price": 5, "stocked": true },
8+
{"category": "Fruits", "name": "Watermelon", "price": 3, "stocked": true },
9+
{"category": "Fruits", "name": "Grapefruit", "price": 5, "stocked": true },
10+
{"category": "Fruits", "name": "Strawberries", "price": 5, "stocked": true },
11+
{"category": "Fruits", "name": "Blueberries", "price": 6, "stocked": true },
12+
{"category": "Fruits", "name": "Raspberries", "price": 5, "stocked": true },
13+
{"category": "Fruits", "name": "Bananas", "price": 4, "stocked": true },
14+
{"category": "Fruits", "name": "Pears", "price": 4, "stocked": true },
15+
{"category": "Fruits", "name": "Kiwis", "price": 5, "stocked": true },
16+
{"category": "Vegetables", "name": "Romaine", "price": 3, "stocked": true },
17+
{"category": "Vegetables", "name": "Broccoli", "price": 4, "stocked": true },
18+
{"category": "Vegetables", "name": "Onion", "price": 2, "stocked": true },
19+
{"category": "Vegetables", "name": "Garlic", "price": 3, "stocked": true },
20+
{"category": "Vegetables", "name": "Cucumbers", "price": 2, "stocked": true },
21+
{"category": "Vegetables", "name": "Red Bell Peppers", "price": 4, "stocked": true },
22+
{"category": "Vegetables", "name": "Orange Bell Peppers", "price": 4, "stocked": true },
23+
{"category": "Vegetables", "name": "Yellow Bell Peppers", "price": 4, "stocked": true },
24+
{"category": "Vegetables", "name": "Green Bell Peppers", "price": 4, "stocked": true },
25+
{"category": "Vegetables", "name": "Tomatoes", "price": 3, "stocked": true },
26+
{"category": "Vegetables", "name": "Radishes", "price": 2, "stocked": true },
27+
{"category": "Vegetables", "name": "Carrots", "price": 2, "stocked": true },
28+
{"category": "Vegetables", "name": "Parsley", "price": 4, "stocked": true },
29+
{"category": "Meats", "name": "Beaf", "price": 6, "stocked": true },
30+
{"category": "Meats", "name": "Chicken", "price": 4, "stocked": true },
31+
{"category": "Meats", "name": "Turkey", "price": 3, "stocked": true },
32+
{"category": "Meats", "name": "Salmon", "price": 7, "stocked": true },
33+
{"category": "Meats", "name": "Pollock", "price": 6, "stocked": true },
34+
{"category": "Meats", "name": "Pork", "price": 4, "stocked": true },
35+
{"category": "Dairy", "name": "Milk", "price": 4, "stocked": true },
36+
{"category": "Dairy", "name": "Eggs", "price": 3, "stocked": true },
37+
{"category": "Dairy", "name": "Yogurt", "price": 4, "stocked": true },
38+
{"category": "Dairy", "name": "Cheese", "price": 3, "stocked": true },
39+
{"category": "Dairy", "name": "Butter", "price": 2, "stocked": true },
40+
{"category": "Beverages", "name": "Coconut Milk", "price": 4, "stocked": true },
41+
{"category": "Beverages", "name": "Almond Milk", "price": 4, "stocked": true },
42+
{"category": "Beverages", "name": "Watermelon Juice", "price": 5, "stocked": true },
43+
{"category": "Beverages", "name": "Blueberry Juice", "price": 4, "stocked": true },
44+
{"category": "Grains", "name": "Bread", "price": 4, "stocked": true },
45+
{"category": "Grains", "name": "Cereal", "price": 4, "stocked": true },
46+
{"category": "Grains", "name": "Oats", "price": 2, "stocked": true },
47+
{"category": "Grains", "name": "Souredough", "price": 3, "stocked": true },
48+
{"category": "Legumes", "name": "Kidney Beans", "price": 2, "stocked": true },
49+
{"category": "Legumes", "name": "Garbanzo Beans", "price": 2, "stocked": true },
50+
{"category": "Legumes", "name": "Lentils", "price": 2, "stocked": true },
51+
{"category": "Legumes", "name": "Pinto Beans", "price": 2, "stocked": true },
52+
{"category": "For Pets", "name": "Rat Food", "price": 8, "stocked": true },
53+
{"category": "Other", "name": "Crocodile Tail", "price": 25, "stocked": true }
54+
]
55+
}

‎app/src/assets/react.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/src/assets/vite.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/src/components/FilterableProductTable/component.tsx‎

Whitespace-only changes.

‎app/src/components/FilterableProductTable/index.ts‎

Whitespace-only changes.

‎app/src/components/ProductCategoryRow/ProductCategoryRow.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
interface Prop {
2+
category: string
3+
}
4+
5+
export default function ProductCategoryRow(props: Props) {
6+
return (
7+
<div>{props.category}</div>
8+
)
9+
}

‎app/src/components/ProductCategoryRow/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./ProductCategoryRow.tsx"

‎app/src/components/ProductRow/ProductRow.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
interface Props {
2+
item: string
3+
price: number
4+
stocked: boolean
5+
}
6+
7+
export default function ProductRow(props: Props) {
8+
return (
9+
<div>
10+
<span>{props.item}</span>
11+
<span>${props.price}</span>
12+
</div>
13+
)
14+
}

0 commit comments

Comments
 (0)