update App.js, src/components/CurrentTime/index.js, src/components/DistributedData/index.js and src/components/UserProfileInfo/index.js

src/App.js

@@ -140,7 +140,7 @@ function App() {
         {/* <PopupCard /> */}
         {/* <TimeLineComponent /> */}
         {/* <CardTrelloDesign /> */}
-        {/* <ReligiousTimes /> */}
+        <ReligiousTimes />
         <DistributedData />
         {/* <CardDesign1 /> */}
         {/* <CardDesign2 /> */}

src/components/DistributedData/index.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const DistributedData = ({ 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-[550px] 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 ${
@@ -16,14 +16,16 @@ const DistributedData = ({ items }) => {
                 index + 1 < row.length ? "border-l" : ""
               } ${item?.className || ""}`}
             >
-              <p className="text-[#0F0543]">{item.name}</p>
+              {item.name && <p className="text-[#0F0543]">{item.name}</p>}
-              <span
+              {item.number && (
-                className={` ${
+                <span
-                  item.remaining ? "text-[#E16524]" : "text-[#2483E1]"
+                  className={` ${
-                }`}
+                    item.remaining ? "text-[#E16524]" : "text-[#2483E1]"
-              >
+                  }`}
-                {item.number}
+                >
-              </span>
+                  {item.number}
+                </span>
+              )}
             </div>
           ))}
         </div>

src/components/UserProfileInfo/index.js

@@ -6,10 +6,27 @@ import DateTime from "../DateTime";
 
 const UserProfileInfo = () => {
   return (
-    <DistributedData
+    <div className="flex flex-row items-center bg-red-50 w-fit">
-      items={[[{ name: <DateTime /> }, { name: <ProfileInfo /> }]]}
+      <DateTime />{" "}
-    />
+      <div
+        className="w-0.5 bg-[#9DACD344] mx-2"
+        style={{ height: "54px" }}
+      ></div>
+      <ProfileInfo />
+    </div>
   );
 };
 
 export default UserProfileInfo;
+
+// <DistributedData
+//   items={[
+//     [
+//       {
+//         name: <DateTime />,
+//         number: null,
+//       },
+//       { name: <ProfileInfo />, number: null },
+//     ],
+//   ]}
+// />