feat: header component

feat: dropdown component
feat: avatar component

src/components/ui/button/button.tsx

@@ -1,4 +1,13 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'
+import {
+  ComponentPropsWithoutRef,
+  ElementRef,
+  ElementType,
+  ForwardedRef,
+  ReactNode,
+  forwardRef,
+} from 'react'
+
+import { clsx } from 'clsx'
 
 import s from './button.module.scss'
 
@@ -7,13 +16,38 @@ export type ButtonProps<T extends ElementType = 'button'> = {
   children: ReactNode
   className?: string
   fullWidth?: boolean
+  rounded?: boolean
   variant?: 'icon' | 'link' | 'primary' | 'secondary' | 'tertiary'
 } & ComponentPropsWithoutRef<T>
 
-export const Button = <T extends ElementType = 'button'>(props: ButtonProps<T>) => {
-  const { as: Component = 'button', className, fullWidth, variant = 'primary', ...rest } = props
+const ButtonPolymorph = <T extends ElementType = 'button'>(props: ButtonProps<T>, ref: any) => {
+  const {
+    as: Component = 'button',
+    className,
+    fullWidth,
+    rounded,
+    variant = 'primary',
+    ...rest
+  } = props
 
   return (
-    <Component className={`${s[variant]} ${fullWidth ? s.fullWidth : ''} ${className}`} {...rest} />
+    <Component
+      className={clsx(
+        s.button,
+        s[variant],
+        fullWidth && s.fullWidth,
+        className,
+        rounded && s.rounded
+      )}
+      {...rest}
+      ref={ref}
+    />
   )
 }
+
+export const Button = forwardRef(ButtonPolymorph) as <T extends ElementType = 'button'>(
+  props: ButtonProps<T> &
+    Omit<ComponentPropsWithoutRef<T>, keyof ButtonProps<T>> & {
+      ref?: ForwardedRef<ElementRef<T>>
+    }
+) => ReturnType<typeof ButtonPolymorph>