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

master
mahdi 2 years ago
parent 517e099e63
commit ac00013412
  1. 5
      src/App.js
  2. 21
      src/components/CurrentDateShamsi/index.js
  3. 18
      src/components/CurrentTime/index.js
  4. 2
      src/components/ProfileInfo/index.js
  5. 19
      src/components/UserProfileInfo/index.js

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

@ -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",
};

@ -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",
};

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

@ -1,7 +1,24 @@
import React from "react"; import React from "react";
import CurrentDateShamsi from "../CurrentDateShamsi";
import CurrentTime from "../CurrentTime";
import ProfileInfo from "../ProfileInfo";
const UserProfileInfo = () => { 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; export default UserProfileInfo;

Loading…
Cancel
Save