diff --git a/src/components/doe/timer/mainSectionDoe.tsx b/src/components/doe/timer/mainSectionDoe.tsx new file mode 100644 index 0000000..1b89594 --- /dev/null +++ b/src/components/doe/timer/mainSectionDoe.tsx @@ -0,0 +1,56 @@ +import WordCycle from '@/components/mainSection/wordCycle'; +import Clouds from '@/components/mainSection/clouds'; +import styles from '@/styles/doe/mainSection.module.scss'; +// import { faDiscord } from '@fortawesome/free-brands-svg-icons'; +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +const MainSectionDoe = () => ( + <> + +
+
+
+
+

+ + social good +

+
+

+ HackDavis{' '} +

+ May 20-21, 2023 +
+
+ + {/*
+ +
*/} +
+
+
+ +); + +export default MainSectionDoe; diff --git a/src/components/doe/timer/progressBarDoe.tsx b/src/components/doe/timer/progressBarDoe.tsx new file mode 100644 index 0000000..d1afaef --- /dev/null +++ b/src/components/doe/timer/progressBarDoe.tsx @@ -0,0 +1,40 @@ +import { Flag, FlagPole, MiniTruck } from '@/assets/doe'; +import styles from '@/styles/doe/timer/progressBarDOE.module.scss'; +import { useEffect, useState } from 'react'; + +const ProgressBarDoe = () => { + const end = new Date('May 21, 2023, 11:00:00 GMT-0700').getTime(); + const [progress, setProgress] = useState( + Math.max(0, (1 - (end - Date.now()) / (24 * 60 * 60000)) * 100) + ); + + useEffect(() => { + const interval = setInterval(() => { + const now = Date.now(); + const percentDone = Math.max( + 0, + (1 - (end - now) / (24 * 60 * 60000)) * 100 + ); + + setProgress(percentDone); + }, 60000); + + return () => clearInterval(interval); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + <> +
+ +
+ + +
+
+
+ + ); +}; + +export default ProgressBarDoe; diff --git a/src/components/doe/timer/timer.tsx b/src/components/doe/timer/timer.tsx new file mode 100644 index 0000000..c87d98c --- /dev/null +++ b/src/components/doe/timer/timer.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import CountdownTimer, { CountdownRenderProps } from 'react-countdown'; +import styles from '@/styles/doe/timer/timer.module.scss'; +import ProgressBarDoe from './progressBarDoe'; + +const padNumber = (num: number) => (num < 10 ? `0${num}` : num); + +export const CountdownFallback = () => ( +
+ +
+
+
+ 24 + HOURS +
+ : +
+ 00 + MINUTES +
+ : +
+ 00 + SECONDS +
+
+
+
+
+); + +const Countdown = () => { + const start = new Date('May 20, 2023, 11:00:00 GMT-0700'); + const end = new Date('May 21, 2023, 11:00:00 GMT-0700'); + const ongoing = new Date() > start; + + const Timer = ({ hours, minutes, seconds }: CountdownRenderProps) => ( +
+ +
+
+
+ {ongoing ? padNumber(hours) : '24'} + HOURS +
+ : +
+ {ongoing ? padNumber(minutes) : '00'} + MINUTES +
+ : +
+ {ongoing ? padNumber(seconds) : '00'} + SECONDS +
+
+
+
+
+
+ ); + + return ( + + ); +}; + +export default Countdown; diff --git a/src/pages/timer.tsx b/src/pages/timer.tsx new file mode 100644 index 0000000..139e230 --- /dev/null +++ b/src/pages/timer.tsx @@ -0,0 +1,19 @@ +import MainSectionDoe from '@/components/doe/timer/mainSectionDoe'; +import { CountdownFallback } from '@/components/doe/timer/timer'; +import dynamic from 'next/dynamic'; + +const Countdown = dynamic(() => import('@/components/doe/timer/timer'), { + ssr: false, + loading: () => , +}); + +const Timer = () => ( + <> +
+ + +
+ +); + +export default Timer; diff --git a/src/styles/doe/timer/progressBarDOE.module.scss b/src/styles/doe/timer/progressBarDOE.module.scss new file mode 100644 index 0000000..61665d9 --- /dev/null +++ b/src/styles/doe/timer/progressBarDOE.module.scss @@ -0,0 +1,52 @@ +@use "/src/styles/mixins" as *; + +.container { + display: flex; + align-items: flex-end; + justify-content: space-between; + padding: 0 15px; + position: relative; + z-index: 1; + max-width: 380px; + margin: auto; + + > svg { + width: 80px; + height: auto; + position: relative; + + // @include lg { + // width: 121px; + // } + } + +// @include lg { +// max-width: 1180px; +// padding: 0 30px; +// } +} + +.flag { + position: relative; + height: 75px; + +// @include lg { +// height: 114px; +// } + + svg:first-child { + height: 100%; + } + + svg:last-child { + position: absolute; + left: 21.5px; + width: 22.2px; + height: auto; + + // @include lg { + // left: 22px; + // width: 33.76px; + // } + } +} diff --git a/src/styles/doe/timer/timer.module.scss b/src/styles/doe/timer/timer.module.scss new file mode 100644 index 0000000..f7874fc --- /dev/null +++ b/src/styles/doe/timer/timer.module.scss @@ -0,0 +1,89 @@ +@use "/src/styles/mixins" as *; + +.wrapper { + padding: 0 15px; + padding-bottom: 200px; + position: relative; + z-index: 1; + +// @include lg { +// padding: 0 82.12px; +// } +} + +.container { + width: 100%; + max-width: 380px; + background: var(--color-teal-3); + display: flex; + justify-content: center; + margin: auto; + border-radius: 10px; + padding: 18px; + border: 3px solid var(--color-teal-1); + +// @include lg { +// max-width: 1180px; +// border-radius: 20px; +// border-width: 7px; +// padding: 40px; +// } +} + +.clock { + display: flex; + flex-direction: row; + justify-content: space-evenly; + @include cgap(10px); + +// @include lg { +// @include cgap(25px); +// } + + > div { + display: flex; + flex-direction: column; + align-items: center; + } + + span { + @include fontFactory(var(--proxima-nova), 40px, 500, white, 0, 1); + + // @include lg { + // font-size: 90px; + // } + } + + strong { + @include fontFactory(var(--proxima-nova), 12px, 400, var(--color-teal-1), 0.05rem, 1); + margin-top: 5px; + + // @include lg { + // font-size: 20px; + // } + } +} + +.sticks { + width: 90%; + max-width: 320px; + height: 10px; + border-left: solid white 3px; + border-right: solid white 3px; + margin: auto; + +// @include lg { +// height: 50px; +// max-width: 1060px; +// } +} + +.truck { + background-color: white; + border-radius: 20px; + padding: 0 15px; + max-width: 380px; + height: 1000px; + width: 100%; + margin: auto; +}