Checkbox

'use client';

import { Checkbox } from '@/components/ui/checkbox';
import { useState } from 'react';

export function CheckboxDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <div className='flex flex-col items-center justify-center gap-4'>
      <label htmlFor='checkbox' className='flex items-center gap-2'>
        <Checkbox
          id='checkbox'
          checked={checked}
          onCheckedChange={setChecked}
        />
        <span className='typography-body-medium'>Checkbox</span>
      </label>
      <div className='flex flex-col gap-2'>
        <p className='typography-body-medium'>
          Checkbox is {checked ? 'checked' : 'unchecked'}
        </p>
      </div>
    </div>
  );
}

'use client';

import { Checkbox, CheckboxGroup } from '../ui/checkbox';
import React from 'react';

export function CheckboxGroupDemo() {
  const fruits = ['fuji-apple', 'gala-apple', 'granny-smith-apple'];
  const [value, setValue] = React.useState<string[]>([]);
  return (
    <CheckboxGroup
      defaultValue={['fuji-apple']}
      className='flex flex-col gap-3'
      allValues={fruits}
      value={value}
      onValueChange={setValue}
    >
      <label
        id='apples-caption'
        className='typography-body-medium flex items-center gap-2'
      >
        <Checkbox parent name='apples' />
        Apples
      </label>
      {fruits.map((fruit) => (
        <label
          htmlFor={fruit}
          key={fruit}
          className='typography-body-medium flex items-center gap-2 pl-4'
        >
          <Checkbox value={fruit} />
          {fruit.replace(/-/g, ' ')}
        </label>
      ))}
    </CheckboxGroup>
  );
}