53 lines
1006 B
JavaScript
53 lines
1006 B
JavaScript
|
import {
|
||
|
|
Avatar as NextAvatar,
|
||
|
|
changeTheme,
|
||
|
|
Dropdown,
|
||
|
|
Text,
|
||
|
|
useTheme,
|
||
|
|
} from "@nextui-org/react";
|
||
|
|
|
||
|
|
const Avatar = (props) => {
|
||
|
|
const { isDark } = useTheme();
|
||
|
|
|
||
|
|
const avatarUrl =
|
||
|
|
props.avatarUrl || "https://cdn.fascinated.cc/IkQFyodbZv.jpg?raw=true";
|
||
|
|
|
||
|
|
const handleChange = () => {
|
||
|
|
const nextTheme = isDark ? "light" : "dark";
|
||
|
|
window.localStorage.setItem("theme", nextTheme); // you can use any storage
|
||
|
|
changeTheme(nextTheme);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Dropdown>
|
||
|
|
<Dropdown.Trigger>
|
||
|
|
<NextAvatar
|
||
|
|
bordered
|
||
|
|
size="lg"
|
||
|
|
as="button"
|
||
|
|
color="primary"
|
||
|
|
src={avatarUrl}
|
||
|
|
/>
|
||
|
|
</Dropdown.Trigger>
|
||
|
|
<Dropdown.Menu aria-label="Static Actions">
|
||
|
|
<Dropdown.Item>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Text b onClick={() => handleChange()}>
|
||
|
|
Toggle Dark Mode
|
||
|
|
</Text>
|
||
|
|
</div>
|
||
|
|
</Dropdown.Item>
|
||
|
|
</Dropdown.Menu>
|
||
|
|
</Dropdown>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Avatar;
|