Update

components/bin/galleryview.js

@@ -1,12 +1,41 @@
 import React from 'react'
 import styles from '../../public/bin/style/gallery.module.css'
+import { useEffect } from 'react';
 
-const BinPost = ({title, desc, slack, link, image}) => {
+
+const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link, images = []}) => {
 
   const handleClick = () => {
     window.open("www.example.com", '_blank', 'noopener,noreferrer');
   };
 
+  async function fetchPosts() {
+    const response = await fetch('https://hackclub.com/api/bin/gallery/posts/');
+    if (!response.ok) {
+        throw new Error('Network response was not ok.');
+    }
+    data = await response.json();
+
+    return data
+  }
+
+
+  useEffect(() => { 1
+    const handleLoad = async (e) => {
+      console.log('Page has loaded');
+
+      const fetchedParts = await fetchPosts()
+    };
+
+    window.addEventListener('load', handleLoad);
+
+    return () => {
+      window.removeEventListener('load', handleLoad);
+    };
+  }, []);
+
+
+
 return (
     <div className={styles.gallery_card} 
       onClick={handleClick}>

components/bin/nav.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Image } from 'theme-ui'
+import styles from '../../public/bin/style/gallery.module.css'
+
+
+const Nav = () => {
+  return (
+    <div className={styles.nav}>
+        <Image
+          src='https://cloud-mt5wqf6f5-hack-club-bot.vercel.app/0rummaging.png'
+          alt='logo'
+          width={120}
+          className={styles.bin_home}
+        />
+    </div>
+  )
+}
+
+export default Nav;

pages/api/bin/gallery/posts.js

@@ -0,0 +1,18 @@
+import AirtablePlus from "airtable-plus"
+
+const fetchPosts = async () => {
+  const airtable = new AirtablePlus({
+    apiKey: process.env.AIRTABLE_API_KEY,
+    baseID: 'appKjALSnOoA0EmPk',
+    tableName: 'Main'
+  })
+
+  const records = await airtable.read()
+  const posts = records.map(record => record.fields)
+  return posts
+}
+
+export default async function handler(req, res) {
+  const data = await fetchPosts()
+  res.status(200).json(data)
+}

pages/bin/gallery.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import BinPost from '../../components/bin/galleryView'
 import styles from '../../public/bin/style/gallery.module.css'
+import Nav from '../../components/bin/nav'
 
 
 function Gallery() {
@@ -8,7 +9,10 @@ function Gallery() {
    return( 
     <section className='page'>
         <div className={styles.background}></div>
+        <script src="https://awdev.codes/utils/hackclub/orph.js"></script>
 
+        <Nav />
+        
         <h1 className={styles.title}>Bin Gallery</h1>
         <p className={styles.sub_title}>A display of all of bin's projects</p>
 

public/bin/selector/script.js

@@ -8,8 +8,6 @@ async function fetchParts() {
     data = await response.json();
 
     data = removeItemByAttribute(data, "type", "Microprocessor");
-    console.log("Fetched parts:");
-    console.log(data)   
     return data
 }
 function removeItemByAttribute(arr, attr, value) {

public/bin/style/gallery.module.css

@@ -104,4 +104,19 @@
     text-align: left;
     color: #a7a7a7;
     margin-bottom: 1rem;
+}
+
+
+.bin_home{
+    display: flex; 
+    margin-top: -40px;
+    margin-left: 200px;
+}
+
+.nav{
+    width: 100%;
+    display: flex;
+    gap: 10px; /* Space between buttons */
+    padding-left: 200px;
+    padding-top: -20px;
 }