update App.js

src/App.js

@@ -87,6 +87,7 @@ import LeafletMap from "./components/LeafletMap";
 import TestComponentNew from "./components/TestComponentNew";
 import DateRangePicker from "./components/DateRangePicker";
 import BoxNextToEachOther from "./components/BoxNextToEachOther";
+import ProfileInfo from "./components/ProfileInfo";
 
 function App() {
   return (
@@ -174,6 +175,7 @@ function App() {
         {/* <CustomToast /> */}
         {/* <DateRangePicker /> */}
         {/* <BoxNextToEachOther /> */}
+        <ProfileInfo />
 
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />

src/components/ProfileInfo/arrow-down.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="arrow-down" transform="translate(-236 -252)">
+    <path id="Vector" d="M12.919,0H1.079a1.077,1.077,0,0,0-.76,1.84L5.5,7.02a2.131,2.131,0,0,0,3.01,0l1.97-1.97,3.21-3.21A1.082,1.082,0,0,0,12.919,0Z" transform="translate(241.001 260.18)" fill="#0f0543"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(260 276) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/ProfileInfo/index.js

@@ -0,0 +1,49 @@
+import React from "react";
+
+import profilePic from "./portrait-of-a-smiling-young-man-in-eyewear.svg";
+import arrowDown from "./arrow-down.svg";
+
+const ProfileInfo = ({ name, role }) => {
+  return (
+    <div className="flex flex-row items-center">
+      <img src={profilePic} className="rounded-full" alt="profile-pic" />
+      <div className="mx-4">
+        <p className="text-[#0F0543] font-bold text-sm">{name}</p>
+        <span className="text-[#0F0543] text-xs">{role}</span>
+      </div>
+      {/* dropdown */}
+      <button
+        id="dropdownDefault"
+        data-dropdown-toggle="dropdown"
+        type="button"
+      >
+        <img src={arrowDown} className="cursor-pointer" alt="arrow-down" />
+      </button>
+      <div
+        id="dropdown"
+        className="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+      >
+        <ul
+          className="py-1 text-sm text-gray-700 dark:text-gray-200"
+          aria-labelledby="dropdownDefault"
+        >
+          <li>
+            <a
+              href="#"
+              className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+            >
+              Dashboard
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileInfo;
+
+ProfileInfo.defaultProps = {
+  name: "سبحان قاسمی",
+  role: "خادم محترم",
+};