useSessionStorage

import { useSessionStorage } from '@siberiacancode/reactuse';
import { ChevronDownIcon, LayoutGridIcon } from 'lucide-react';

const DENSITY_OPTIONS = [
  { value: 'comfortable', label: 'Comfortable' },
  { value: 'cozy', label: 'Cozy' },
  { value: 'compact', label: 'Compact' }
];

const Demo = () => {
  const densitySessionStorage = useSessionStorage('reactuse-demo-density', 'comfortable');

  return (
    <section className='border-border flex min-w-md flex-col gap-2 rounded-xl border p-2'>
      <div className='flex w-full max-w-md items-start justify-between gap-4 p-4'>
        <div className='flex items-center gap-3'>
          <LayoutGridIcon className='text-muted-foreground size-6 shrink-0' />
          <div className='flex flex-col gap-0.5'>
            <span className='text-sm font-medium'>Layout density</span>
            <span className='text-muted-foreground text-xs'>Kept for this session only</span>
          </div>
        </div>

        <div className='relative'>
          <select
            value={densitySessionStorage.value ?? 'comfortable'}
            onChange={(event) => densitySessionStorage.set(event.target.value)}
          >
            {DENSITY_OPTIONS.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
          <ChevronDownIcon className='text-muted-foreground pointer-events-none absolute top-1/2 right-2 size-4 -translate-y-1/2' />
        </div>
      </div>
    </section>
  );
};

export default Demo;