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,7 +16,8 @@ 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>}
+              {item.number && (
                 <span
                   className={` ${
                     item.remaining ? "text-[#E16524]" : "text-[#2483E1]"
@@ -24,6 +25,7 @@ const DistributedData = ({ items }) => {
                 >
                   {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 },
+//     ],
+//   ]}
+// />