Adding UX/UI Improvements

cryptphitraining · Jun 27, 2024 · 94f3aa8 · 94f3aa8
1 parent d75fc61
commit 94f3aa8
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 2 deletions.
diff --git a/lotto-ui/ui/components/Countdown.tsx b/lotto-ui/ui/components/Countdown.tsx
@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from "react";
+
+interface CountdownProps {
+  targetDate: string;
+}
+
+const Countdown: React.FC<CountdownProps> = ({ targetDate }) => {
+  const [timeLeft, setTimeLeft] = useState<{ [key: string]: number }>({});
+
+  const calculateTimeLeft = () => {
+    const difference = +new Date(targetDate) - +new Date();
+    let timeLeft: { [key: string]: number } = {};
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    }
+
+    return timeLeft;
+  };
+
+  useEffect(() => {
+    setTimeLeft(calculateTimeLeft());
+
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetDate]);
+
+  const timerComponents: JSX.Element[] = [];
+
+  Object.keys(timeLeft).forEach((interval) => {
+    if (!timeLeft[interval]) {
+      return;
+    }
+
+    timerComponents.push(
+      <span key={interval}>
+        {timeLeft[interval]} {interval}{" "}
+      </span>
+    );
+  });
+
+  return (
+    <div>
+      {timerComponents.length ? timerComponents : <span>Time's up!</span>}
+    </div>
+  );
+};
+
+export default Countdown;
diff --git a/lotto-ui/ui/pages/admin/index.tsx b/lotto-ui/ui/pages/admin/index.tsx
@@ -2,8 +2,23 @@ import DefaultLayout from "@/layouts/default";
 import { title } from "@/components/primitives";
 import React from "react";
 import { Card, CardHeader, Spacer, Input, Button } from "@nextui-org/react";
+import dynamic from "next/dynamic";
+
+// Cargar Countdown dinámicamente para evitar errores de hidratación
+const Countdown = dynamic(() => import("../../components/Countdown"), { ssr: false });
+
+const getNextMonday = (): string => {
+  const today = new Date();
+  const nextMonday = new Date(
+    today.setDate(today.getDate() + ((1 + 7 - today.getDay()) % 7))
+  );
+  nextMonday.setHours(23, 59, 59, 999); // Establecer la hora al final del día
+  return nextMonday.toISOString();
+};
+
 
 export default function AdminPage() {
+  const targetDate = getNextMonday();
   return (
     <DefaultLayout>
       <h1 className={`${title()} text-green-500 pb-2`}>
@@ -23,8 +38,8 @@ export default function AdminPage() {
           <CardHeader className="absolute z-10 top-1 flex-col items-start">
             <h4 className="text-white/90 font-medium text-3xl">Countdown</h4>
           </CardHeader>
-          <div className="text-green-500 text-6xl font-bold">
-            10:00 {/* Aquí puedes sustituir 10:00 por la cuenta regresiva real */}
+          <div className="text-green-500 text-2xl font-bold">
+            <Countdown targetDate={targetDate} />
           </div>
         </Card>
         <Card isBlurred className="w-full h-[200px] col-span-12 sm:col-span-12 relative flex justify-center items-center">

diff --git a/lotto-ui/ui/pages/dashboard/index.tsx b/lotto-ui/ui/pages/dashboard/index.tsx
@@ -2,15 +2,45 @@ import DefaultLayout from "@/layouts/default";
 import { title } from "@/components/primitives";
 import React from "react";
 import { Card, CardHeader, Spacer, Input, Button, Divider } from "@nextui-org/react";
+import dynamic from "next/dynamic";
+
+// Cargar Countdown dinámicamente para evitar errores de hidratación
+const Countdown = dynamic(() => import("../../components/Countdown"), { ssr: false });
+
+const getNextMonday = (): string => {
+  const today = new Date();
+  const nextMonday = new Date(
+    today.setDate(today.getDate() + ((1 + 7 - today.getDay()) % 7))
+  );
+  nextMonday.setHours(23, 59, 59, 999); // Establecer la hora al final del día
+  return nextMonday.toISOString();
+};
 
 export default function DashboardPage() {
+  const targetDate = getNextMonday();
   return (
     <DefaultLayout>
       <h1 className={`${title()} text-green-500 pb-2`}>
         Dashboard
       </h1>
       <Spacer y={12} />
       <div className="w-full gap-2 grid grid-cols-12  px-8">
+      <Card isBlurred className="w-full h-[200px] col-span-12 sm:col-span-6 relative flex justify-center items-center">
+          <CardHeader className="absolute z-10 top-1 flex-col items-start">
+            <h4 className="text-white/90 font-medium text-3xl">Game Week</h4>
+          </CardHeader>
+          <div className="text-green-500 text-6xl font-bold">
+            5 {/* Aquí puedes sustituir 1234 por el ID real */}
+          </div>
+        </Card>
+        <Card isBlurred className="w-full h-[200px] col-span-12 sm:col-span-6 relative flex justify-center items-center">
+          <CardHeader className="absolute z-10 top-1 flex-col items-start">
+            <h4 className="text-white/90 font-medium text-3xl">Countdown</h4>
+          </CardHeader>
+          <div className="text-green-500 text-2xl font-bold">
+            <Countdown targetDate={targetDate} />
+          </div>
+        </Card>
         <Card isBlurred className="w-full h-[200px] col-span-12 sm:col-span-12 relative flex justify-center items-center">
           <CardHeader className="absolute z-10 top-1 flex-col items-start">
             <h4 className="text-white/90 font-medium text-3xl">Lottery Numbers</h4>