From abec835a262f35e3b42ce0017723777c4f06b92a Mon Sep 17 00:00:00 2001 From: trishnasharma Date: Sat, 20 May 2023 07:51:46 -0700 Subject: [PATCH 1/7] doe timer --- src/pages/timer.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/pages/timer.tsx diff --git a/src/pages/timer.tsx b/src/pages/timer.tsx new file mode 100644 index 0000000..26467ce --- /dev/null +++ b/src/pages/timer.tsx @@ -0,0 +1,11 @@ +import Countdown from '@/components/doe/countdown'; + +const Timer = () => ( + <> +
+ +
+ +); + +export default Timer; From dfc9018ba703f302d9320647d17fc6e93a446be5 Mon Sep 17 00:00:00 2001 From: trishnasharma Date: Sat, 20 May 2023 08:42:58 -0700 Subject: [PATCH 2/7] added main section for doe timer --- src/components/doe/timer/mainSectionDOE.tsx | 56 +++++++++++++ src/components/doe/timer/progressBarDOE.tsx | 40 ++++++++++ src/components/doe/timer/timer.tsx | 46 +++++++++++ src/pages/timer.tsx | 8 +- .../doe/timer/progressBarDOE.module.scss | 52 ++++++++++++ src/styles/doe/timer/timer.module.scss | 79 +++++++++++++++++++ 6 files changed, 278 insertions(+), 3 deletions(-) create mode 100644 src/components/doe/timer/mainSectionDOE.tsx create mode 100644 src/components/doe/timer/progressBarDOE.tsx create mode 100644 src/components/doe/timer/timer.tsx create mode 100644 src/styles/doe/timer/progressBarDOE.module.scss create mode 100644 src/styles/doe/timer/timer.module.scss diff --git a/src/components/doe/timer/mainSectionDOE.tsx b/src/components/doe/timer/mainSectionDOE.tsx new file mode 100644 index 0000000..0c896c3 --- /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 MainSection = () => ( + <> + +
+
+
+
+

+ + social good +

+
+

+ HackDavis{' '} +

+ May 20-21, 2023 +
+
+ + {/* */} +
+
+
+ +); + +export default MainSection; diff --git a/src/components/doe/timer/progressBarDOE.tsx b/src/components/doe/timer/progressBarDOE.tsx new file mode 100644 index 0000000..6128f95 --- /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..ad39d64 --- /dev/null +++ b/src/components/doe/timer/timer.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import CountdownTimer, { CountdownRenderProps } from 'react-countdown'; +import styles from '@/styles/doe/timer/timer.module.scss'; +import ProgressBarDOE from './progressBarDOE'; + +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 ? hours : '24'} + HOURS +
+ : +
+ {ongoing ? minutes : '00'} + MINUTES +
+ : +
+ {ongoing ? seconds : '00'} + SECONDS +
+
+
+
+
+ ); + + return ( + + ); +}; + +export default Countdown; diff --git a/src/pages/timer.tsx b/src/pages/timer.tsx index 26467ce..a8ffb3b 100644 --- a/src/pages/timer.tsx +++ b/src/pages/timer.tsx @@ -1,9 +1,11 @@ -import Countdown from '@/components/doe/countdown'; +import MainSection from '@/components/doe/timer/mainSectionDOE'; +import Countdown from '@/components/doe/timer/timer'; const 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..d004d4c --- /dev/null +++ b/src/styles/doe/timer/timer.module.scss @@ -0,0 +1,79 @@ +@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; +// } +} From 7b5c7c8347e771282facbfac766bdb530146b0dd Mon Sep 17 00:00:00 2001 From: trishnasharma Date: Sat, 20 May 2023 08:56:00 -0700 Subject: [PATCH 3/7] fixed lint --- src/components/doe/timer/mainSectionDOE.tsx | 8 ++++---- src/components/doe/timer/progressBarDOE.tsx | 4 ++-- src/components/doe/timer/timer.tsx | 4 ++-- src/pages/timer.tsx | 6 +++--- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/doe/timer/mainSectionDOE.tsx b/src/components/doe/timer/mainSectionDOE.tsx index 0c896c3..27fd23c 100644 --- a/src/components/doe/timer/mainSectionDOE.tsx +++ b/src/components/doe/timer/mainSectionDOE.tsx @@ -1,10 +1,10 @@ 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'; +// import { faDiscord } from '@fortawesome/free-brands-svg-icons'; +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -const MainSection = () => ( +const MainSectionDoe = () => ( <>
@@ -53,4 +53,4 @@ const MainSection = () => ( ); -export default MainSection; +export default MainSectionDoe; diff --git a/src/components/doe/timer/progressBarDOE.tsx b/src/components/doe/timer/progressBarDOE.tsx index 6128f95..718c214 100644 --- a/src/components/doe/timer/progressBarDOE.tsx +++ b/src/components/doe/timer/progressBarDOE.tsx @@ -2,7 +2,7 @@ import { Flag, FlagPole, MiniTruck } from '@/assets/doe'; import styles from '@/styles/doe/timer/progressBarDOE.module.scss'; import { useEffect, useState } from 'react'; -const ProgressBarDOE = () => { +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) @@ -37,4 +37,4 @@ const ProgressBarDOE = () => { ); }; -export default ProgressBarDOE; +export default ProgressBarDoe; diff --git a/src/components/doe/timer/timer.tsx b/src/components/doe/timer/timer.tsx index ad39d64..da88fc6 100644 --- a/src/components/doe/timer/timer.tsx +++ b/src/components/doe/timer/timer.tsx @@ -1,7 +1,7 @@ import React from 'react'; import CountdownTimer, { CountdownRenderProps } from 'react-countdown'; import styles from '@/styles/doe/timer/timer.module.scss'; -import ProgressBarDOE from './progressBarDOE'; +import ProgressBarDoe from './progressBarDOE'; const Countdown = () => { const start = new Date('May 20, 2023, 11:00:00 GMT-0700'); @@ -10,7 +10,7 @@ const Countdown = () => { const Timer = ({ hours, minutes, seconds }: CountdownRenderProps) => (
- +
diff --git a/src/pages/timer.tsx b/src/pages/timer.tsx index a8ffb3b..da7be46 100644 --- a/src/pages/timer.tsx +++ b/src/pages/timer.tsx @@ -1,11 +1,11 @@ -import MainSection from '@/components/doe/timer/mainSectionDOE'; +import MainSectionDoe from '@/components/doe/timer/mainSectionDoe'; import Countdown from '@/components/doe/timer/timer'; const Timer = () => ( <>
- - + +
); From b84e8c9103458ff072f765be85793f1e09166b6c Mon Sep 17 00:00:00 2001 From: trishnasharma Date: Sat, 20 May 2023 09:14:19 -0700 Subject: [PATCH 4/7] lint fix 2 --- src/pages/timer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/timer.tsx b/src/pages/timer.tsx index da7be46..b530d84 100644 --- a/src/pages/timer.tsx +++ b/src/pages/timer.tsx @@ -1,4 +1,4 @@ -import MainSectionDoe from '@/components/doe/timer/mainSectionDoe'; +import MainSectionDoe from '@/components/doe/timer/mainSectionDOE'; import Countdown from '@/components/doe/timer/timer'; const Timer = () => ( From 5f740e409533691b37dd3b5c7069a3535a954c26 Mon Sep 17 00:00:00 2001 From: Eric Ni Date: Sat, 20 May 2023 09:45:27 -0700 Subject: [PATCH 5/7] fix lint error --- .../doe/timer/{mainSectionDOE.tsx => mainSectionDoe.tsx} | 0 .../doe/timer/{progressBarDOE.tsx => progressBarDoe.tsx} | 0 src/components/doe/timer/timer.tsx | 2 +- src/pages/timer.tsx | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) rename src/components/doe/timer/{mainSectionDOE.tsx => mainSectionDoe.tsx} (100%) rename src/components/doe/timer/{progressBarDOE.tsx => progressBarDoe.tsx} (100%) diff --git a/src/components/doe/timer/mainSectionDOE.tsx b/src/components/doe/timer/mainSectionDoe.tsx similarity index 100% rename from src/components/doe/timer/mainSectionDOE.tsx rename to src/components/doe/timer/mainSectionDoe.tsx diff --git a/src/components/doe/timer/progressBarDOE.tsx b/src/components/doe/timer/progressBarDoe.tsx similarity index 100% rename from src/components/doe/timer/progressBarDOE.tsx rename to src/components/doe/timer/progressBarDoe.tsx diff --git a/src/components/doe/timer/timer.tsx b/src/components/doe/timer/timer.tsx index da88fc6..a2c304f 100644 --- a/src/components/doe/timer/timer.tsx +++ b/src/components/doe/timer/timer.tsx @@ -1,7 +1,7 @@ import React from 'react'; import CountdownTimer, { CountdownRenderProps } from 'react-countdown'; import styles from '@/styles/doe/timer/timer.module.scss'; -import ProgressBarDoe from './progressBarDOE'; +import ProgressBarDoe from './progressBarDoe'; const Countdown = () => { const start = new Date('May 20, 2023, 11:00:00 GMT-0700'); diff --git a/src/pages/timer.tsx b/src/pages/timer.tsx index b530d84..da7be46 100644 --- a/src/pages/timer.tsx +++ b/src/pages/timer.tsx @@ -1,4 +1,4 @@ -import MainSectionDoe from '@/components/doe/timer/mainSectionDOE'; +import MainSectionDoe from '@/components/doe/timer/mainSectionDoe'; import Countdown from '@/components/doe/timer/timer'; const Timer = () => ( From bcf9a23156eeeecb7b6dfd9253ec5cdfdcdb6784 Mon Sep 17 00:00:00 2001 From: Alec Atienza Date: Sat, 20 May 2023 10:25:33 -0700 Subject: [PATCH 6/7] fix hydration issue --- src/components/doe/timer/timer.tsx | 36 ++++++++++++++++++++++++++---- src/pages/timer.tsx | 8 ++++++- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/src/components/doe/timer/timer.tsx b/src/components/doe/timer/timer.tsx index a2c304f..dd061d2 100644 --- a/src/components/doe/timer/timer.tsx +++ b/src/components/doe/timer/timer.tsx @@ -3,6 +3,33 @@ 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'); @@ -14,17 +41,17 @@ const Countdown = () => {
- {ongoing ? hours : '24'} + {ongoing ? padNumber(hours) : '24'} HOURS
:
- {ongoing ? minutes : '00'} + {ongoing ? padNumber(minutes) : '00'} MINUTES
:
- {ongoing ? seconds : '00'} + {ongoing ? padNumber(seconds) : '00'} SECONDS
@@ -36,8 +63,9 @@ const Countdown = () => { return ( ); diff --git a/src/pages/timer.tsx b/src/pages/timer.tsx index da7be46..139e230 100644 --- a/src/pages/timer.tsx +++ b/src/pages/timer.tsx @@ -1,5 +1,11 @@ import MainSectionDoe from '@/components/doe/timer/mainSectionDoe'; -import Countdown from '@/components/doe/timer/timer'; +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 = () => ( <> From 0af4258d814c3d076243321e4c17eb8850586b23 Mon Sep 17 00:00:00 2001 From: Alec Atienza Date: Sat, 20 May 2023 22:52:53 -0700 Subject: [PATCH 7/7] add truck to fill in space --- src/components/doe/timer/mainSectionDoe.tsx | 2 +- src/components/doe/timer/progressBarDoe.tsx | 18 +++++++++--------- src/components/doe/timer/timer.tsx | 1 + src/styles/doe/timer/timer.module.scss | 10 ++++++++++ 4 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/doe/timer/mainSectionDoe.tsx b/src/components/doe/timer/mainSectionDoe.tsx index 27fd23c..1b89594 100644 --- a/src/components/doe/timer/mainSectionDoe.tsx +++ b/src/components/doe/timer/mainSectionDoe.tsx @@ -7,7 +7,7 @@ import styles from '@/styles/doe/mainSection.module.scss'; const MainSectionDoe = () => ( <> -
+
diff --git a/src/components/doe/timer/progressBarDoe.tsx b/src/components/doe/timer/progressBarDoe.tsx index 718c214..d1afaef 100644 --- a/src/components/doe/timer/progressBarDoe.tsx +++ b/src/components/doe/timer/progressBarDoe.tsx @@ -24,16 +24,16 @@ const ProgressBarDoe = () => { }, []); return ( -
- -
- - + <> +
+ +
+ + +
-
+
+ ); }; diff --git a/src/components/doe/timer/timer.tsx b/src/components/doe/timer/timer.tsx index dd061d2..c87d98c 100644 --- a/src/components/doe/timer/timer.tsx +++ b/src/components/doe/timer/timer.tsx @@ -57,6 +57,7 @@ const Countdown = () => {
+
); diff --git a/src/styles/doe/timer/timer.module.scss b/src/styles/doe/timer/timer.module.scss index d004d4c..f7874fc 100644 --- a/src/styles/doe/timer/timer.module.scss +++ b/src/styles/doe/timer/timer.module.scss @@ -77,3 +77,13 @@ // max-width: 1060px; // } } + +.truck { + background-color: white; + border-radius: 20px; + padding: 0 15px; + max-width: 380px; + height: 1000px; + width: 100%; + margin: auto; +}