diff --git a/components/bin/GalleryPosts.js b/components/bin/GalleryPosts.js new file mode 100644 index 00000000..bbd14b0b --- /dev/null +++ b/components/bin/GalleryPosts.js @@ -0,0 +1,43 @@ +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 = '', images = [], id}) => { + + 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'); + } + } + +return ( +
+

+ {title}
+

+ +
+ Project Image +
+ +

{desc}

+

{slack ? (slack.startsWith('@') ? (slack) : (`@${slack}`)) : ("")}

+ +
+ ) +} + +export default BinPost; diff --git a/components/bin/footer.js b/components/bin/footer.js new file mode 100644 index 00000000..4750a684 --- /dev/null +++ b/components/bin/footer.js @@ -0,0 +1,189 @@ +import React from 'react' +import styles from './footer.module.css' + + +const Footer = () => { + return ( + + ) +} + +export default Footer \ No newline at end of file diff --git a/components/bin/footer.module.css b/components/bin/footer.module.css new file mode 100644 index 00000000..367cc657 --- /dev/null +++ b/components/bin/footer.module.css @@ -0,0 +1,100 @@ +.footer_div { + background-color: #f9fafc; + padding-top: 64px; + padding-bottom: 64px; + box-sizing: border-box; +} + +.footer_wrapper { + max-width: 1200px; + margin: auto; + padding: 0 32px; + box-sizing: border-box; +} + +.footer_information { + box-sizing: border-box; + margin: 0; + min-width: 0; + padding-bottom: 32px; + box-sizing: border-box; +} + +.footer_information a { + color: inherit; +} + +.footer_information_header { + font-size: 20px; + margin-bottom: 8px; + color: #3c4858; +} + +.footer_information p { + color: #8492a6; + line-height: 1.375; + width: 60%; + margin-bottom: 16px; + text-underline-offset: 5px; +} + +.footer_information p a:hover { + text-decoration-style: wavy; + text-underline-offset: 3px; +} + +.footer_links { + display: grid; + grid-template-columns: repeat(4, 1fr); + color: #8492a6; +} + +.footer_links_column { + display: flex; + flex-direction: column; +} + +.footer_links h2 { + font-size: 24px; + margin-bottom: 16px; +} + +.footer_links a { + color: #8492a6; + font-size: 20px; + margin-bottom: 8px; + text-decoration: none; + display: block; + font-weight: 400; +} + +.footer_links a:hover { + text-decoration: underline; + text-underline-offset: 5px; + color: #3c4858; +} + +.footer_icons_container { + display: grid; + max-width: 192px; + grid-template-columns: repeat(4, 1fr); + align-items: center; + margin-left: -4px; + margin-top: 16px; + margin-bottom: 16px; +} + +.footer_icons_container a { + margin-bottom: 0px; +} + +.footer_tel { + display: block; + font-size: 20px; +} + +.footer_cr_info { + color: #8492a6; + margin-top: 16px; + +} \ No newline at end of file diff --git a/components/bin/galleryview.js b/components/bin/galleryview.js deleted file mode 100644 index ea4a97b6..00000000 --- a/components/bin/galleryview.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' -import styles from '../../public/bin/style/gallery.module.css' - - -const BinPost = ({title = "Bin Post", desc = "Bin Project", slack = '', link, images = []}) => { - - - const handleClick = () => { - window.open("www.example.com", '_blank', 'noopener,noreferrer'); - }; - - - - - -return ( -
-

- {title}
-

-

{desc}

-

{slack}

- -
- ) -} - -export default BinPost; \ No newline at end of file diff --git a/components/bin/nav.js b/components/bin/nav.js index 1d5bce23..7e668b23 100644 --- a/components/bin/nav.js +++ b/components/bin/nav.js @@ -6,12 +6,8 @@ import styles from '../../public/bin/style/gallery.module.css' const Nav = () => { return (
- logo + +
) } diff --git a/pages/bin/gallery.js b/pages/bin/gallery.js index 630d3f55..de9f668b 100644 --- a/pages/bin/gallery.js +++ b/pages/bin/gallery.js @@ -1,48 +1,47 @@ import React from 'react' -import BinPost from '../../components/bin/galleryview' +import BinPost from '../../components/bin/GalleryPosts' import styles from '../../public/bin/style/gallery.module.css' import Nav from '../../components/bin/nav' -import { useEffect, useRef } from 'react'; +import Footer from '../../components/bin/footer' +import { useEffect, useRef, useState } from 'react'; import { resolve } from 'styled-jsx/css'; - - +import { set } from 'lodash'; function Gallery() { - var data = ""; + const [allPosts, setAllPosts] = useState([]); + const [loading, setLoading] = useState(true); - console.log("working"); - async function fetchPosts() { + + const fetchPosts = async () => { try { const response = await fetch('http://hackclub.com/api/bin/gallery/posts/'); - console.log(response); - + if (!response.ok) { throw new Error('Network response was not ok. Status: ' + response.ok); } - - data = await response.json(); + const data = await response.json() console.log(data); - - return data; + console.log(data.filter(post => post.Status === 'Accepted')); + setAllPosts(data.filter(post => post.Status === 'Accepted')); //Filter out rejected or under review as well as hidden posts + console.log('done' + allPosts); } catch (error) { - console.error('Error fetching posts:', error); throw error; + } finally { + // Set loading to false when the async function is done + setLoading(false); + console.log('done' + loading); } } useEffect(() => { console.log('Page has loaded'); - - const posts = fetchPosts() - console.log(posts); - - + fetchPosts() }, []); - - + return(
+
@@ -53,137 +52,24 @@ function Gallery() {
- + {loading ? (
Loading
) : (<>{ + allPosts.map(post => { + {console.log(post)} + return ( + ) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + }) + })}
- +
) } diff --git a/public/bin/selector/script.js b/public/bin/selector/script.js index 5a2944af..ac39bc29 100644 --- a/public/bin/selector/script.js +++ b/public/bin/selector/script.js @@ -149,6 +149,7 @@ window.addEventListener("load", async (e) => { console.log("Page loaded"); recalculateSelected(); const fetchedParts = await partsData() + console.log("fetchedParts", fetchedParts) fetchedParts.forEach(part => { if (!(part.imageUrl == undefined)) { addPartToPage(part) diff --git a/public/bin/style/gallery.module.css b/public/bin/style/gallery.module.css index 8a91c9b7..af8eb5ea 100644 --- a/public/bin/style/gallery.module.css +++ b/public/bin/style/gallery.module.css @@ -5,7 +5,6 @@ flex: 1; break-inside: avoid; border-radius: 0.5rem; /* Equivalent to rounded-lg */ - border: 1px solid #464646; /* Equivalent to border-gray-300 */ background-color: rgba(158, 158, 158, 0.2); /* Equivalent to bg-white/20 */ background-clip: padding-box; /* Equivalent to bg-clip-padding */ padding: 1.5rem 1.5rem 1rem 1.5rem; /* Equivalent to p-6 pb-4 */ @@ -23,6 +22,7 @@ .feed { + min-height: 1000px; padding-top: 32px; padding-bottom: 32px; width: 100%; @@ -31,6 +31,7 @@ align-self: center; column-gap: 24px; padding: 24px; + @media (min-width: 640px) { column-count: 1; @@ -48,7 +49,7 @@ } .title { - font-family: 'Poppins', sans-serif; + font-family: "Phantom Sans"; font-size: 5rem; font-weight: 700; text-align: center; @@ -65,6 +66,7 @@ .sub_title { + font-family: "Phantom Sans"; margin-top: -40px; font-size: 2rem; font-weight: 700; @@ -95,7 +97,7 @@ } .card_title { - font-family: 'Poppins', sans-serif; + font-family: 'Trebuchet MS'; font-size: 1.5rem; font-weight: 700; text-align: left; @@ -105,7 +107,7 @@ } .card_desc { - font-family: sans-serif; + font-family: "Phantom Sans"; text-align: left; color: #a7a7a7; margin-bottom: 1rem; @@ -121,7 +123,71 @@ .nav{ width: 100%; display: flex; - gap: 10px; /* Space between buttons */ padding-left: 200px; padding-top: -20px; -} \ No newline at end of file +} + +.loading { + font-size: 48px; + color: #a7a7a7; /* Change text color as needed */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +.dots::after { + content: '...'; + animation: dots 1.5s infinite; +} + +@keyframes dots { + 0% { + content: '.'; + } + 25% { + content: '..'; + } + 50% { + content: '...'; + } + 75% { + content: '..'; + } + 100% { + content: '.'; + } +} + +.img_container { + width: 100%; /* Adjust the width as needed, e.g., 80% or a fixed width */ + height: 300px; /* Set a specific height or make it responsive */ + overflow: hidden; /* Hide any overflow from the image */ + position: relative; /* Ensure the container can position the image correctly */ +} + +/* Style for the image */ +.img_container img { + width: 100%; /* Ensure the image stretches to fit the container width */ + height: 100%; /* Ensure the image stretches to fit the container height */ + object-fit: cover; /* Maintain aspect ratio and cover the container */ + display: block; /* Remove any default inline spacing */ +} + +.nav_button{ + display: inline-block; + padding: 20px 20px; + background-color: transparent; + border: 1px solid transparent; + font-size: 16px; + font-family: monospace; + text-align: center; + cursor: pointer; + transition: background-color 0.3s, border-color 0.3s; + color: #e1e1e1; +} + +.nav_button:hover { + background-color: rgba(255, 255, 255, 0.1); +}