homework 1: components

src/components/ui/checkbox/checkbox.tsx

@@ -0,0 +1,66 @@
+import { FC } from 'react'
+
+import * as CheckboxRadix from '@radix-ui/react-checkbox'
+import * as LabelRadix from '@radix-ui/react-label'
+import { clsx } from 'clsx'
+
+import s from './checkbox.module.scss'
+
+import { Check } from '@/assets/icons'
+import { Typography } from '@/components'
+
+export type CheckboxProps = {
+  className?: string
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  disabled?: boolean
+  required?: boolean
+  label?: string
+  id?: string
+  position?: 'left'
+}
+
+export const Checkbox: FC<CheckboxProps> = ({
+  checked,
+  onChange,
+  position,
+  disabled,
+  required,
+  label,
+  id,
+  className,
+}) => {
+  const classNames = {
+    container: clsx(s.container, className),
+    buttonWrapper: clsx(s.buttonWrapper, disabled && s.disabled, position === 'left' && s.left),
+    root: s.root,
+    indicator: s.indicator,
+    label: clsx(s.label, disabled && s.disabled),
+  }
+
+  return (
+    <div className={classNames.container}>
+      <LabelRadix.Root asChild>
+        <Typography variant="body2" className={classNames.label} as={'label'}>
+          <div className={classNames.buttonWrapper}>
+            <CheckboxRadix.Root
+              className={classNames.root}
+              checked={checked}
+              onCheckedChange={onChange}
+              disabled={disabled}
+              required={required}
+              id={id}
+            >
+              {checked && (
+                <CheckboxRadix.Indicator className={classNames.indicator} forceMount>
+                  <Check />
+                </CheckboxRadix.Indicator>
+              )}
+            </CheckboxRadix.Root>
+          </div>
+          {label}
+        </Typography>
+      </LabelRadix.Root>
+    </div>
+  )
+}