mirror of
https://github.com/System-End/site.git
synced 2026-04-19 16:28:21 +00:00
Added countdown
This commit is contained in:
Clay Nicholson
parent
f3c5d8b8e8
commit
79935dbc91
8 changed files with 114 additions and 30 deletions
|
|
@ -17,8 +17,6 @@ const CohortCard = ({ id, title = "Title Not Found", desc = "Description Not Fou
|
|||
</div>
|
||||
</a>
|
||||
</>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,3 +27,39 @@
|
|||
.title{
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; /* Center the title horizontally */
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.timer_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
margin-left: 16px; /* Space between the title and countdown box */
|
||||
}
|
||||
|
||||
.timer_text {
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
|
@ -62,6 +62,7 @@
|
|||
"pcb-stackup": "^4.2.8",
|
||||
"react": "^17.0.2",
|
||||
"react-before-after-slider-component": "^1.1.8",
|
||||
"react-countdown": "^2.3.6",
|
||||
"react-datepicker": "^4.24.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-horizontal-scrolling-menu": "^6.0.2",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import AirtablePlus from "airtable-plus";
|
||||
import { ensureAuthed } from "../login/test";
|
||||
|
||||
|
||||
export default async function handler(req, res) {
|
||||
const user = await ensureAuthed(req)
|
||||
if (user.error) {
|
||||
|
|
@ -28,7 +29,7 @@ export default async function handler(req, res) {
|
|||
codeLink: p.fields['Code Link'] || '',
|
||||
slackLink: p.fields['Slack Link'] || '',
|
||||
playLink: p.fields['Play Link'] || '',
|
||||
images: p.fields['Screenshot'].map(i => i.url) || [],
|
||||
images: (p.fields['Screenshot'] || []).map(i => i.url),
|
||||
githubProf: p.fields['Github Profile'] || ''
|
||||
}))
|
||||
return res.status(200).json({ project: results[0] })
|
||||
|
|
|
|||
|
|
@ -4,13 +4,15 @@ 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/subtle-stripes.svg'
|
||||
import background from '../../../public/arcade/background-pattern.png'
|
||||
import { Button, Heading, Text } from 'theme-ui'
|
||||
import SlideDown from '../../../components/slide-down'
|
||||
import styles from '../../../components/arcade/showcase/my.module.css'
|
||||
import Countdown from 'react-countdown';
|
||||
|
||||
|
||||
|
||||
const ProjectGallery = ({ projects }) => {
|
||||
console.log("projects", projects);
|
||||
|
||||
return (
|
||||
<div className={styles.feed}>
|
||||
|
|
@ -39,6 +41,8 @@ const my = () => {
|
|||
const [projects, setProjects] = useState([])
|
||||
const [status, setStatus] = useState('loading')
|
||||
const [errorMsg, setError] = useState(null)
|
||||
const launchDate = new Date(2024, 7, 19, 0, 0, 0, 0);
|
||||
|
||||
useEffect(async () => {
|
||||
const token = window.localStorage.getItem('arcade.authToken')
|
||||
const response = await fetch('/api/arcade/showcase/projects/my', {
|
||||
|
|
@ -85,17 +89,24 @@ const my = () => {
|
|||
zIndex: 1
|
||||
}}
|
||||
>
|
||||
<div className={styles.container}>
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
WebkitTextStroke: 'currentColor',
|
||||
WebkitTextStrokeWidth: ['2px', '3px'],
|
||||
WebkitTextFillColor: 'transparent'
|
||||
}}
|
||||
>
|
||||
My Ships
|
||||
</Text>
|
||||
<div className={styles.timer_box}>
|
||||
<p className={styles.timer_text}>First Voting round in</p>
|
||||
<Countdown date={launchDate} className={styles.countdown}/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
WebkitTextStroke: 'currentColor',
|
||||
WebkitTextStrokeWidth: ['2px', '3px'],
|
||||
WebkitTextFillColor: 'transparent'
|
||||
}}
|
||||
>
|
||||
My Ships
|
||||
</Text>
|
||||
<br />
|
||||
<Button
|
||||
as="a"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,19 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import ProjectView from '../../../../../components/arcade/showcase/project-view'
|
||||
import Nav from '../../../../../components/Nav'
|
||||
import Footer from '../../../../../components/arcade/Footer'
|
||||
|
||||
const ProjectShowPage = ({projectID}) => {
|
||||
|
||||
const Loading = () => (<div>Loading...</div>)
|
||||
|
||||
const ErrorMessage = () => (<div>There was an error loading your projects.</div>)
|
||||
|
||||
console.log("projectID", projectID);
|
||||
const [project, setProject] = useState([])
|
||||
const [status, setStatus] = useState('loading')
|
||||
const [errorMsg, setError] = useState(null)
|
||||
|
||||
useEffect(async () => {
|
||||
const token = window.localStorage.getItem('arcade.authToken')
|
||||
const response = await fetch(`/api/arcade/showcase/projects/${projectID}`, {
|
||||
|
|
@ -22,25 +31,38 @@ const ProjectShowPage = ({projectID}) => {
|
|||
setStatus('error')
|
||||
return
|
||||
} else {
|
||||
setProject(data.projects)
|
||||
setProject(data.project)
|
||||
setStatus('success')
|
||||
}
|
||||
console.log("project", project);
|
||||
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProjectView
|
||||
key={project.id}
|
||||
id={project.id}
|
||||
title={project.title}
|
||||
desc={project.desc}
|
||||
slack={project.slackLink}
|
||||
codeLink={project.codeLink}
|
||||
playLink={project.playLink}
|
||||
images={project.images}
|
||||
githubProf={project.githubProf}
|
||||
/>
|
||||
<Nav />
|
||||
{
|
||||
status == 'loading' && <Loading />
|
||||
}
|
||||
|
||||
{
|
||||
status == 'error' && <ErrorMessage />
|
||||
}
|
||||
|
||||
{
|
||||
status == 'success' &&
|
||||
<ProjectView
|
||||
key={project.id}
|
||||
id={project.id}
|
||||
title={project.title}
|
||||
desc={project.desc}
|
||||
slack={project.slackLink}
|
||||
codeLink={project.codeLink}
|
||||
playLink={project.playLink}
|
||||
images={project.images}
|
||||
githubProf={project.githubProf}
|
||||
/>
|
||||
}
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -55,7 +77,6 @@ export async function getStaticPaths() {
|
|||
}
|
||||
export async function getStaticProps({params}) {
|
||||
const { projectID } = params
|
||||
console.log({ params })
|
||||
|
||||
return { props: { projectID } }
|
||||
}
|
||||
|
|
|
|||
BIN
public/arcade/background-pattern.png
Normal file
BIN
public/arcade/background-pattern.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
18
yarn.lock
18
yarn.lock
|
|
@ -7422,6 +7422,13 @@ react-before-after-slider-component@^1.1.8:
|
|||
resolved "https://registry.yarnpkg.com/react-before-after-slider-component/-/react-before-after-slider-component-1.1.8.tgz#3df14381703aaa43428cdac05f271b8b492d25ca"
|
||||
integrity sha512-KcY231f68+7bF0Zkfat55jvgNSSCB5TkBtm1HhLeb336jtQ0hYKkdq6VwrleNrfeVdUD2v+E7DzgNJYc6dsY3Q==
|
||||
|
||||
react-countdown@^2.3.6:
|
||||
version "2.3.6"
|
||||
resolved "https://registry.yarnpkg.com/react-countdown/-/react-countdown-2.3.6.tgz#26699ea87e548bd7c981281e5a8fd8b511f774ff"
|
||||
integrity sha512-ZfX6S08Hb6x6W6eCn1hMDvxPICI/T30fd+gaeVTCR/2cGZ2WJ3f26e4ImNIMX1fHkopJrUdnRpWXP13/D39+gg==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
|
||||
react-datepicker@^4.24.0:
|
||||
version "4.24.0"
|
||||
resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.24.0.tgz#dfb12e277993f1ae2d350b7ba4dd6bba7d21bfb1"
|
||||
|
|
@ -8329,7 +8336,16 @@ 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", string-width@^4.1.0:
|
||||
"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:
|
||||
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==
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue