introducing special profile select component

src/components/ui/ProfileSelect.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { useUser } from "../../hooks/useUser";
+
+export default function CountrySelect({ options }) {
+	const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+	const { profile, changeProfile } = useUser();
+
+	function handleShowHideSubmenu() {
+		setIsSubmenuOpen(!isSubmenuOpen);
+	}
+
+	function handleChangeProfile() {
+		changeProfile("subcontractor_employee");
+	}
+
+	if (!profile) return <div className='profile-select dropdown-select'> Loading...</div>;
+
+	const selectOptions = Object.keys(options).map((key) => (
+		<li key={uuidv4()} className='dropdown-select__option' onClick={() => handleChangeProfile()}>
+			{options[key]}
+		</li>
+	));
+
+	return (
+		<div className='profile-select dropdown-select'>
+			<button className='dropdown-select__toggle' onClick={handleShowHideSubmenu}>
+				{profile}
+			</button>
+			<ul className='dropdown-select__select-list' aria-hidden={!isSubmenuOpen}>
+				{selectOptions}
+			</ul>
+		</div>
+	);
+}