Merge branch 'main' of github.com:maxphillipsdev/tech-spire-2022

devsoc-unsw · Oct 3, 2022 · 7213e14 · 7213e14
2 parents 819c96a + d1ebc6e
commit 7213e14
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 16 deletions.
diff --git a/components/ShowCounter.js b/components/ShowCounter.js
@@ -1,17 +1,21 @@
-const DateTimeDisplay = ({value, type}) => {
-    return (
-        <>
-            {value} {type}
-        </>        
-    )
-}
+const DateTimeDisplay = ({ value, type }) => {
+  return (
+    <>
+      <text class="font-bold xl:text-8xl">{value}</text>{" "}
+      <text class="xl:text-4xl">{type} </text>
+    </>
+  );
+};
 
 const ShowCounter = ({ days, hours, minutes, seconds }) => {
-    return (
-        <div>
-            <DateTimeDisplay value={days} type={'DAYS'}/> <DateTimeDisplay value={hours} type={'HOURS'}/> <DateTimeDisplay value={minutes} type={'MINUTES'}/> <DateTimeDisplay value={seconds} type={'SECONDS'}/>
-        </div>
-    );
+  return (
+    <div className="bg-green-100">
+      <DateTimeDisplay value={days} type={"DAYS"} />{" "}
+      <DateTimeDisplay value={hours} type={"HOURS"} />{" "}
+      <DateTimeDisplay value={minutes} type={"MINUTES"} />{" "}
+      <DateTimeDisplay value={seconds} type={"SECONDS"} />
+    </div>
+  );
 };
 
-export default ShowCounter;
+export default ShowCounter;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -12,9 +12,18 @@ const Home: NextPage = () => {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="grid h-full place-content-center">
-        <h1 className="animate-bounce text-4xl font-bold">Hello Next.js!</h1>
-        <Countdown targetDate={EVENT_DATE} />
+      <main className="grid h-full grid-cols-7 place-content-center bg-green-100">
+        <div className="col-span-5 grid grid-rows-3 items-center justify-center bg-orange-800 text-center">
+          <div className="row-span-1 bg-orange-100"></div>
+          <div className="row-span-1 flex bg-orange-200">
+            <Countdown targetDate={EVENT_DATE} />
+          </div>
+          <div className="row-span-1 bg-orange-300"></div>
+        </div>
+        <div className="col-span-2 grid grid-rows-3 bg-red-100">
+          <div className="row-span-1"></div>
+          <div className="row-span-1"></div>
+        </div>
       </main>
     </>
   );

diff --git a/public/temp.png b/public/temp.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,6 +8,15 @@ module.exports = {
     fontFamily: {
       sans: ["Inter", "sans-serif"],
     },
+    // fontSize: {
+    //   '1xl': '1rem',
+    //   '2xl': '1.5rem',
+    //   '3xl': '2rem',
+    //   '4xl': '4rem',
+    //   '5xl': '3rem',
+    //   '6xl': '6rem',
+    //   '7xl': '7rem',
+    // }
   },
   plugins: [
     // Typography