feat: header component

feat: dropdown component
feat: avatar component

src/components/layout/header/user-dropdown/user-dropdown.tsx

@@ -0,0 +1,59 @@
+import { ComponentPropsWithoutRef } from 'react'
+import { Link } from 'react-router-dom'
+
+import { Logout, PersonOutline } from '@/assets'
+import {
+  Avatar,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Typography,
+} from '@/components'
+
+import s from './user-dropdown.module.scss'
+
+export type UserDropdownProps = {
+  avatar: string
+  email: string
+  onLogout: ComponentPropsWithoutRef<typeof DropdownMenuItem>['onSelect']
+  userName: string
+}
+
+export const UserDropdown = ({ avatar, email, onLogout, userName }: UserDropdownProps) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button rounded variant={'icon'}>
+          <Avatar src={avatar} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>
+          <Avatar src={avatar} />
+          <div>
+            <Typography variant={'subtitle2'}>{userName}</Typography>
+            <Typography className={s.email} variant={'caption'}>
+              {email}
+            </Typography>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link to={'/profile'}>
+            <PersonOutline />
+            My profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onSelect={onLogout}>
+          <Logout />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}