51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
import React from "react";
|
|
import styles from "./styles.module.css";
|
|
import SettingsIcon from "../../icons/settings";
|
|
import LogoutIcon from "../../icons/logout";
|
|
|
|
const ProfileDropdown = ({ isMobile, user }) => {
|
|
return (
|
|
<div className={styles.dropdownContainer}>
|
|
{/* Settings */}
|
|
|
|
{/* Mobile View */}
|
|
{isMobile && (
|
|
<>
|
|
{" "}
|
|
<div className={styles.profileBadge}>
|
|
{/* User profile*/}
|
|
<div className={styles.userImgContainer}>
|
|
<div className={styles.userPic}></div>
|
|
</div>
|
|
|
|
{/* Username and Role*/}
|
|
<div className={styles.nameRole}>
|
|
<p className={styles.userName}>{user.name}</p>
|
|
<p className={styles.userRole}>{user.role}</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.divider}></div>
|
|
</>
|
|
)}
|
|
|
|
<div className={styles.settingsBtn}>
|
|
{/* Icon */}
|
|
<div className={styles.btn}>
|
|
<SettingsIcon />
|
|
</div>
|
|
<p>Settings</p>
|
|
</div>
|
|
{/* Logout */}
|
|
<div className={styles.logoutBtn}>
|
|
{/* Icon */}
|
|
<div className={styles.btn}>
|
|
<LogoutIcon />
|
|
</div>
|
|
<p>Logout</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProfileDropdown;
|