diff --git a/src/App.js b/src/App.js index 7bea460..7913e16 100644 --- a/src/App.js +++ b/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() { {/* */} {/* */} + {/* */} + {/* */} + {/*
diff --git a/src/components/CurrentDateShamsi/index.js b/src/components/CurrentDateShamsi/index.js new file mode 100644 index 0000000..12a4584 --- /dev/null +++ b/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

{todayDate}

; +}; + +export default CurrentDateShamsi; + +CurrentDateShamsi.defaultProps = { + color: "text-red-600", + fontSize: "text-lg", +}; diff --git a/src/components/CurrentTime/index.js b/src/components/CurrentTime/index.js new file mode 100644 index 0000000..1881fe7 --- /dev/null +++ b/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

{time}

; +}; + +export default CurrentTime; + +CurrentTime.defaultProps = { + color: "text-red-600", + fontSize: "text-lg", +}; diff --git a/src/components/ProfileInfo/index.js b/src/components/ProfileInfo/index.js index a4246ea..f6c3344 100644 --- a/src/components/ProfileInfo/index.js +++ b/src/components/ProfileInfo/index.js @@ -5,7 +5,7 @@ import arrowDown from "./arrow-down.svg"; const ProfileInfo = ({ name, role }) => { return ( -
+
profile-pic

{name}

diff --git a/src/components/UserProfileInfo/index.js b/src/components/UserProfileInfo/index.js index a1ca932..fc406b9 100644 --- a/src/components/UserProfileInfo/index.js +++ b/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
UserProfil55eInfo
; + return ( +
+ {/* ? date && time */} +
+ {/* ? time */} +
+ ساعت + +
+ {/* ? date */} + +
+ +
+ ); }; export default UserProfileInfo;