Tag input

import { useState } from 'react';
import { motion } from 'motion/react';

type Props = { tags: string[]; onChange: (tags: string[]) => void };

export function TagInput({ tags, onChange }: Props) {
  const [draft, setDraft] = useState('');

  function add(text: string) {
    const all = [...tags, ...text.split(',').map((part) => part.trim())];
    const lower = all.map((tag) => tag.toLowerCase());
    // Skip blanks and repeats, ignoring case; the first spelling wins.
    onChange(all.filter((tag, i) => tag && lower.indexOf(lower[i]!) === i));
    setDraft('');
  }

  return (
    <div className='flex w-96 flex-wrap items-center gap-1.5 rounded-lg border bg-background p-1.5 focus-within:ring-2 focus-within:ring-ring'>
      {tags.map((tag) => (
        // New chips scale in; `layout` slides the others over when one is removed.
        <motion.span
          key={tag}
          layout
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          className='flex items-center gap-1 rounded-md bg-muted py-1 pr-1 pl-2 text-sm'
        >
          {tag}
          <button
            type='button'
            aria-label={`Remove ${tag}`}
            onClick={() => onChange(tags.filter((t) => t !== tag))}
            className='rounded px-1 text-muted-foreground hover:text-foreground'
          >
            ×
          </button>
        </motion.span>
      ))}
      <input
        aria-label='Tags'
        value={draft}
        placeholder={tags.length ? '' : 'Add a tag'}
        // A comma, typed or pasted, turns the text before it into chips.
        onChange={(event) =>
          event.target.value.includes(',')
            ? add(event.target.value)
            : setDraft(event.target.value)
        }
        onKeyDown={(event) => {
          if (event.key === 'Backspace' && !draft) onChange(tags.slice(0, -1));
          if (event.key !== 'Enter') return;
          event.preventDefault(); // keep Enter from submitting the form
          add(draft);
        }}
        className='h-8 min-w-24 flex-1 bg-transparent px-1 text-sm outline-none'
      />
    </div>
  );
}