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

src/App.js

@@ -91,8 +91,12 @@ function App() {
         {/* <VodProductNew /> */}
         {/* <BookDesign /> */}
         {/* <ButtonDesign /> */}
+        {/* <ButtonNewDesign /> */}
         {/* <ProductTags /> */}
+        {/* <HeaderDesign1 /> */}
+        {/* <NewTagDesign /> */}
         {/* <CounterDesign /> */}
+        {/* <Blogs /> */}
         {/* <BlogDesign1 /> */}
         {/* <BlogDesign2 /> */}
         {/* <BlogDesign3 /> */}
@@ -114,7 +118,6 @@ function App() {
         {/* <AdvertisementDesign2 /> */}
         {/* <AdvertisementDesign3 /> */}
         {/* <CourseChapter /> */}
-        {/* <SidebarMenu /> */}
         {/* <SimpleBarChart /> */}
         {/* <SpecifiedDomainRadarChart /> */}
         {/* <Design1 /> */}
@@ -124,46 +127,44 @@ function App() {
         {/* <ReactTable3 /> */}
         {/* <ReactTable4 /> */}
         {/* <ReactTable5 /> */}
-        {/* <Digikala /> */}
+        {/* <SidebarMenu /> */}
         {/* <SidebarDesign2 /> */}
-        {/* <HeaderDesign1 /> */}
+        {/* <SidebarDesign2 className="w-1/5" /> */}
-        {/* <div className="flex">
+        {/* <FileManager /> */}
-          <SidebarDesign2 className="w-1/5" />
+        {/* <GridListTable /> */}
-          <span className="w-4/5 ">
+        {/* <PopupCard /> */}
-            <ReactTable4 />
+        {/* <TimeLine /> */}
-            <FooterDesign1 />
+        {/* <CardTrelloDesign /> */}
-          </span>
+        {/* <ReligiousTimes /> */}
-        </div> */}
+        <NumOfGuestsEmployees />
+        {/* *************************************************** mini components ***************************************************  */}
+        {/* <AnimatedProgressBar /> */}
+        {/* <CircleInCircle /> */}
         {/* <BreadCrumb /> */}
         {/* <SearchBox /> */}
-        {/* <FileManager /> */}
         {/* <TitleSubtitle /> */}
         {/* <Playlist /> */}
         {/* <Folderlists /> */}
-        {/* <Blogs /> */}
         {/* <CardHolder /> */}
         {/* <UploadFile /> */}
         {/* <BarChartApex /> */}
         {/* <OutlineInput /> */}
-        {/* <ButtonNewDesign /> */}
         {/* <CancleIcon /> */}
         {/* <ProfilePicNextToEachOther /> */}
-        {/* <SemiDonut /> */}
-        {/* <FolderTree /> */}
-        {/* <GridListTable /> */}
-        {/* <PopupCard /> */}
-        {/* <TimeLine /> */}
         {/* <TimeLineComponent /> */}
         {/* <SelectYear /> */}
+        {/* <SemiDonut /> */}
+        {/* <FolderTree /> */}
         {/* <IndianaDragScroll /> */}
-        {/* <SidebarDesign2 className="w-1/5" /> */}
+        {/* <div className="flex">
+          <SidebarDesign2 className="w-1/5" />
+          <span className="w-4/5 ">
+            <ReactTable4 />
+            <FooterDesign1 />
+          </span>
+        </div> */}
+        {/* <Digikala /> */}
         {/* <TestComponentNew /> */}
-        {/* <CardTrelloDesign /> */}
-        {/* <AnimatedProgressBar /> */}
-        {/* <CircleInCircle /> */}
-        {/* <NewTagDesign /> */}
-        <ReligiousTimes />
-        <NumOfGuestsEmployees />
       </div>
     </Provider>
   );

src/components/CourseChapter/index.js

@@ -137,35 +137,5 @@ CourseChapter.defaultProps = {
         },
       ],
     },
-    {
-      title: "فصل اول: مباحث جوشش مواد مذاب در مرکز",
-      duration: "2:30:13",
-      lessons: [
-        {
-          title: "آیا گوگل از ما دزدی میکند؟",
-          duration: "14:30",
-          play: "پخش",
-          passed: true,
-        },
-        {
-          title: "چگونگی ساخت نیروگاه های برقی",
-          duration: "22:31",
-          play: "در حال پخش",
-          passed: true,
-        },
-        {
-          title: "آیا از اینترنت می توان درآمد داشت؟",
-          duration: "10:09",
-          play: "نمایش",
-          passed: false,
-        },
-        {
-          title: "زمین سبز و آسمان آبی",
-          duration: "56:09",
-          play: "نمایش",
-          passed: false,
-        },
-      ],
-    },
   ],
 };

src/components/NumOfGuestsEmployees/index.js

@@ -1,42 +1,65 @@
-import React from 'react'
+import React from "react";
 
-const NumOfGuestsEmployees = ({items}) => {
+const NumOfGuestsEmployees = ({ items }) => {
+  console.log(items);
   return (
-    <div className="flex flex-row flex-wrap items-center justify-center bg-white shadow-sm rounded-lg max-w-[280px] w-1/3 mt-10 mr-10 py-2">
+    <div className="mt-20 flex  flex-col items-center gap-y-4 max-w-[400px] mx-auto bg-white shadow-sm rounded-lg p-3">
-        {items.map((item,i) => (
+      {items.map((row, index) => (
-             <div className="flex flex-row">
+        <div
-                 <div className="font-bold text-xs flex flex-col items-center">
+          className={`flex flex-row items-center justify-around w-full border-gray-200 pb-3 ${
-                <p className="text-[#0F0543]">{item.name}</p>
+            index + 1 < items.length ? "border-b" : ""
-                <span className="text-[#2483E1] mt-2">{item.number} نفر</span>
+          }`}
-             </div>
+          key={index}
-             {Number(i) !== items.length -1 && (
+        >
-                <div className="w-0.5 bg-[#9DACD344] mx-3" style={{height: "44px"}}></div>
+          {row.map((item, index) => (
-            )}
+            <div
+              className={`flex flex-col items-center font-bold text-xs border-gray-200 flex-1 ${
+                index + 1 < row.length ? "border-l" : ""
+              }`}
+            >
+              <p className="text-[#0F0543]">{item.name}</p>
+              <span
+                className={` mt-2 ${
+                  item.remaining ? "text-[#E16524]" : "text-[#2483E1]"
+                }`}
+              >
+                {item.number} نفر
+              </span>
             </div>
-        ))}
+          ))}
+        </div>
+      ))}
     </div>
-    )
+  );
-}
+};
 
-export default NumOfGuestsEmployees
+export default NumOfGuestsEmployees;
 
 NumOfGuestsEmployees.defaultProps = {
-    items: [
+  items: [
-        {
+    [
-            name: "تعداد کارمندان محترم",
+      {
-            number: "259",
+        name: "تعداد کارمندان محترم",
-        },
+        number: "259",
-        {
+        remaining: false,
-            name: "تعداد مهمانان محترم",
+      },
-            number: "569",
+      {
-        },
+        name: "تعداد مهمانان محترم",
-        // {
+        number: "569",
-        //     name: "ظرفیت باقیمانده کارمندان محترم",
+        remaining: false,
-        //     number: "5",
+      },
-        // },
+    ],
-        // {
+    [
-        //     name: "ظرفیت باقیمانده مهمانان محترم",
+      {
-        //     number: "6",
+        name: "ظرفیت باقیمانده کارمندان محترم",
-        // },
+        number: "5",
-    ]
+        remaining: true,
-}
+      },
+      {
+        name: "ظرفیت باقیمانده مهمانان محترم",
+        number: "6",
+        remaining: true,
+      },
+    ],
+  ],
+};

src/components/ReligiousTimes/index.js

@@ -1,62 +1,55 @@
-import React from 'react'
+import React from "react";
 
-// const time = {
+const ReligiousTimes = ({ hours }) => {
-//     morningTime: "صبح",
-//     sunriseTime: "طلوع",
-//     noonTime: "ظهر",
-//     sunsetTime: "غروب",
-//     maghribTime: "مغرب",
-//     midnightTime: "نیمه شب",
-// }
-
-const ReligiousTimes = ({hours}) => {
   return (
     <div className="flex flex-row items-center justify-center bg-white shadow-sm rounded-lg max-w-[465px] w-1/3 py-3.5 px-0.5 mt-10 mr-10">
-        {hours.map((hour,index) => (
+      {hours.map((hour, index) => (
-            <div className="flex flex-row items-center" key={index}>
+        <div className="flex flex-row items-center" key={index}>
-                <span className="text-xs text-[#0F0543] font-bold">
+          <span className="text-xs text-[#0F0543] font-bold">
-                    {hour.partOfDay}
+            {hour.partOfDay}
-                </span>
+          </span>
-                <span className="text-xs text-[#2483E1] font-bold mr-1">
+          <span className="text-xs text-[#2483E1] font-bold mr-1">
-                    {hour.time}
+            {hour.time}
-                </span>
+          </span>
-                {Number(index) !== hours.length -1 && (
+          {Number(index) !== hours.length - 1 && (
-                 <div className="w-0.5 bg-[#9DACD344] mx-2" style={{height: "20px"}}></div>
+            <div
-                 )}
+              className="w-0.5 bg-[#9DACD344] mx-2"
-            </div>
+              style={{ height: "20px" }}
-        ))}
+            ></div>
+          )}
+        </div>
+      ))}
     </div>
-    )
+  );
-}
+};
 
-export default ReligiousTimes
+export default ReligiousTimes;
 
 ReligiousTimes.defaultProps = {
-
+  hours: [
-    hours : [
+    {
-        {
+      partOfDay: "صبح",
-            partOfDay: "صبح",
+      time: "5:03",
-            time: "5:03",
+    },
-        },
+    {
-        {
+      partOfDay: "طلوع",
-            partOfDay: "طلوع",
+      time: "6:27",
-            time: "6:27",
+    },
-        },
+    {
-        {
+      partOfDay: "ظهر",
-            partOfDay: "ظهر",
+      time: "12:15",
-            time: "12:15",
+    },
-        },
+    {
-        {
+      partOfDay: "غروب",
-            partOfDay: "غروب",
+      time: "18:05",
-            time: "18:05",
+    },
-        },
+    {
-        {
+      partOfDay: "مغرب",
-            partOfDay: "مغرب",
+      time: "18:23",
-            time: "18:23",
+    },
-        },
+    {
-        {
+      partOfDay: "نیمه شب",
-            partOfDay: "نیمه شب",
+      time: "23:34",
-            time: "23:34",
+    },
-        },
+  ],
-    ]
+};
-}