feat: header component

feat: dropdown component
feat: avatar component

src/components/ui/dropdown/dropdown.tsx

@@ -0,0 +1,78 @@
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { clsx } from 'clsx'
+
+import s from './dropdown.module.scss'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuContent = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ children, className, sideOffset = 8, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      className={clsx(s.content, className)}
+      ref={ref}
+      sideOffset={sideOffset}
+      {...props}
+    >
+      <div>
+        <DropdownMenuPrimitive.Arrow asChild className={s.arrowBox}>
+          <div className={s.arrow} />
+        </DropdownMenuPrimitive.Arrow>
+        <div className={s.itemsBox}>{children}</div>
+      </div>
+    </DropdownMenuPrimitive.Content>
+  </DropdownMenuPrimitive.Portal>
+))
+
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item className={clsx(s.item, className)} ref={ref} {...props} />
+))
+
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuSeparator = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator className={clsx(s.separator, className)} ref={ref} {...props} />
+))
+
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuLabel = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label className={clsx(s.label, className)} ref={ref} {...props} />
+))
+
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+}