From eb3918da5a0f01a5aedfeeb1667fb2966c0fe94a Mon Sep 17 00:00:00 2001
From: lukaswyver <lucas_sin5@hotmail.com>
Date: Sun, 4 Feb 2024 15:11:41 -0300
Subject: [PATCH] feat: add accessibility for datetime on booking-item
 component

---
 app/_components/booking-item.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/_components/booking-item.tsx b/app/_components/booking-item.tsx
index c97b40d..840f1ad 100644
--- a/app/_components/booking-item.tsx
+++ b/app/_components/booking-item.tsx
@@ -82,7 +82,13 @@ const BookingItem = ({ booking }: BookingItemProps) => {
                 })}
               </p>
               <p className="text-2xl">{format(booking.date, "dd")}</p>
-              <p className="text-sm">{format(booking.date, "hh:mm")}</p>
+              <time 
+                className="text-sm"
+                title={format(booking.date, "dd 'de' MMMM 'ás' hh:mm", { locale: ptBR})} 
+                dateTime={booking.date.toISOString()}
+              >
+                {format(booking.date, "hh:mm")}
+              </time>
             </div>
           </CardContent>
         </Card>
@@ -141,7 +147,13 @@ const BookingItem = ({ booking }: BookingItemProps) => {
 
               <div className="flex justify-between">
                 <h3 className="text-gray-400 text-sm">Horário</h3>
-                <h4 className="text-sm">{format(booking.date, "hh:mm")}</h4>
+                <time 
+                  className="text-sm"
+                  title={format(booking.date, "dd 'de' MMMM 'ás' hh:mm", { locale: ptBR})} 
+                  dateTime={booking.date.toISOString()}
+                >
+                  {format(booking.date, "hh:mm")}
+                </time>
               </div>
 
               <div className="flex justify-between">