From b9790f1ef731027f08defb1f1f31fd5102e758ba Mon Sep 17 00:00:00 2001 From: Clay Nicholson Date: Thu, 15 Aug 2024 15:40:55 -0400 Subject: [PATCH] Added gallery --- components/arcade/post.js | 61 +++++++++++++++ components/arcade/post.module.css | 88 ++++++++++++++++++++++ pages/api/arcade/showcase/my.js | 0 pages/arcade/gallery.js | 120 ++++++++++++++++++++++++++++-- 4 files changed, 264 insertions(+), 5 deletions(-) create mode 100644 components/arcade/post.js create mode 100644 components/arcade/post.module.css create mode 100644 pages/api/arcade/showcase/my.js diff --git a/components/arcade/post.js b/components/arcade/post.js new file mode 100644 index 00000000..45d3005e --- /dev/null +++ b/components/arcade/post.js @@ -0,0 +1,61 @@ +import React from 'react' +import styles from './post.module.css' +import { useRef } from 'react'; + + +const Post = ({ id, title, desc, slack, scrapbook, playable, images, githubProf}) => { + const cardRef = useRef(null); + var backgroundImage = `url(https://via.placeholder.com/300x300)`; + + const handleMouseMove = (e) => { + const card = cardRef.current; + const rect = card.getBoundingClientRect(); + const x = e.clientX - rect.left; // x position within the element + const y = e.clientY - rect.top; // y position within the element + + const centerX = rect.width / 3; + const centerY = rect.height / 3; + + const percentX = (x - centerX) / centerX; + const percentY = (y - centerY) / centerY; + + const rotateX = percentY * -2 // Rotate between -15deg to 15deg + const rotateY = percentX * 2; // Rotate between -15deg to 15deg + + card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; + }; + + const handleMouseLeave = () => { + const card = cardRef.current; + card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)'; + }; + + if (images){ + + if (images.length !== 0) { + backgroundImage = `url(${images[0].url})`; + } + } + + + + return ( +
+

+ {title}
+

+
+

{desc}

+
+
+ ) +} + +export default Post \ No newline at end of file diff --git a/components/arcade/post.module.css b/components/arcade/post.module.css new file mode 100644 index 00000000..3cbbe8b0 --- /dev/null +++ b/components/arcade/post.module.css @@ -0,0 +1,88 @@ +.gallery_card{ + flex: 1; + break-inside: avoid; + border-radius: 0.5rem; /* Equivalent to rounded-lg */ + background-color: rgba(158, 158, 158, 1); /* 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 */ + cursor: pointer; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-lg */ + height: fit-content; /* Equivalent to h-fit */ + width: 100%; /* Make the card width responsive within the column */ + margin-bottom: 24px; /* Add space between cards vertically */ + min-height: 300px; + background-image: url("https://img.buzzfeed.com/buzzfeed-static/static/2020-05/21/17/asset/19f3032de0de/sub-buzz-1010-1590082675-7.png"); + position: relative; + background-size: cover; + background-position: center; + overflow: hidden; +} + + +.feed { + min-height: 1000px; + padding-top: 32px; + padding-bottom: 32px; + width: 100%; + overflow-y: auto; + overflow-x: hidden; + align-self: center; + column-gap: 24px; + padding: 24px; + + + @media (min-width: 640px) { + column-count: 1; + } + + /* Medium screens */ + @media (min-width: 768px) { + column-count: 2; + } + + /* Large screens */ + @media (min-width: 1024px) { + column-count: 3; + } +} + +.card_title{ + font-family: 'Trebuchet MS'; + font-size: 1.5rem; + font-weight: 700; + text-align: left; + color: #e1e1e1; + margin-top: 0; + margin-bottom: 1rem; +} + +.overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); /* Transparent initially */ + display: flex; + justify-content: center; + align-items: center; + transition: background-color 0.3s ease; + border-radius: 0.5rem; + padding: 15px; + +} + +.description { + color: white; + font-size: 18px; + opacity: 0; + transition: opacity 0.3s ease; +} + +.gallery_card:hover .overlay { + background-color: rgba(0, 0, 0, 0.6); /* Black overlay with 60% opacity */ +} + +.gallery_card:hover .description { + opacity: 1; +} \ No newline at end of file diff --git a/pages/api/arcade/showcase/my.js b/pages/api/arcade/showcase/my.js new file mode 100644 index 00000000..e69de29b diff --git a/pages/arcade/gallery.js b/pages/arcade/gallery.js index 4963eace..3b58978e 100644 --- a/pages/arcade/gallery.js +++ b/pages/arcade/gallery.js @@ -1,19 +1,129 @@ import React from 'react' import Nav from '../../components/Nav' -import Footer from '../../components/Footer' +import Footer from '../../components/arcade/Footer' import BGImg from '../../components/background-image' -import AssembleImgFile from '../../public/home/assemble.jpg' +import background from '../../public/home/assemble.jpg' +import { Badge, Box, Button, Card, Container, Grid, Heading, Link, Text } from 'theme-ui' +import SlideDown from '../../components/slide-down' +import Post from '../../components/arcade/post' +import styles from '../../components/arcade/post.module.css' + +export async function getStaticProps() { + const host = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://hackclub.com'; + const res = await fetch(`${host}/api/arcade/gallery`); + const posts = await res.json(); + + const filteredPosts = posts; + + return { + props: { posts: filteredPosts, + }, + }; + } -const gallery = () => { +const gallery = ({ posts }) => { + console.log(posts); return (