update ui

Author: tntanvir

.firebase/hosting.ZGlzdA.cache

@@ -2,10 +2,10 @@ vite.png,1732796517246,c7e8b220c2ad5d70459bcbabf1023fbc4d4730c057a55724c48eac987
 tawheed.png,1732796517246,3fd82bed41cf5d587139d4425af07773d30fbaed50f78152c9191f9c9e3a75ce
 favicon.ico,1732796517245,3ef54200b11160280d9ffe3f80fa91c9ba259364d337eaf853bce3ba20698071
 404.png,1732796517241,faa8a7081c307c4aebf4040d58297c35e53bbe36ea1c0672ebb9b16d70ddfb87
-index.html,1740431539454,ef2c9c7da2c031591f2ec198e3a9a938d7f14b63e6752961d625fa61deb97006
-assets/purify.es-zHtM-7sw.js,1740431539454,2a0b4acf81d951ac70b052a34b3a38af17f1560bca447431c5111fb4cc4e5ab5
-assets/index-4F7b09O5.css,1740431539454,d7f5f79f540ac3b8e2c04bd87cc6802e4a167c48e7864fcbf0067f90e80d8c05
-assets/index.es-Fjamt0xJ.js,1740431539454,c8b166fa8ac6134ea83d2ed0a2fbba32c99ad94fa3763d72bc78a428e49c4ff3
-assets/html2canvas.esm-Ry1SfrtC.js,1740431539454,a219c0507678d278f143163b10e84e5cf75d7528e8c58e9df3fc1ec0ab3b71fa
-assets/404-XZo7DFw5.png,1740431539454,faa8a7081c307c4aebf4040d58297c35e53bbe36ea1c0672ebb9b16d70ddfb87
-assets/index-4-tH8fEa.js,1740431539458,dcf4cd37aba71b332896f489e62b368eb334e5840e89bc2fe30ecaf031fd6903
+index.html,1740817357041,6ac81f7d8f91eaa64c511c6f72b2bb99b2ccd53f48e6d9055ee0fb4848c2311f
+assets/purify.es-zHtM-7sw.js,1740817357041,2a0b4acf81d951ac70b052a34b3a38af17f1560bca447431c5111fb4cc4e5ab5
+assets/index-3AApwp-W.css,1740817357041,d5dc9852903b5611ffe40c0f84758ecff2848d276bafde30d9ed20bcc9911603
+assets/index.es-eumWa5Wd.js,1740817357041,4ef1c7c9c1fcb4f98b0a09a695a9583e904d741d2b94271742a5dca5442d80b8
+assets/html2canvas.esm-Ry1SfrtC.js,1740817357041,a219c0507678d278f143163b10e84e5cf75d7528e8c58e9df3fc1ec0ab3b71fa
+assets/404-XZo7DFw5.png,1740817357035,faa8a7081c307c4aebf4040d58297c35e53bbe36ea1c0672ebb9b16d70ddfb87
+assets/index-1nReZN_7.js,1740817357043,d3dea6f80932ae946dcc20717298cf1141a59f35b5336ae6f10ff46d1278c22a

src/component/Hero.jsx

@@ -16,6 +16,7 @@ import {
 import { Typography } from "@material-tailwind/react";
 import { Select } from "@material-tailwind/react";
 import fack from '../fack.json'
+import { Badge } from "@material-tailwind/react";
 
 
 const Hero = () => {
@@ -159,12 +160,14 @@ const Hero = () => {
                     {
                         data.Fajr ?
 
-                            <div className="bg-[#ffffff0e] hover:bg-[#27272a]  rounded-md text-center w-36 h-36 md:w-48 md:h-48   flex justify-center items-center flex-col md:p-3 cursor-pointer">
-                                <h1 className="font-semibold text-2xl ">Fajr</h1>
-                                <h1 className="text-2xl ">0{count(data.Fajr)}</h1>
-                                <CountdownTimer time={count(data.Fajr)} id={1} />
-                                {/* <CountdownTimer time="10:11 AM" /> */}
-                            </div>
+                            <Badge content="Sahuri" className="bg-blue-600/50" placement="top-start">
+                                <div className="bg-[#ffffff0e] hover:bg-[#27272a]  rounded-md text-center w-36 h-36 md:w-48 md:h-48   flex justify-center items-center flex-col md:p-3 cursor-pointer">
+                                    <h1 className="font-semibold text-2xl ">Fajr</h1>
+                                    <h1 className="text-2xl ">0{count(data.Fajr)}</h1>
+                                    <CountdownTimer time={count(data.Fajr)} id={1} />
+                                    {/* <CountdownTimer time="10:11 AM" /> */}
+                                </div>
+                            </Badge >
                             : <div></div>
                     }
                     {
@@ -194,13 +197,14 @@ const Hero = () => {
                     {
                         data.Maghrib ?
 
-                            // console.log(data.Asr)
-                            <div className="bg-[#ffffff0e] hover:bg-[#27272a]  shadow-sm   rounded-md text-center w-36 h-36 md:w-48 md:h-48   flex justify-center items-center flex-col md:p-3 cursor-pointer">
-                                <h1 className="font-semibold text-2xl">Maghrib</h1>
-                                <h1 className="text-2xl "> 0{count(data.Maghrib)}</h1>
-                                <CountdownTimer time={count(data.Maghrib)} id={4} />
+                            <Badge content="Ifter" className="bg-blue-600/50" placement="top-start">
+                                <div className="bg-[#ffffff0e] hover:bg-[#27272a]  shadow-sm   rounded-md text-center w-36 h-36 md:w-48 md:h-48   flex justify-center items-center flex-col md:p-3 cursor-pointer">
+                                    <h1 className="font-semibold text-2xl">Maghrib</h1>
+                                    <h1 className="text-2xl "> 0{count(data.Maghrib)}</h1>
+                                    <CountdownTimer time={count(data.Maghrib)} id={4} />
 
-                            </div>
+                                </div>
+                            </Badge>
                             : <div></div>
                     }
                     {