update App.js, src/components/ProfileInfo/index.js and src/components/UserProfileInfo/index.js

src/App.js

@@ -89,6 +89,8 @@ import DateRangePicker from "./components/DateRangePicker";
 import BoxNextToEachOther from "./components/BoxNextToEachOther";
 import ProfileInfo from "./components/ProfileInfo";
 import UserProfileInfo from "./components/UserProfileInfo";
+import CurrentTime from "./components/CurrentTime";
+import CurrentDateShamsi from "./components/CurrentDateShamsi";
 
 function App() {
   return (
@@ -178,6 +180,9 @@ function App() {
         {/* <BoxNextToEachOther /> */}
         {/* <ProfileInfo /> */}
         <UserProfileInfo />
+        {/* <CurrentTime /> */}
+        {/* <CurrentDateShamsi /> */}
+
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">

src/components/CurrentDateShamsi/index.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+const CurrentDateShamsi = ({ color, fontSize }) => {
+  const date = new Date();
+  const option = {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  };
+  const todayDate = date.toLocaleDateString("fa-IR", option);
+
+  return <p className={`${color} ${fontSize}`}>{todayDate}</p>;
+};
+
+export default CurrentDateShamsi;
+
+CurrentDateShamsi.defaultProps = {
+  color: "text-red-600",
+  fontSize: "text-lg",
+};

src/components/CurrentTime/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const CurrentTime = ({ color, fontSize }) => {
+  const today = new Date(),
+    time =
+      today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
+  {
+    console.log(time);
+  }
+  return <p className={`${color} ${fontSize}`}>{time}</p>;
+};
+
+export default CurrentTime;
+
+CurrentTime.defaultProps = {
+  color: "text-red-600",
+  fontSize: "text-lg",
+};

src/components/ProfileInfo/index.js

@@ -5,7 +5,7 @@ import arrowDown from "./arrow-down.svg";
 
 const ProfileInfo = ({ name, role }) => {
   return (
-    <div className="flex flex-row items-center mr-10 mt-10">
+    <div className="flex flex-row items-center justify-center">
       <img src={profilePic} className="rounded-full" alt="profile-pic" />
       <div className="mx-4">
         <p className="text-[#0F0543] font-bold text-sm">{name}</p>

src/components/UserProfileInfo/index.js

@@ -1,7 +1,24 @@
 import React from "react";
+import CurrentDateShamsi from "../CurrentDateShamsi";
+import CurrentTime from "../CurrentTime";
+import ProfileInfo from "../ProfileInfo";
 
 const UserProfileInfo = () => {
-  return <div className="">UserProfil55eInfo</div>;
+  return (
+    <div className="max-w-[380px] flex flex-row-reverse items-center justify-between divide-x bg-blue-200">
+      {/* ? date && time */}
+      <div className="">
+        {/* ? time */}
+        <div className="flex flex-row items-center mb-2">
+          <span className="text-xs ml-2 text-[#0F0543] ">ساعت</span>
+          <CurrentTime color={"text-[#2A527A]"} fontSize={"text-xs"} />
+        </div>
+        {/* ? date */}
+        <CurrentDateShamsi color={"text-[#2A527A]"} fontSize={"text-xs"} />
+      </div>
+      <ProfileInfo />
+    </div>
+  );
 };
 
 export default UserProfileInfo;