Update

components/bin/GalleryPosts.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import styles from '../../public/bin/style/gallery.module.css'
+import PartTag from './PartTag';
 import { useEffect, useRef, useState } from 'react';
 
 
-const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link = '', id, date}) => {
+const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link = '', id, date, parts}) => {
 
   link = link.trim();
   if (!/^https?:\/\//i.test(link)) {
@@ -38,6 +39,8 @@ const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link = '
     }
   }
 
+  console.log("parts", parts);
+
 return (  
     <div alt={id} className={styles.gallery_card} 
       onClick={handleClick}>
@@ -52,8 +55,17 @@ return (
       <p className={styles.card_desc}>{desc}</p>
       <span>{(slack ? (slack.startsWith('@') ? (slack) : (`@${slack}`)) : (""))+ " "}</span> 
       <span className={styles.date}>{formatDate(date)}</span>
-      
+      <div className={styles.tag_container}>
 
+      {parts && parts.map(part => {
+            return (
+              <PartTag
+              key={part}
+              partID={part}
+              />)
+
+          })}
+      </div>
     </div>
   )
 }

components/bin/PartTag.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import styles from './PartTag.module.css'
+
+const PartTag = ({ partID }) => {
+
+    let backgroundColor = '';
+    let text = '';
+    switch (partID) {
+        case "rectVgu4kWbbaqccc":
+          backgroundColor = 'green';
+          text = 'Button';
+          break;
+        case "rec4vTiJIx4UP8Thl":
+          backgroundColor = 'orange';
+          text = 'Motion';
+          break;
+        case "recALoD1CCKt3CxKE":
+          backgroundColor = 'red';
+          text = 'Buzzer';
+          break;
+        case "recGrj5GpSExI18Ff":
+          backgroundColor = 'blue';
+          text = 'Humidity';
+          break;
+        case "recRzllr0dui91NLd":
+          backgroundColor = 'purple';
+          text = 'LED';
+          break; 
+        case "recry1GsMO6QLakzw":
+          backgroundColor = 'yellow';
+          text = 'Photoresistor';
+          break;
+        case "recPmyV5b8cvaMtTk":
+          backgroundColor = 'pink';
+          text = 'Neopixel LED';
+          break;
+        case "recqffGd1j1jRh56m":
+          backgroundColor = 'brown';
+          text = 'Multicolor LED';
+          break;
+        case "recwSKHd3anpKqNbg":
+          backgroundColor = 'black';
+          text = 'Servo Motor';
+          break;
+        default:
+          backgroundColor = 'gray';
+          text = 'Invalid Tag';
+      }
+  return (
+    <div style={{ backgroundColor}}
+         className={styles.tag}>
+      {text}
+    </div>
+  )
+}
+
+export default PartTag

components/bin/PartTag.module.css

@@ -0,0 +1,13 @@
+.tag{
+    color: white;
+    padding: 4px 10px; 
+    border-radius: 20px; 
+    width: fit-content;
+    max-width: 300px; 
+    display: flex; 
+    text-align: center; 
+    white-space: nowrap; 
+    overflow: hidden;
+    text-overflow: ellipsis;
+;
+}

components/bin/galleryView.js

@@ -1,62 +0,0 @@
-import React from 'react'
-import styles from '../../public/bin/style/gallery.module.css'
-import { useEffect, useRef, useState } from 'react';
-
-
-const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link = '', id, date}) => {
-
-  link = link.trim();
-  if (!/^https?:\/\//i.test(link)) {
-      link = 'https://' + link;
-  }
- const projectID = link.split('/')[4]
- const imgLink = `https://thumbs.wokwi.com/projects/${projectID}/social/bin.png`
-
-
-  function handleClick() {
-    console.log("clicked");
-    if (typeof window !== 'undefined'){
-      const currentHost = window.location.host;
-  
-      window.open(link, '_blank');
-    }
-   }
-
-  function formatDate(dateString) {
-    console.log("date", date)
-    const inputDate = new Date(dateString);
-    const now = new Date();
-    const oneDay = 24 * 60 * 60 * 1000;
-    
-    if (now - inputDate < oneDay) {
-      const hours = inputDate.getHours().toString().padStart(2, '0');
-      const minutes = inputDate.getMinutes().toString().padStart(2, '0');
-      return `Today at ${hours}:${minutes}`;
-    } else {
-
-      const options = { year: 'numeric', month: 'long', day: 'numeric' };
-      return inputDate.toLocaleDateString(undefined, options);
-    }
-  }
-
-return (  
-    <div alt={id} className={styles.gallery_card} 
-      onClick={handleClick}>
-      <h1 className={styles.card_title}>
-        {title}<br/>
-      </h1>
-      
-      <div className={styles.img_container}>
-        <img src={imgLink} alt="Project Image"/>
-      </div>
-     
-      <p className={styles.card_desc}>{desc}</p>
-      <span>{(slack ? (slack.startsWith('@') ? (slack) : (`@${slack}`)) : (""))+ " "}</span> 
-      <span className={styles.date}>{formatDate(date)}</span>
-      
-
-    </div>
-  )
-}
-
-export default BinPost;

pages/bin/gallery.js

@@ -20,6 +20,7 @@ export async function getStaticProps() {
 
 
 function Gallery({ posts = [] }) {
+  console.log(posts);
   
   return (
     <section className='page'>
@@ -45,6 +46,7 @@ function Gallery({ posts = [] }) {
                 slack={post.slack}
                 link={post.link}
                 date={post.created}
+                parts={post.parts}
               />)
 
           })}

public/bin/style/gallery.module.css

@@ -198,4 +198,11 @@
     font-family: Arial, sans-serif; /* Optional: sets the font family */
     margin: 0; /* Optional: removes default margins */
     padding: 0; /* Optional: removes default padding */
+}
+
+.tag_container{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
 }