GPT-14: Dashboard (Part 1: UI)

src/components/ItemCard.tsx

@@ -0,0 +1,36 @@
+export interface Item {
+    itemImageUrl: string;
+    itemName: string;
+    barcode?: string;
+    description: string;
+    category: string;
+    storeName: string;
+    isDiscount: boolean;
+    itemPrice: number;
+    discountedPrice?: number;
+
+}
+
+const ItemCard: React.FC<{ item: Item }> = ({ item }) => {
+    return (
+        <div className="item-card">
+            <img src={item.itemImageUrl} alt={item.itemName}/>
+            <h2>{item.itemName}</h2>
+            <div className="item-barcode">{item.barcode}</div>
+            <p>{item.description}</p>
+            <div className="item-category-and-store">{item.category} | {item.storeName}</div>
+            <div className="item-price">
+            {item.isDiscount && item.discountedPrice !== undefined ? (
+                <div>
+                <p>${item.discountedPrice}</p>
+                <s>${item.itemPrice}</s>
+                </div> 
+            ) : (
+                <p>${item.itemPrice}</p>
+            )}
+            </div>
+        </div>
+    )
+}
+
+export default ItemCard;

src/index.css

@@ -375,6 +375,67 @@ h1 {
   margin: 1rem 0;
 }
 
+.items-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(345px, 1fr));
+  gap: 1rem;
+  width: 90%;
+}
+
+.item-card {
+  padding: 0.5rem;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  line-height: 0.75;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.item-card h2 {
+  line-height: 1.3;
+  margin-bottom: 0.3rem;
+}
+
+.item-card p {
+  line-height: 1.3;
+  margin-bottom: 0.5rem;
+  font-weight: 300;
+}
+
+.item-card img {
+  width: 100%;
+  height: auto;
+}
+
+.item-barcode {
+  font-size: 0.75rem;
+  font-weight: 250;
+}
+
+.item-category-and-store {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.item-price {
+  margin-bottom: 1.5rem;
+}
+
+.item-price p, .item-price s {
+  display: inline;
+  font-size: 1.25rem;
+  margin-right: 0.5rem;
+  font-weight: bold;
+}
+
+.item-price s {
+  font-weight: 250;
+  font-size: 1.15rem;
+}
+
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/pages/Dashboard.tsx

@@ -1,13 +1,62 @@
 import React from "react"
+import ItemCard from "../components/ItemCard";
 
 const Dashboard: React.FC = () => {
+    const mockItems = [
+    {
+      itemImageUrl: "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/02d73bf0-bd26-47db-8e10-7bf55eaeef3e/NIKE+AVA+ROVER.png",
+      itemName: "Nike Ava Rover",
+      barcode: "1234567890123",
+      description: "description abjaskfdjksadfklaf.",
+      category: "Shoes",
+      storeName: "Store1",
+      isDiscount: true,
+      itemPrice: 120.0,
+      discountedPrice: 90.0,
+    },
+    {
+      itemImageUrl: "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/057c2bbd-d065-44eb-913f-51dd4f98d680/AIR+FORCE+1+%2707.png",
+      itemName: "Nike Air Force 1",
+      barcode: "9876543210987",
+      description: "description 2",
+      category: "Shoes",
+      storeName: "Store 1",
+      isDiscount: false,
+      itemPrice: 180.0,
+    },
+    {
+      itemImageUrl: "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/48675f08-6956-46ce-a6e4-7f44b602b4b4/NIKE+DUNK+LOW+RETRO.png",
+      itemName: "Nike Dunk Low Retro",
+      barcode: "5555555555555",
+      description: "description of a shoe jhskdfhaksdhfkdsafasdfsadf.",
+      category: "Shoes",
+      storeName: "Store 2",
+      isDiscount: true,
+      itemPrice: 20.0,
+      discountedPrice: 15.0,
+    },
+    {
+      itemImageUrl: "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/9303732b-0301-4904-adc1-04e1e9ade540/NIKE+STRUCTURE+26.png",
+      itemName: "This is a long item name for testing",
+      barcode: "5555555555555",
+      description: "description of a shoe, this is a long description for testing 123abcdefghi.",
+      category: "Shoes",
+      storeName: "Store 1",
+      isDiscount: true,
+      itemPrice: 30.0,
+      discountedPrice: 15.0,
+    },
+    ];
+
   return (
     <main className="main">
       <section className="page-container">
         <h1 className="page-title">Dashboard</h1>
-        <p className="page-text">
-          Dashboard
-        </p>
+        <div className="items-grid">
+          {mockItems.map((item) => (
+            <ItemCard key={item.barcode} item={item}/>
+          ))}
+        </div>
       </section>
     </main>
   );