Merge pull request #33 from sliit-foss/feat/add-countdown

Add Countdown

Author: ThulinaWickramasinghe

apps/2024/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@app/utils": "workspace:*",
+    "@radix-ui/react-separator": "1.1.0",
     "lodash": "4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/2024/src/components/common/separator/index.jsx

@@ -0,0 +1,23 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const Separator = React.forwardRef(({ className, orientation = 'vertical', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={twMerge(
+      'shrink-0 bg-border',
+      'bg-black/10',
+      'mx-4',
+      'lg:mx-7',
+      orientation === 'vertical' ? 'h-100px w-[1px] ' : 'h-[1px] w-full',
+      className
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

apps/2024/src/components/common/typography/body.jsx

@@ -3,7 +3,10 @@ import { twMerge } from 'tailwind-merge';
 const BodyText = ({ children, className, ...props }) => {
   return (
     <span
-      className={twMerge('text-[20px] sm:text-[28px] text-center lg:text-start font-consolas', className)}
+      className={twMerge(
+        'text-[1.25rem] sm:text-[1.75rem] lg:text-[1.5rem] 2xl:text-[1.75rem] text-center lg:text-start font-consolas',
+        className
+      )}
       {...props}>
       {children}
     </span>

apps/2024/src/components/landing/countdown/index.jsx

@@ -0,0 +1,24 @@
+import { Separator } from '@/components/common/separator/index';
+import useCountdown from '@/hooks/countdown';
+import TimeItem from './time-item';
+
+const CountDown = () => {
+  const { days, hours, minutes, seconds } = useCountdown({ targetDate: new Date('September 7, 2024 00:00:00') });
+
+  return (
+    <div className="bg-white text-center rounded-[15px] ">
+      <div className="pt-3 lg:pt-5 font-consolas text-black/70">Registration Ends In...</div>
+      <div className="flex px-6 lg:px-8 pb-4 lg:pb-5 pt-2 font-inter">
+        <TimeItem key={'d'} value={days} unit="DD" />
+        <Separator />
+        <TimeItem key={'h'} value={hours} unit="HH" />
+        <Separator />
+        <TimeItem key={'m'} value={minutes} unit="MM" />
+        <Separator />
+        <TimeItem key={'s'} value={seconds} unit="SS" />
+      </div>
+    </div>
+  );
+};
+
+export default CountDown;

apps/2024/src/components/landing/countdown/time-item.jsx

@@ -0,0 +1,10 @@
+const TimeItem = ({ value, unit }) => {
+  return (
+    <div className="w-14">
+      <div className="font-bold text-2xl lg:text-4xl">{value}</div>
+      <div className="font-light text-black text-xs lg:text-sm lg:mt-2">{unit}</div>
+    </div>
+  );
+};
+
+export default TimeItem;

apps/2024/src/components/landing/hero.jsx

@@ -2,19 +2,21 @@ import { BodyText, Button } from '@/components/common';
 import { registrationLink } from '@/constants';
 import { currentYear, isRegistrationsOpen } from '@/constants/status';
 import { Bashaway } from '@/icons';
+import { CountDown } from '.';
 
 const Hero = () => {
   return (
-    <div className="flex flex-col justify-center items-center gap-y-8 py-4 min-h-[calc(100lvh-70px)]">
-      <Bashaway className="w-[280px] sm:w-[400px] h-[58px] sm:h-[78px]" />
+    <div className="flex flex-col justify-center items-center gap-y-5 lg:gap-y-4 2xl:gap-y-8 min-h-[calc(100lvh-160px)] lg:min-h-[calc(100lvh-70px)]">
+      <Bashaway className="w-[280px] sm:w-[400px] h-[40px] sm:h-[68px] lg:h-[60px] 2xl:h-[70px]" />
       <BodyText className="lg:text-center max-w-5xl px-8">
         A unique competition that keeps the coders around the island on their toes. Welcome to Bashaway {currentYear},
         the third edition of the first-ever scripting and automation competition in Sri Lanka!
       </BodyText>
+      <CountDown />
       <Button
         to={`${registrationLink}`}
         target="_blank"
-        className="mt-2 sm:text-[22px] px-6 py-2 rounded-full tracking-[0.44px]"
+        className="mt-1 sm:text-[22px] px-6 py-2 rounded-full tracking-[0.44px] z-30"
         disabled={!isRegistrationsOpen}>
         {isRegistrationsOpen ? 'Register Now' : 'Registration Closed'}
       </Button>

apps/2024/src/components/landing/index.jsx

@@ -11,3 +11,4 @@ export { default as Rules } from './rules';
 export { default as Sponsors } from './sponsors';
 export { default as Timeline } from './timeline';
 export { default as KnowledgePartners } from './knowledge-partners';
+export { default as CountDown } from './countdown';

apps/2024/src/hooks/countdown.jsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useState } from 'react';
+
+function useCountdown({ targetDate }) {
+  const countDownDate = targetDate.getTime();
+  const [remainingTime, setRemainingTime] = useState(countDownDate - new Date().getTime());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setRemainingTime(countDownDate - new Date().getTime());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [targetDate]);
+
+  const formatTimeUnit = (val) =>
+    Number(val).toLocaleString('en-US', {
+      minimumIntegerDigits: 2
+    });
+
+  const extractUnitVals = (remainingTime) => {
+    const days = formatTimeUnit(Math.floor(remainingTime / (1000 * 60 * 60 * 24)));
+    const hours = formatTimeUnit(Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
+    const minutes = formatTimeUnit(Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)));
+    const seconds = formatTimeUnit(Math.floor((remainingTime % (1000 * 60)) / 1000));
+
+    return {
+      days,
+      hours,
+      minutes,
+      seconds,
+      milliSeconds: remainingTime
+    };
+  };
+
+  return extractUnitVals(remainingTime);
+}
+
+export default useCountdown;

apps/2024/src/pages/landing.jsx

@@ -16,7 +16,7 @@ import {
 
 const Landing = () => {
   return (
-    <div className="flex flex-col">
+    <div>
       <Hero />
       <Marquee />
       <Mission />