Merge pull request #36 from agiledev-students-spring2024/shiwen

Shiwen
agiledev-students-spring2024 · Mar 28, 2024 · dc60ade · dc60ade
2 parents a8ca111 + d064d65
commit dc60ade
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 20 deletions.
diff --git a/front-end/src/App.js b/front-end/src/App.js
@@ -34,7 +34,7 @@ function App() {
         <Route path="/pants" element={<Pants/>} />
         <Route path="/shirt" element={<Shirt/>} />
         <Route path="/shoes" element={<Shoes/>} />
-        <Route path="/ItemDetail" element={<ItemDetail/>} />
+        <Route path="/item-detail/:itemName" element={<ItemDetail/>} />
         <Route path="/OutfitDetail" element={<OutfitDetail/>} />
         <Route path="/Archive" element={<Archive/>} />
         <Route path="/skirts-dresses" element={<SkirtsDresses/>} />

diff --git a/front-end/src/screens/ItemDetail.js b/front-end/src/screens/ItemDetail.js
@@ -1,22 +1,44 @@
 import React from 'react';
-import '../styles/ItemDetail.css'
+import { useParams } from 'react-router-dom';
+import OverlayMenu from '../components/OverlayMenu';
+import '../styles/ItemDetail.css';
 
-function ItemDetail() {
-    return (
-        <div classname="Item Detail">
-            <div className='banner'>
-                <h1>WARDROBE WIZARD</h1>
-                <h3>Item Details</h3>
-                <img src="item_image.jpg" alt="Item Image" />
-                <p> <strong style={{textDecoration: 'underline'}}> Item Detail</strong></p>
-                <p>Brand Name</p>
-                <p>Type</p>
-                <p>Color</p>
-                <p>Notes</p>
-            </div>
+const ItemDetail = () => {
+  let { id } = useParams(); // Use 'id' or 'itemName' based on your URL configuration
+  // Fetch or import your item data here
+  const item = {
+    id,
+    name: 'Example Item',
+    brand: 'Brand A',
+    type: 'Example Type',
+    color: 'Example Color',
+    notes: 'Some notes about the item',
+    imageUrl: '/path/to/your/image.jpg' // This should be the path to the image file
+  };
+
+  return (
+    <div className="item-detail">
+      <OverlayMenu />
+      <header className='ItemDetail-banner'>
+        <h1>WARDROBE WIZARD</h1>
+        <h3>Item Details</h3>
+      </header>
+      <div className="ItemDetail-info">
+        {item.imageUrl && (
+          <div className="ItemDetail-image" style={{ backgroundImage: `url(${item.imageUrl})` }}>
+            {/* If no image is available, this div will show the placeholder */}
+          </div>
+        )}
+        <div className="ItemDetail-info">
+          <h3>{item.name}</h3>
+          <p>Brand: {item.brand}</p>
+          <p>Type: {item.type}</p>
+          <p>Color: {item.color}</p>
+          <p>Notes: {item.notes}</p>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
 export default ItemDetail;
-
diff --git a/front-end/src/screens/Shirts.js b/front-end/src/screens/Shirts.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import '../styles/Shirts.css'; // Make sure this path is correct
+import { Link } from 'react-router-dom'; // Add this import
 import OverlayMenu from '../components/OverlayMenu'; // Import the OverlayMenu component
 
 const Shirt = () => {
@@ -21,14 +22,16 @@ const Shirt = () => {
             </header>
             <div className="Shirt-list">
                 {shirts.map((shirt, index) => (
-                    <div className="Shirt-item" key={index}>
+                    <Link to={`/item-detail/${shirt.name}`} key={index} className="Shirt-item-link">
+                    <div className="Shirt-item">
                         <div className="Shirt-image"></div> {/* Placeholder for the image */}
                         <div className="Shirt-info">
                             <h3>{shirt.name}</h3>
                             <p>{shirt.brand}</p>
                             <p>{shirt.type}</p>
                         </div>
                     </div>
+                    </Link>
                 ))}
             </div>
         </div>

diff --git a/front-end/src/styles/ItemDetail.css b/front-end/src/styles/ItemDetail.css
@@ -21,4 +21,53 @@
     font-family: 'Cormorant Infant', serif;
     font-weight: 300;
 
-}
+}
+
+/* Style for the Item Detail container */
+.ItemDetail-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1rem;
+}
+
+/* Style for the image placeholder within the Item Detail */
+.ItemDetail-image {
+    width: 90%;
+    height: 300px; /* Adjust the height as needed */
+    background-color: #ddd; /* Placeholder color */
+    margin: 1rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Style for the information section within the Item Detail */
+.ItemDetail-info {
+    width: 100%;
+    text-align: left;
+    padding: 0 1rem;
+}
+
+.ItemDetail-info h3, .ItemDetail
+-info p {
+margin: 0.5rem 0;
+font-family: 'Inria Serif', serif;
+}
+
+/* Item name styling */
+.ItemDetail-info h3 {
+font-weight: 700;
+}
+
+/* Item details styling */
+.ItemDetail-info p {
+font-family: "Inter", sans-serif;
+color: #333;
+}
+
+/* Responsive design for smaller screens /
+@media (max-width: 768px) {
+.ItemDetail-container {
+width: 100%; / Use the full width on smaller screens /
+padding: 1rem 0.5rem; / Adjust padding for small screens */
diff --git a/front-end/src/styles/Shirts.css b/front-end/src/styles/Shirts.css
@@ -32,6 +32,7 @@
 
 /* Individual shirt item styling */
 .Shirt-item {
+    cursor: pointer; /* Indicates the item is clickable */
     height: 350px; /* Set a fixed height */
     width: 200px;
     background-color: #f1f1f1;
@@ -44,6 +45,11 @@
     padding: 1rem; /* Add padding */
 }
 
+.Shirt-item-link {
+    text-decoration: none; /* Removes underline from links */
+    color: inherit; /* Keeps text color consistent with the rest of the item */
+}
+
 /* Hover effect for shirt item */
 .Shirt-item:hover {
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);