From 02a6eb492621c39e91eaaa9abde76f2f05cfe4a5 Mon Sep 17 00:00:00 2001 From: Belle Date: Sat, 17 Aug 2024 13:17:19 +0800 Subject: [PATCH] styling --- components/arcade/showcase/my.module.css | 4 +- components/arcade/showcase/project-add.js | 8 +- components/arcade/showcase/project-edit.js | 22 +- components/arcade/showcase/project-view.js | 26 +- .../arcade/showcase/project-view.module.css | 8 +- package.json | 1 + .../showcase/projects/[projectID]/delete.js | 1 + .../showcase/projects/[projectID]/edit.js | 1 + .../showcase/projects/[projectID]/index.js | 3 +- pages/api/arcade/showcase/projects/my.js | 3 +- pages/arcade/showcase/my.js | 330 ++++++++++++++---- .../showcase/project/[projectID]/edit.js | 113 +++++- .../showcase/project/[projectID]/index.js | 118 ++++++- yarn.lock | 65 +++- 14 files changed, 568 insertions(+), 135 deletions(-) diff --git a/components/arcade/showcase/my.module.css b/components/arcade/showcase/my.module.css index 6b7e51c0..f87474c7 100644 --- a/components/arcade/showcase/my.module.css +++ b/components/arcade/showcase/my.module.css @@ -1,5 +1,6 @@ .feed { - width: 100%; + width: 90vw; + max-width: 1200px; overflow-y: auto; overflow-x: hidden; align-self: center; @@ -7,6 +8,7 @@ grid-gap: 0px; background-color: #FAEFD6; padding: 10px; + margin: auto; /* Small screens */ @media (min-width: 640px) { diff --git a/components/arcade/showcase/project-add.js b/components/arcade/showcase/project-add.js index c698c189..d1697b4d 100644 --- a/components/arcade/showcase/project-add.js +++ b/components/arcade/showcase/project-add.js @@ -9,7 +9,7 @@ const ErrorMsg = () =>
There was an error loading your projects.
async function projectAdded(response) { const projectID = response.project - window.location.href = '/arcade/showcase/project/' + projectID + window.location.href = '/arcade/showcase/project/' + projectID + '/edit' } const NewProjectForm = ({authToken}) => { @@ -37,9 +37,13 @@ const NewProjectForm = ({authToken}) => { status={status} labels={{ default: 'Submit repo', - error: 'Something went wrong', + error: 'Something went wrong!', success: 'Pulling repo data' }} + sx={{ + background: status == 'error' ? '#DE4E2B': '#09AFB4', + borderRadius: '10px' + }} /> diff --git a/components/arcade/showcase/project-edit.js b/components/arcade/showcase/project-edit.js index cd3cd52e..5e7d8bbc 100644 --- a/components/arcade/showcase/project-edit.js +++ b/components/arcade/showcase/project-edit.js @@ -4,7 +4,7 @@ import useForm from '../../../lib/use-form' import CohortCard from './cohort-card' import Submit from '../../submit' import { useState } from 'react' - +import Icon from '@hackclub/icons' const ProjectEditForm = ({ project }) => { const [previewProject, setPreviewProject] = useState(project) console.log({previewProject}) @@ -22,14 +22,20 @@ const ProjectEditForm = ({ project }) => { ) console.log() return ( - + + Editing PROJECT NAME +
+ + ) } diff --git a/components/arcade/showcase/project-view.js b/components/arcade/showcase/project-view.js index 00467baf..2c49459f 100644 --- a/components/arcade/showcase/project-view.js +++ b/components/arcade/showcase/project-view.js @@ -1,11 +1,16 @@ import styles from './project-view.module.css' import { Button } from 'theme-ui' +/** @jsxImportSource theme-ui */ -const ProjectView = ({ id, title = "Title Not Found", desc = "Description Not Found", slack = "Slack Not Found", scrapbook = "", playLink, images = [], githubProf, codeLink = ""}) => { - const codeHost = codeLink.includes('github') ? 'View on GitHub' : 'View code link' + +const ProjectView = ({ id, title = "Title Not Found", desc = "Description Not Found", slack = "Slack Not Found", scrapbook = "", playLink, images = [], githubProf, user="User Not Found", codeLink = "", ...props}) => { + const codeHost = codeLink.includes('github') ? 'View on GitHub' : 'View project source' return ( -
-

{title}

+
+
+

{title}

+

By {user}

+
{images.map((image, index) => ( @@ -13,24 +18,25 @@ const ProjectView = ({ id, title = "Title Not Found", desc = "Description Not Fo ))}
-

{desc}

+

{desc}

-
- {playLink && ( +
+ {/* {playLink && ( */} )} + + {/* )} */} +
+ ) + } else { + // Render a countdown + return ( + + First Voting round in {hours > 0 ? `${hours} hours` : ''}{' '} + {minutes > 0 ? `${minutes} minutes` : ''} {seconds} seconds + + ) + } + } + + // Spotlight effect + const spotlightRef = useRef() + useEffect(() => { + const handler = event => { + var rect = document.getElementById('spotlight').getBoundingClientRect() + var x = event.clientX - rect.left //x position within the element. + var y = event.clientY - rect.top //y position within the element. + + spotlightRef.current.style.background = `radial-gradient( + circle at ${x}px ${y}px, + rgba(132, 146, 166, 0) 20px, + rgba(250, 239, 214, 0.9) 120px + )` + } + window.addEventListener('mousemove', handler) + return () => window.removeEventListener('mousemove', handler) + }, []) useEffect(async () => { const token = window.localStorage.getItem('arcade.authToken') const response = await fetch('/api/arcade/showcase/projects/my', { method: 'GET', headers: { - 'Authorization': `Bearer ${token}` + Authorization: `Bearer ${token}` } }).catch(e => { console.error(e) @@ -66,84 +192,134 @@ const my = () => { return } else { setProjects(data.projects) + setName(data.name) setStatus('success') } }, []) return (
-
) } -export default my \ No newline at end of file +export default my diff --git a/pages/arcade/showcase/project/[projectID]/edit.js b/pages/arcade/showcase/project/[projectID]/edit.js index b18120e3..f3146467 100644 --- a/pages/arcade/showcase/project/[projectID]/edit.js +++ b/pages/arcade/showcase/project/[projectID]/edit.js @@ -1,5 +1,33 @@ -import { useState, useEffect } from "react"; -import ProjectEditView from "../../../../../components/arcade/showcase/project-edit"; +import { useState, useEffect, useRef } from 'react' +import { Box } from 'theme-ui' +import ProjectEditView from '../../../../../components/arcade/showcase/project-edit' +/** @jsxImportSource theme-ui */ + +const styled = ` +@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap'); +body, html { + overflow-x: hidden; + } +.slackey { + font-family: "Slackey", sans-serif; + } + .emblema { + font-family: "Emblema One", system-ui; + } + + .gaegu { + font-family: "Gaegu", sans-serif; + } + + body { + background-color: #FAEFD6; + min-height: 100vh; + } + +a { + color: inherit; +} +` const Loading = () =>

Loading...

@@ -9,16 +37,33 @@ export default ({ projectID }) => { const [status, setStatus] = useState('loading') const [project, setProject] = useState(null) + // Spotlight effect + const spotlightRef = useRef() + useEffect(() => { + const handler = event => { + var rect = document.getElementById('spotlight').getBoundingClientRect() + var x = event.clientX - rect.left //x position within the element. + var y = event.clientY - rect.top //y position within the element. + + spotlightRef.current.style.background = `radial-gradient( + circle at ${x}px ${y}px, + rgba(132, 146, 166, 0) 20px, + rgba(250, 239, 214, 0.9) 120px + )` + } + window.addEventListener('mousemove', handler) + return () => window.removeEventListener('mousemove', handler) + }, []) useEffect(() => { const authToken = window.localStorage.getItem('arcade.authToken') fetch(`/api/arcade/showcase/projects/${projectID}`, { method: 'GET', headers: { - 'Authorization': `Bearer ${authToken}` + Authorization: `Bearer ${authToken}` } }) - .then((res) => res.json()) - .then((data) => { + .then(res => res.json()) + .then(data => { setProject(data.project) if (data.error) { throw new Error(data.error) @@ -33,9 +78,59 @@ export default ({ projectID }) => { return ( <> - {status === 'loading' && } - {status === 'error' && } - {status === 'success' && } + + + +
+ {status === 'loading' && } + {status === 'error' && } + {status === 'success' && } +
+ + ) } @@ -43,4 +138,4 @@ export default ({ projectID }) => { export function getServerSideProps(context) { const { projectID } = context.query return { props: { projectID } } -} \ No newline at end of file +} diff --git a/pages/arcade/showcase/project/[projectID]/index.js b/pages/arcade/showcase/project/[projectID]/index.js index ec7777ee..312dcdc7 100644 --- a/pages/arcade/showcase/project/[projectID]/index.js +++ b/pages/arcade/showcase/project/[projectID]/index.js @@ -1,10 +1,37 @@ -import { useEffect, useState } from 'react' +import { useEffect, useState, useRef } from 'react' import ProjectView from '../../../../../components/arcade/showcase/project-view' import Nav from '../../../../../components/Nav' import Footer from '../../../../../components/arcade/Footer' import BGImg from '../../../../../components/background-image' -import background from '../../../../../public/arcade/projectBG.svg' -import styles from '../../../../../components/arcade/showcase/project-view.module.css' +import styles from '../../../components/arcade/showcase/project-view.module.css' +import { Box } from 'theme-ui' +/** @jsxImportSource theme-ui */ + +const styled = ` +@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap'); +body, html { + overflow-x: hidden; + } +.slackey { + font-family: "Slackey", sans-serif; + } + .emblema { + font-family: "Emblema One", system-ui; + } + + .gaegu { + font-family: "Gaegu", sans-serif; + } + + body { + background-color: #FAEFD6; + min-height: 100vh; + } + +a { + color: inherit; +} +` const ProjectShowPage = ({projectID}) => { @@ -15,7 +42,23 @@ const ProjectShowPage = ({projectID}) => { const [project, setProject] = useState([]) const [status, setStatus] = useState('loading') const [errorMsg, setError] = useState(null) - + // Spotlight effect + const spotlightRef = useRef() + useEffect(() => { + const handler = event => { + var rect = document.getElementById('spotlight').getBoundingClientRect() + var x = event.clientX - rect.left //x position within the element. + var y = event.clientY - rect.top //y position within the element. + + spotlightRef.current.style.background = `radial-gradient( + circle at ${x}px ${y}px, + rgba(132, 146, 166, 0) 20px, + rgba(250, 239, 214, 0.9) 120px + )` + } + window.addEventListener('mousemove', handler) + return () => window.removeEventListener('mousemove', handler) + }, []) useEffect(async () => { const token = window.localStorage.getItem('arcade.authToken') const response = await fetch(`/api/arcade/showcase/projects/${projectID}`, { @@ -40,15 +83,46 @@ const ProjectShowPage = ({projectID}) => { }, []) return ( -
-
+ + ) } @@ -81,5 +167,5 @@ export default ProjectShowPage export function getServerSideProps(context) { const { projectID } = context.query - return { props: { projectID } } + return { props: { "hi": 'HI' } } } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 658bc7b7..5787396d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1229,6 +1229,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.10.1", "@babel/runtime@^7.11.1", "@babel/runtime@^7.18.0": + version "7.25.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb" + integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.24.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e" @@ -2055,6 +2062,15 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== +"@rc-component/portal@^1.0.0-8": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@rc-component/portal/-/portal-1.1.2.tgz#55db1e51d784e034442e9700536faaa6ab63fc71" + integrity sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg== + dependencies: + "@babel/runtime" "^7.18.0" + classnames "^2.3.2" + rc-util "^5.24.4" + "@remix-run/router@1.15.3": version "1.15.3" resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.3.tgz#d2509048d69dbb72d5389a14945339f1430b2d3c" @@ -3378,6 +3394,11 @@ classnames@2.2.6: resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== +classnames@^2.2.1, classnames@^2.3.2: + version "2.5.1" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" + integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow== + classnames@^2.2.6: version "2.3.2" resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz" @@ -7417,6 +7438,34 @@ raw-body@2.4.1: iconv-lite "0.4.24" unpipe "1.0.0" +rc-dialog@^9.5.2: + version "9.5.2" + resolved "https://registry.yarnpkg.com/rc-dialog/-/rc-dialog-9.5.2.tgz#4cf7cca23aedb6fd3d9344ea8ffd14daa94ee3a0" + integrity sha512-qVUjc8JukG+j/pNaHVSRa2GO2/KbV2thm7yO4hepQ902eGdYK913sGkwg/fh9yhKYV1ql3BKIN2xnud3rEXAPw== + dependencies: + "@babel/runtime" "^7.10.1" + "@rc-component/portal" "^1.0.0-8" + classnames "^2.2.6" + rc-motion "^2.3.0" + rc-util "^5.21.0" + +rc-motion@^2.3.0: + version "2.9.2" + resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.9.2.tgz#f7c6d480250df8a512d0cfdce07ff3da906958cf" + integrity sha512-fUAhHKLDdkAXIDLH0GYwof3raS58dtNUmzLF2MeiR8o6n4thNpSDQhOqQzWE4WfFZDCi9VEN8n7tiB7czREcyw== + dependencies: + "@babel/runtime" "^7.11.1" + classnames "^2.2.1" + rc-util "^5.43.0" + +rc-util@^5.21.0, rc-util@^5.24.4, rc-util@^5.43.0: + version "5.43.0" + resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.43.0.tgz#bba91fbef2c3e30ea2c236893746f3e9b05ecc4c" + integrity sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw== + dependencies: + "@babel/runtime" "^7.18.3" + react-is "^18.2.0" + react-before-after-slider-component@^1.1.8: version "1.1.8" resolved "https://registry.yarnpkg.com/react-before-after-slider-component/-/react-before-after-slider-component-1.1.8.tgz#3df14381703aaa43428cdac05f271b8b492d25ca" @@ -7472,6 +7521,11 @@ react-is@16.13.1, react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0, react- resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^18.2.0: + version "18.3.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" + integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== + react-konami-code@^2.3.0: version "2.3.0" resolved "https://registry.npmjs.org/react-konami-code/-/react-konami-code-2.3.0.tgz" @@ -8336,16 +8390,7 @@ string-hash@1.1.3: resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A== -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==