Added a waiting tips component

HackDavis · Nov 7, 2024 · dbceb9f · dbceb9f
1 parent 607d44d
commit dbceb9f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 148 deletions.
diff --git a/app/(pages)/judging-app/_components/JudgingHub/HubHero.module.scss b/app/(pages)/judging-app/_components/JudgingHub/HubHero.module.scss
diff --git a/app/(pages)/judging-app/_components/JudgingHub/HubHero.tsx b/app/(pages)/judging-app/_components/JudgingHub/HubHero.tsx
@@ -1,5 +1,4 @@
 import JudgeInt from '@typeDefs/judge';
-import styles from './HubHero.module.scss';
 import Image from 'next/image';
 import judgeHeroes from '/public/judges/hub/judgingheroes.svg';
 
@@ -15,28 +14,28 @@ export default function HubHero({
   }
 
   return (
-    <div className={styles.container}>
-      <div className={styles.welcome_text}>
-        <div className={styles.name_container}>
-          <h1>Welcome!</h1>
-          <p>
+    <div className="tw-w-full tw-overflow-hidden tw-bg-[#f2f2f7] tw-flex tw-flex-col tw-justify-center tw-gap-4 tw-relative">
+      <div className="tw-px-[5%] tw-pt-[50px] tw-pb-0 tw-flex tw-flex-col tw-gap-2 tw-z-[1]">
+        <div className="tw-w-full tw-flex tw-flex-col tw-text-start">
+          <h1 className="tw-font-bold">Welcome!</h1>
+          <p className="tw-text-[1.5rem]">
             We appreciate you for helping us judge one of California's biggest
             hackathons!
           </p>
         </div>
       </div>
-      <div className={styles.judgecontainer}>
-        <div className={styles.judgingheroes}>
+      <div>
+        <div className="tw-items-center tw-flex tw-justify-center">
           <Image
             src={judgeHeroes}
             alt="Judging Animals"
-            className={styles.bottom_blurb}
+            className="tw-right-0 tw-bottom-0"
           />
         </div>
-        <div className={styles.blurb}>
-          {/* <p className={styles.intro_text}>You're paired with...</p>
+        <div className="tw-w-[45%] tw-flex tw-flex-col tw-gap-4 tw-p-[11px] tw-right-4 tw-top-4 tw-rounded-[var(--b-radius)]">
+          {/* <p className="tw-text-base tw-font-medium">You're paired with...</p>
           {members.map((member: string, index: number) => (
-            <p key={index} className={styles.name}>
+            <p key={index} className="tw-text-[1.75rem] tw-font-semibold">
               {member}
             </p>
           ))} */}

diff --git a/app/(pages)/judging-app/_components/JudgingHub/JudgingHub.tsx b/app/(pages)/judging-app/_components/JudgingHub/JudgingHub.tsx
@@ -3,6 +3,7 @@ import styles from './JudgingHub.module.scss';
 import HubHero from './HubHero';
 import TableLocations from './TableLocations';
 import ViewProjects from './ViewProjects';
+import Waiting from './Waiting';
 import { useJudgeGroup } from '@hooks/useJudgeGroup';
 
 export default function JudgingHub() {
@@ -12,6 +13,7 @@ export default function JudgingHub() {
     <div className={styles.container}>
       <ViewProjects />
       <HubHero user={user} loading={loading} members={members} />
+      <Waiting />
       {/* <JudgingList projects={unjudgedTeams} /> */}
       <TableLocations />
     </div>

diff --git a/app/(pages)/judging-app/_components/JudgingHub/Waiting.tsx b/app/(pages)/judging-app/_components/JudgingHub/Waiting.tsx
@@ -0,0 +1,28 @@
+const tips = [
+  '🔋 Charge your phone!',
+  '👋 Say hi to other judges!',
+  '🍿 Grab a snack and water!',
+];
+
+const TipCard = (tip: string) => {
+  return (
+    <div className="tw-flex tw-text-xl tw-items-center tw-justify-center tw-bg-white tw-rounded-[16px] tw-py-[20px]">
+      {tip}
+    </div>
+  );
+};
+
+export default function Waiting() {
+  return (
+    <div className="tw-flex tw-flex-col tw-p-4  tw-bg-[#f2f2f7] tw-gap-4 tw-py-8">
+      <h3 className="tw-font-bold tw-text-2xl">
+        While you're waiting, feel free to...
+      </h3>
+      <div className="tw-flex tw-flex-col tw-gap-4">
+        {tips.map((tip, index) => (
+          <div key={index}>{TipCard(tip)}</div>
+        ))}
+      </div>
+    </div>
+  );
+}