Input Chip

import React, { useState, KeyboardEvent } from 'react';

export const InputChip: React.FC = () => {
  const [chips, setChips] = useState<string[]>(['Design']);
  const [inputValue, setInputValue] = useState('');

  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && inputValue.trim()) {
      e.preventDefault();
      setChips([...chips, inputValue.trim()]);
      setInputValue('');
    } else if (e.key === 'Backspace' && !inputValue) {
      setChips(chips.slice(0, -1));
    }
  };

  return (
    <div className="input-chip-wrapper">
      {chips.map((chip) => (
        <div key={chip} className="input-chip">
          {chip}
        </div>
      ))}
      <input
        type="text"
        placeholder="Type and press Enter..."
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onKeyDown={handleKeyDown}
      />
    </div>
  );
};

.input-chip-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
}

.input-chip {
  padding: 6px 10px;
  background: var(--bg-secondary);
  border-radius: 14px;
}