Merge branch 'enhanced-description' into 'main'

View: Enhanced CombinationGrid layout

See merge request !37

src/components/CombinationGrid/CombinationGrid.css

@@ -68,3 +68,22 @@
     }
   }
   
+
+  .part-type {
+    display: inline-block;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--primary-color);
+    margin-bottom: 0.25rem;
+    background-color: var(--background-light);
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    border: 1px solid var(--primary-light);
+    letter-spacing: 0.5px;
+  }
+  
+  .part-item:hover .part-type {
+    background-color: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+  }
\ No newline at end of file

src/components/CombinationGrid/CombinationGrid.jsx

@@ -11,8 +11,17 @@ const CombinationGrid = ({ combination }) => {
       {combination.map((combo, index) => (
         <div key={index} className="combination-card">
             <img src={combo.image_url} alt={combo.title} className="card-image" />
-          <h2 className="card-title">{combo.title}</h2>
-          <p className="card-description">{combo.description}</p>
+          <h2 className="card-title">
+            <div className="part-type">
+              {combo.partType}
+            </div>
+            <div>
+              {combo.title}
+            </div>
+          </h2>
+          <p className="card-description">
+            {combo.description}
+          </p>
         </div>
       ))}
     </div>

src/pages/SearchCombinationPage/components/CombinationBox.jsx

@@ -10,26 +10,19 @@ const CombinationBox = ({ title, combination }) => {
     const fetchPartDetails = async () => {
       try {
         const details = await Promise.all(
-          combination.partids ?(
           combination.partids.map(async (partId) => {
             const partData = await getPartById(partId);
             return {
               image: partData.image_url,
               title: partData.name,
-              description: partData.description,
+              partType: partData.type,
+              description: partData.description
+                .split('/')
+                .map(item => item.trim())
+                .filter(item => item !== '')
+                .join(' / '),
             };
-          }
-        )):
-        (
-          combination.partIds.map(async (partId) => {
-            const partData = await getPartById(partId);
-            return {
-              image: partData.image_url,
-              title: partData.name,
-              description: partData.description,
-            };
-          }
-        ))
+          })
         );
         setPartDetails(details);
       } catch (error) {