update App.js, src/components/NumOfGuestsEmployees/index.js and src/components/ReligiousTimes/index.js

src/App.js

@@ -135,7 +135,7 @@ function App() {
         {/* <PopupCard /> */}
         {/* <TimeLine /> */}
         {/* <CardTrelloDesign /> */}
-        {/* <ReligiousTimes /> */}
+        <ReligiousTimes />
         <NumOfGuestsEmployees />
         {/* *************************************************** mini components ***************************************************  */}
         {/* <AnimatedProgressBar /> */}

src/components/NumOfGuestsEmployees/index.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const NumOfGuestsEmployees = ({ items }) => {
   return (
-    <div className="mt-20 flex flex-col items-center gap-y-4 max-w-[400px] mx-auto bg-white shadow-sm rounded-lg pt-3">
+    <div className="mt-20 flex flex-col items-center gap-y-4 max-w-[465px] mx-auto bg-white shadow-sm rounded-lg pt-3">
       {items.map((row, index) => (
         <div
           className={`flex flex-row items-center justify-around w-full border-[#9DACD344] pb-3 ${
@@ -12,17 +12,17 @@ const NumOfGuestsEmployees = ({ items }) => {
         >
           {row.map((item, index) => (
             <div
-              className={`flex flex-col items-center font-bold text-xs border-[#9DACD344] flex-1 ${
+              className={`flex items-center font-bold text-xs border-[#9DACD344] flex-1 justify-around ${
                 index + 1 < row.length ? "border-l" : ""
-              }`}
+              } ${item?.className || ""}`}
             >
               <p className="text-[#0F0543]">{item.name}</p>
               <span
-                className={` mt-2 ${
+                className={` ${items ? "mt-0" : "mt-2"} ${
                   item.remaining ? "text-[#E16524]" : "text-[#2483E1]"
                 }`}
               >
-                {item.number} نفر
+                {item.number}
               </span>
             </div>
           ))}
@@ -35,30 +35,63 @@ const NumOfGuestsEmployees = ({ items }) => {
 export default NumOfGuestsEmployees;
 
 NumOfGuestsEmployees.defaultProps = {
-  items: [
+  items1: [
     [
       {
         name: "تعداد کارمندان محترم",
-        number: "259",
+        number: "259 نفر",
-        remaining: false,
+        className: "flex-col",
       },
       {
         name: "تعداد مهمانان محترم",
-        number: "569",
+        number: "569 نفر",
         remaining: false,
+        className: "flex-col",
       },
     ],
     [
       {
         name: "ظرفیت باقیمانده کارمندان محترم",
-        number: "5",
+        number: "5 نفر",
         remaining: true,
+        className: "flex-col",
       },
       {
         name: "ظرفیت باقیمانده مهمانان محترم",
-        number: "6",
+        number: "6 نفر",
         remaining: true,
+        className: "flex-col",
+      },
+    ],
+  ],
+  items: [
+    [
+      {
+        name: "صبح",
+        number: "5:03",
+      },
+      {
+        name: "طلوع",
+        number: "6:27",
+      },
+      {
+        name: "ظهر",
+        number: "12:15",
+      },
+      {
+        name: "غروب",
+        number: "18:05",
+      },
+      {
+        name: "مغرب",
+        number: "18:23",
+      },
+      {
+        name: "نیمه شب",
+        number: "18:23",
       },
     ],
   ],
 };
+
+// distributedData

src/components/ReligiousTimes/index.js

@@ -49,7 +49,7 @@ ReligiousTimes.defaultProps = {
     },
     {
       partOfDay: "نیمه شب",
-      time: "23:34",
+      time: "18:23",
     },
   ],
 };