feat: header component

feat: dropdown component
feat: avatar component

src/components/ui/avatar/avatar.module.scss

@@ -0,0 +1,4 @@
+.avatar {
+  object-fit: cover;
+  border-radius: 9999px;
+}

src/components/ui/avatar/avatar.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Avatar } from './'
+
+const meta = {
+  component: Avatar,
+  tags: ['autodocs'],
+  title: 'Components/Avatar',
+} satisfies Meta<typeof Avatar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    src: 'https://avatars.githubusercontent.com/u/1196870?v=4',
+  },
+}

src/components/ui/avatar/avatar.tsx

@@ -0,0 +1,23 @@
+import { CSSProperties, ComponentPropsWithoutRef } from 'react'
+
+import clsx from 'clsx'
+
+import s from './avatar.module.scss'
+
+export type AvatarProps = ComponentPropsWithoutRef<'img'> & {
+  size?: CSSProperties['width']
+}
+
+export const Avatar = ({ className, size = '36px', style, ...rest }: AvatarProps) => {
+  return (
+    <img
+      className={clsx(className, s.avatar)}
+      style={{
+        ...style,
+        height: size,
+        width: size,
+      }}
+      {...rest}
+    />
+  )
+}

src/components/ui/avatar/index.ts

@@ -0,0 +1 @@
+export * from './avatar'