add timezone

app/[userId]/page.tsx

@@ -18,7 +18,7 @@ export default async function Page({ params: { userId } }) {
         <div className="w-full absolute -bottom-20 h-[200px]"></div>
         <div className="bg-caBlurBoxes absolute right-[-100px] top-20 h-[400px] w-[200px] blur-[200px] sm:h-[300px] sm:w-[300px]"></div>
         <WelcomeHero variant="ticket">
-          <div className="mt-10">
+          <div className="my-10">
              <Ticket name={user?.name} avatar={user?.avatar_url} number={user?.count} />
           </div>
         </WelcomeHero>

app/components/Schedule.tsx

@@ -1,44 +1,55 @@
+import { useTimezone } from "@/hooks/useTimezone";
 import { Talk } from "./common/Talk";
+import { Tag } from "./common/Tag";
 
 export const Schedule = () => {
+  const timezone = useTimezone();
   return (
     <section className="w-full mx-auto max-w-sm md:max-w-6xl">
-      <h2 className="text-center font-semibold text-[56px] text-hero mb-20">
+      <h2 className="text-center font-semibold text-[56px] text-hero ">
         Horarios y charlas
       </h2>
+      <span className="flex justify-center my-12 text-sm">
+        <Tag>
+          Zona horaria:{" "}
+          <span className="font-semibold">
+            {timezone}
+          </span>
+        </Tag>
+      </span>
       <div className="flex flex-col gap-16">
         <Talk
           title="Construye tu primer LLM agente con python paso a paso"
           author="Moises Ariza"
-          hour="20.00h"
+          timestamp={1726855200000}
           img="/imgs/speakers/speaker-2.jpg"
           alt="speaker 2 image: Moises Ariza"
         />
         <Talk
           title="Easy Docker: Dockeriza tu Frontend y Deja Atrás a la Competencia"
           author="Santiago/@ksreyr"
-          hour="20.30h"
+          timestamp={1726857000000}
           img="/imgs/speakers/speaker-4.jpeg"
           alt="speaker 4 image: Kevin Santiago Rey Rodriguez"
         />
         <Talk
           title="Mindset de Crecimiento para Programadores: Supera el Síndrome del Impostor y Aumenta tu Productividad"
           author="Karol Neiza"
-          hour="21:30h"
+          timestamp={1726860600000}
           img="/imgs/speakers/speaker-5.png"
           alt="speaker 5 image: Karol Neiza"
         />
         <Talk
           title="Primeros 6 Meses trabajando como Desarrolladora: Lecciones que No Esperaba"
           author="Kao Lo"
-          hour="22.00h"
+          timestamp={1726862400000}
           img="/imgs/speakers/speaker-3.jpg"
           alt="speaker 3 image: Kao Lo"
         />
         <Talk
           title="Top Tips para Deslumbrar en una Entrevista"
           author="Serudda"
-          hour="xx.00h"
+          timestamp={1726864200000}
           img="/imgs/speakers/speaker-1.png"
           alt="speaker 1 image: serudda"
         />

app/components/common/Countdown.tsx

@@ -62,15 +62,21 @@ export const Countdown = ({ className, startFrom }: CountDownProps) => {
   };
 
   return (
-    <div className={cn("mt-10 flex gap-6 md:gap-16", className)}>
-      {time.map(({ key, label }, index) => (
-        <section key={index} className="text-center text-shadow-sm">
-          <span className="font-bold text-3xl xl:text-6xl">
-            {formatNumber(timeLeft[key])}
-          </span>
-          <p className="text-lg xl:text-2xl">{label}</p>
-        </section>
-      ))}
+    <div className="flex flex-col gap-5">
+      <div className={cn("mt-10 flex gap-6 md:gap-16", className)}>
+        {time.map(({ key, label }, index) => (
+          <section key={index} className="text-center text-shadow-sm">
+            <span className="font-bold text-3xl xl:text-6xl">
+              {formatNumber(timeLeft[key])}
+            </span>
+            <p className="text-lg xl:text-2xl">{label}</p>
+          </section>
+        ))}
+
+      </div>
+      <p className="font-semibold">
+        20 de Septiembre de 2024
+      </p>
     </div>
   );
 };

app/components/common/Tag.tsx

@@ -1,10 +1,14 @@
+import { ReactNode } from "react";
+import { cn } from "../utils";
+
 type TagProps = {
-  children: string;
+  children: ReactNode;
+  className?: string;
 };
 
-export const Tag = ({ children }: TagProps) => {
+export const Tag = ({ children, className }: TagProps) => {
   return (
-    <div className="gradiant-tag relative rounded-full bg-gradient-to-br from-caPrimary-500/20 to-caSecondary-500/20 p-2 px-4">
+    <div className={cn("w-fit gradiant-tag relative rounded-full bg-gradient-to-br from-caPrimary-500/20 to-caSecondary-500/20 p-2 px-4", className)}>
       {children}
     </div>
   );

app/components/common/Talk.tsx

@@ -1,15 +1,18 @@
 import Image from "next/image";
 import { Tag } from "./Tag";
+import { useTime } from "@/hooks/useTimezone";
 
 type TalkProps = {
   title: string;
   author: string;
-  hour: string;
+  timestamp: number;
   img: string;
   alt: string;
 };
 
-export const Talk = ({ title, author, hour, img, alt }: TalkProps) => {
+export const Talk = ({ title, author, timestamp, img, alt }: TalkProps) => {
+
+  const datetime = useTime({ timestamp });
   return (
     <article className="grid md:grid-cols-[auto_1fr] lg:grid-cols-[auto_1fr_auto] md:grid-rows-[repeat(2,auto)] lg:grid-rows-1 p-8 w-full gap-8 text-center md:text-left [&>*:last-child]:place-self-center">
       <Image
@@ -27,7 +30,7 @@ export const Talk = ({ title, author, hour, img, alt }: TalkProps) => {
           {author}
         </p>
       </footer>
-      <Tag>{hour}</Tag>
+      <Tag className="min-h-10 min-w-16">{datetime}h</Tag>
     </article>
   );
 };

app/hooks/useTimezone.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react"
+
+export const useTime = ({ timestamp }: { timestamp: number}): string | null => {
+	const [time, setTime] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (!timestamp) return;
+
+		const timeFormatConfig: Intl.DateTimeFormatOptions = {
+			hour: '2-digit',
+			minute: '2-digit',
+			hour12: false,
+		};
+
+		const startAt = new Date(timestamp).toLocaleTimeString([], timeFormatConfig);
+		setTime(startAt);
+	}, [timestamp]);
+
+	return time;
+};
+
+export const useTimezone = (): string | null => {
+	const [timezone, setTimezone] = useState<string | null>(null);
+
+	useEffect(() => {
+		const currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+		setTimezone(currentTimezone);
+	}, []);
+
+	return timezone;
+};