Merge pull request #1372 from claynicholson/main

Added Gallery.js

pages/api/bin/wokwi/new/index.js

@@ -43,7 +43,8 @@ const createProject = async (partsList = []) => {
   const ROW_HEIGHT = 215; // close enough for jazz, keypad is too big for this but ¯\_(ツ)_/¯
 
   const parts = [
-    { "type": "board-pi-pico-w", "id": "pico", "top": 0, "left": 0, "attrs": {} }
+    { "type": "board-pi-pico-w", "id": "pico", "top": 0, "left": 0, "attrs": {},
+      "type": "board-pi-pico-w", "id": "pico", "top": 100, "left": 100 , "attrs": {}}
   ]
   let x = 88 + PADDING; // for already included Pico
   let y = 0;
@@ -54,15 +55,17 @@ const createProject = async (partsList = []) => {
     })
     return airPart[0].fields['Wokwi Name'].split(',').forEach((name, i) => {
       const width = airPart[0].fields['Wokwi X-Offset'];
+      const attrs = airPart[0].fields['attrs'];
       if ((x + width + PADDING) > MAX_WIDTH) {
         x = 0;
         y += ROW_HEIGHT;
       }
       parts.push({
         type: name,
-        id: name + '-' + i,
+        id: name + '--' + i,
         left: x,
-        top: y
+        top: y,
+        attrs: attrs
       })
       x += width + PADDING;
     })

pages/bin/gallery.js

@@ -0,0 +1,130 @@
+import React from 'react'
+import BinPost from '../../components/bin/GalleryPosts'
+import styles from '../../public/bin/style/gallery.module.css'
+import Script from 'next/script'
+import Nav from '../../components/bin/nav'
+import Footer from '../../components/footer'
+import PartTag from '../../components/bin/PartTag';
+import { useEffect, useRef, useState } from 'react';
+import { resolve } from 'styled-jsx/css';
+import { set } from 'lodash';
+
+export async function getStaticProps() {
+  const host = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://hackclub.com';
+  const res = await fetch(`${host}/api/bin/gallery/posts/`);
+  const posts = await res.json();
+
+  const filteredPosts = await posts.filter(post => post.status === 'Accepted' && post.parts && !post.hide);
+
+  //Tags
+
+  const resTag = await fetch(`${host}/api/bin/gallery/tags/`);
+  const tags = await resTag.json();
+  
+  const filteredTags = tags.filter(tag => !tag.hide);
+  return {
+    props: { posts: filteredPosts, 
+             tags: filteredTags
+    },
+  };
+}
+
+
+
+function Gallery({ posts = [], tags = [] }) {
+
+  const [allPosts, setAllPosts] = useState([]);
+  const [filterPosts, setFilterPosts] = useState([]);
+  const [filterParts, setFilterParts] = useState([]);
+
+  useEffect(() => {
+    setAllPosts(posts);
+    setFilterParts([]);
+
+  }, []);
+
+  useEffect(() => {
+    setFilterPosts(
+      allPosts.filter(post =>
+        post.parts && filterParts.every(part => post.parts.includes(part))
+      )
+    );
+  }, [filterParts]);
+
+  
+  const addFilter = (partID) => {
+    setFilterParts((prevParts) => {
+      if (!prevParts.includes(partID)) {
+        return [...prevParts, partID];
+      }
+      return prevParts; 
+    });
+
+  };
+  
+  const removeFilter = (partID) => {
+    setFilterParts((prevParts) => {
+      return prevParts.filter(id => id !== partID);
+    });
+  };
+
+  return (
+    <section className='page'>
+
+      <div className={styles.background}></div>
+      <Script src="https://awdev.codes/utils/hackclub/orph.js"></Script>
+
+      
+
+      <div className={styles.header_div}>
+        <Nav />
+        <h1 className={styles.title}>Bin Gallery</h1>
+        <p className={styles.sub_title}>A display of all of bin's projects</p>
+      </div>
+      <div className={styles.text_container}>      <span className={styles.first}>Want to add to the gallery? </span><span className={styles.second} onClick={() => window.location.href = '/bin'}>Create a bin project in wokwi </span><span className={styles.third}>and your project will be added to the gallery!</span><br/>
+      </div>
+      <span className={styles.tag_text}>Search By Tag:</span>
+      <div className={styles.tag_search_container}>
+        
+            {tags.map(tag => {
+                  return (
+                    <PartTag
+                      partID={tag.ID} 
+                      key={tag.ID}
+                      search={true}
+                      addFilter={addFilter}
+                      removeFilter={removeFilter}
+                    />)
+
+                })}
+
+        </div>
+
+      <div className={styles.feed}>
+        
+
+
+          {filterPosts.map(post => {
+            return (
+              <BinPost
+                key={post.ID}
+                id={post.ID}
+                title={post.title}
+                desc={post.desc}
+                slack={post.slack}
+                link={post.link}
+                date={post.created}
+                parts={post.parts}
+              />)
+
+          })}
+        
+      </div>
+      <Footer />
+    </section>
+  )
+}
+
+
+
+export default Gallery

public/bin/index.html

@@ -104,7 +104,14 @@
                 <div class="timeline-info">
                     <em class="muted">in 1 week...</em>
                     <h2>Get it IRL</h2>
-                    <p><a href="https://hack.club/bin-submit" target="_blank">Submit your design to the gallery</a> of
+                    <p><a href="https://hack.club/bin-submit" target="_blank">Submit your design</a> and it will get reviewed.</p>
+                </div>
+            </div>
+            <div class="timeline-item hoverable purplebutton">
+                <div class="timeline-info">
+                    <em class="muted">...Finally</em>
+                    <h2>View on Gallery</h2>
+                    <p><a href="./gallery">See your design on the gallery</a> of
                         projects so other high schoolers can learn from your project.</p>
                 </div>
             </div>
@@ -171,6 +178,12 @@
                     <img src="./icons/arrow_white.svg">
                 </button>
             </div>
+            <div class="blur-box">
+
+                <h1 class="title">Check out other projects on the </h1><button onclick="location.href='./gallery/'" class="gambling-select hoverable purplebutton">
+                    Gallery
+                </button>
+            </div>
 
             <!-- <div class="project-idea-images">
                 <img src="./parts/humidity.png">

public/bin/landing-new/style.css

@@ -525,7 +525,7 @@ button {
 
 .timeline-list {
     margin: auto;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
     height: min-content;
     display: grid;
     gap: 20px;
@@ -563,6 +563,10 @@ button {
     background: linear-gradient(to bottom right, #63CE61, #ADEA00);
 }
 
+.purplebutton {
+    background: linear-gradient(to bottom right, #350491, #311c7c);
+}
+
 .bluebutton {
     background: linear-gradient(to bottom right, #7A97FC, #7AEDFC);
 }
@@ -820,4 +824,28 @@ button {
 
 .project-idea-title {
     text-align: center;
-}
+}
+
+.blur-box {
+    width: 100%;
+    max-width: 600px;
+    background: rgba(140, 15, 151, 0.3);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    padding: 20px;
+    text-align: center;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    margin: 20px auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+  }
+  
+  .title {
+    font-size: 24px;
+    color: #272727;
+    margin-bottom: 20px;
+  }
+