refactor(): recreate component

Co-Authored-By: Cristian C. Giraldo <52677987+imchriistian@users.noreply.github.com>

Author: IvanGodinez21

bun.lock

@@ -11,6 +11,7 @@
     "prisma:migrate": "prisma migrate dev"
   },
   "dependencies": {
+    "@js-temporal/polyfill": "^0.5.1",
     "@prisma/client": "^6.17.1",
     "next": "15.5.6",
     "prisma": "^6.17.1",

package.json

@@ -1,11 +1,12 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { IncidentForm } from "@/components/IncidentForm";
-import { IncidentCard } from "@/components/IncidentCard";
-import { mockIncidents } from "@/lib/mockData";
-import { Incident } from "@/types/incident";
-import { Counter } from "@/components/Counter";
+import { useState } from 'react';
+import { IncidentForm } from '@/components/IncidentForm';
+import { IncidentCard } from '@/components/IncidentCard';
+import { mockIncidents } from '@/lib/mockData';
+import { Incident } from '@/types/incident';
+import { Counter } from '@/components/Counter';
+import { Temporal } from '@js-temporal/polyfill';
 
 export default function HomePage() {
   const [incidents, setIncidents] = useState<Incident[]>(mockIncidents);
@@ -15,21 +16,15 @@ export default function HomePage() {
   };
 
   return (
-    <div className="max-w-2xl mx-auto">
-      <div className="flex justify-center my-6">
-        <Counter />
-      </div>
-
+    <div className='max-w-2xl mx-auto'>
       <IncidentForm onAddIncident={handleAddIncident} />
-      <h2 className="text-lg font-semibold mt-8 mb-4 text-white">
-        Incident History
-      </h2>
-      <div className="space-y-3">
+      <h2 className='text-lg font-semibold mt-8 mb-4 text-white'>Incident History</h2>
+      <div className='space-y-3'>
         {incidents.length === 0 ? (
-          <p className="text-gray-500">No incidents recorded.</p>
+          <p className='text-gray-500'>No incidents recorded.</p>
         ) : (
           incidents.map((incident) => (
-            <IncidentCard key={incident.id} incident={incident} />
+            <Counter key={incident.id} title={incident.title} lastIncidentDate={Temporal.Instant.from(incident.date)} />
           ))
         )}
       </div>

src/app/page.tsx

@@ -1,35 +1,66 @@
-"use client";
+import React, { useEffect, useState } from 'react';
+import { Temporal } from '@js-temporal/polyfill';
+import { timeAgo } from '@/utils/timeAgo';
 
-import { useEffect, useState } from "react";
-
-export function Counter() {
-  const [daysWithoutIncidents, setDaysWithoutIncidents] = useState<number>(0);
+export function Counter({ title, lastIncidentDate }: { title: string; lastIncidentDate: Temporal.Instant }) {
+  const [now, setNow] = useState(() => Temporal.Now.instant());
 
   useEffect(() => {
-    // Only using this to save the date of the last incident in localStorage
-    const lastIncident = localStorage.getItem("lastIncidentDate");
-    if (lastIncident) {
-      const diff =
-        (Date.now() - new Date(lastIncident).getTime()) / (1000 * 60 * 60 * 24);
-      setDaysWithoutIncidents(Math.floor(diff));
-    } else {
-      setDaysWithoutIncidents(0);
-    }
+    const interval = setInterval(() => {
+      setNow(Temporal.Now.instant());
+    }, 1000);
+    return () => clearInterval(interval);
   }, []);
 
-  const variantClass =
-    daysWithoutIncidents === 0
-      ? "bg-red-600 text-white"
-      : daysWithoutIncidents > 10
-      ? "bg-green-600 text-white"
-      : daysWithoutIncidents > 5
-      ? "bg-yellow-400 text-black"
-      : "bg-blue-600 text-white";
+  const relative = timeAgo({ pastDate: lastIncidentDate, targetDate: now });
+  const lastIncidentPlainDate = Temporal.PlainDate.from(lastIncidentDate.toString().slice(0, 10));
+  const todayPlainDate = Temporal.PlainDate.from(now.toString().slice(0, 10));
+  const days = lastIncidentPlainDate.until(todayPlainDate).days;
+  const daysString = Math.max(0, days).toString().padStart(8, '0');
 
   return (
-    <div className={`${variantClass} px-6 py-4 rounded-lg shadow-md text-center w-full max-w-sm`}>
-      <span className="text-xs block">Days without incidents</span>
-      <span className="text-3xl font-bold">{daysWithoutIncidents}</span>
+    <div className='bg-black text-white rounded-lg max-w-3xl w-full shadow-xl divide-y-2 divide-gray-900'>
+      <div className='relative bg-black text-center rounded-t-lg py-3'>
+        <div className='absolute left-4 top-1/2 -translate-y-1/2'>
+          <span className='block w-3.5 h-3.5 rounded-full bg-yellow-400 animate-ping opacity-40 absolute'></span>
+          <span className='block w-3.5 h-3.5 rounded-full bg-yellow-400 relative'></span>
+        </div>
+
+        <span className='opacity-60 mr-2'>Days since</span>
+        <span className='font-bold text-xl'>{title}</span>
+
+        <div className='absolute right-4 top-1/2 -translate-y-1/2'>
+          <span className='block w-3.5 h-3.5 rounded-full bg-yellow-400 animate-ping opacity-40 absolute'></span>
+          <span className='block w-3.5 h-3.5 rounded-full bg-yellow-400 relative'></span>
+        </div>
+      </div>
+
+      <div className='bg-white flex justify-center'>
+        <div className='flex w-full divide-x-2 divide-gray-900'>
+          {daysString.split('').map((digit, index) => (
+            <span
+              key={index}
+              className='bg-white text-black text-6xl font-[DigitalDisplay] leading-none flex items-center justify-center w-16 h-24 flex-1'
+            >
+              {digit}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <div className='bg-yellow-400 rounded-b-lg text-black text-center py-3 px-4 text-base flex'>
+        <div className='flex-3 flex-grow-[3] flex items-center justify-start'>
+          <span className='opacity-60 mr-1'>Last:</span>
+          <span>{relative}</span>
+        </div>
+        <div className='flex-1 flex-grow flex items-center justify-end gap-2'>
+          <button className='bg-black text-yellow-400 px-3 py-1 rounded hover:bg-gray-800 transition'>🗑️</button>
+          <button className='bg-black text-yellow-400 px-3 py-1 rounded hover:bg-gray-800 transition'>🔄</button>
+          <button className='bg-black text-yellow-400 px-3 py-1 rounded hover:bg-gray-800 transition'>↕️</button>
+        </div>
+      </div>
     </div>
   );
 }
+
+export default Counter;

src/components/Counter.tsx

@@ -1,20 +1,19 @@
-import { Incident } from "@/types/incident";
-
+import { Incident } from '@/types/incident';
 interface Props {
   incident: Incident;
 }
 
 export function IncidentCard({ incident }: Props) {
   // Compute a deterministic date in DD-MM-YYYY using the ISO string to avoid hydration differences
-  const isoDate = new Date(incident.date).toISOString().split("T")[0];
-  const [year, month, day] = isoDate.split("-");
+  const isoDate = incident.date.toString().split('T')[0];
+  const [year, month, day] = isoDate.split('-');
   const formattedDate = `${day}-${month}-${year}`;
 
   return (
-    <div className="bg-white p-4 rounded-lg shadow-sm border">
-      <h3 className="font-semibold text-black">{incident.title}</h3>
-      <p className="text-sm text-gray-600 mt-1">{incident.description}</p>
-      <span className="text-xs text-red-600 mt-2 block">{formattedDate}</span>
+    <div className='bg-white p-4 rounded-lg shadow-sm border'>
+      <h3 className='font-semibold text-black'>{incident.title}</h3>
+      <p className='text-sm text-gray-600 mt-1'>{incident.description}</p>
+      <span className='text-xs text-red-600 mt-2 block'>{formattedDate}</span>
     </div>
   );
 }

src/components/IncidentCard.tsx

@@ -1,16 +1,17 @@
-import { Incident } from "@/types/incident";
+import { Incident } from '@/types/incident';
+import { Temporal } from '@js-temporal/polyfill';
 
 export const mockIncidents: Incident[] = [
   {
     id: 1,
-    title: "Main Server Failure",
-    description: "Server stopped responding for 10 minutes.",
-    date: new Date("2025-10-15"),
+    title: 'Main Server Failure',
+    description: 'Server stopped responding for 10 minutes.',
+    date: Temporal.Instant.from('2025-10-24T05:35:00Z'),
   },
   {
     id: 2,
-    title: "Form Validation Error",
-    description: "Email field was not accepting certain valid domains.",
-    date: new Date("2025-10-20"),
+    title: 'Form Validation Error',
+    description: 'Email field was not accepting certain valid domains.',
+    date: Temporal.Instant.from('2025-10-20T00:00:00Z'),
   },
 ];

src/lib/mockData.ts

@@ -1,6 +1,8 @@
+import { Temporal } from '@js-temporal/polyfill';
+
 export interface Incident {
   id: number;
   title: string;
   description: string;
-  date: Date;
+  date: Temporal.Instant;
 }

src/types/incident.ts

@@ -0,0 +1,45 @@
+import { Temporal } from '@js-temporal/polyfill';
+
+export function timeAgo({ pastDate, targetDate }: { pastDate: Temporal.Instant; targetDate: Temporal.Instant }) {
+  targetDate ??= Temporal.Now.instant();
+  const dateDiff = targetDate.since(pastDate, { largestUnit: 'auto' });
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const locale = Intl.DateTimeFormat().resolvedOptions().locale;
+
+  if (dateDiff.months >= 1 || dateDiff.years >= 1) {
+    const date = pastDate.toZonedDateTimeISO(timeZone);
+    return date.toLocaleString(locale, {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      weekday: undefined,
+    });
+  }
+
+  const relativeTimeFormat = new Intl.RelativeTimeFormat(locale, {
+    numeric: 'auto',
+  });
+  const units: [Intl.RelativeTimeFormatUnit, number][] = [
+    ['second', 60],
+    ['minute', 60],
+    ['hour', 24],
+    ['day', 30],
+  ];
+  let delta = (targetDate.epochMilliseconds - pastDate.epochMilliseconds) / 1000;
+
+  for (const [unit, limit] of units) {
+    if (Math.abs(delta) < limit) {
+      return relativeTimeFormat.format(-Math.round(delta), unit);
+    }
+    delta /= limit;
+  }
+
+  const date = pastDate.toZonedDateTimeISO('America/Mexico_City');
+  return date.toLocaleString(locale, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export default timeAgo;