Chip

import { Chip } from '@acronis-platform/shadcn-uikit/react';

export function ChipBasic() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip>Default</Chip>
      <Chip>Primary</Chip>
      <Chip>Secondary</Chip>
      <Chip>Success</Chip>
      <Chip>Warning</Chip>
      <Chip>Error</Chip>
    </div>
  );
}

import { Chip } from '@acronis-platform/shadcn-uikit/react';
import {
  CheckCircleIcon,
  MailIcon,
  StarIcon,
  UserIcon,
} from '@acronis-platform/shadcn-uikit';
import { HeartIcon, TagIcon } from '../icons/missing-icons';
export function ChipWithIcons() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip icon={<UserIcon className="h-4 w-4" />}>User</Chip>
      <Chip icon={<MailIcon className="h-4 w-4" />}>Email</Chip>
      <Chip icon={<TagIcon className="h-4 w-4" />}>Tag</Chip>
      <Chip icon={<StarIcon className="h-4 w-4" />}>Favorite</Chip>
      <Chip icon={<HeartIcon className="h-4 w-4" />}>Like</Chip>
      <Chip icon={<CheckCircleIcon className="h-4 w-4" />}>Verified</Chip>
    </div>
  );
}

import { useState } from 'react';
import { Chip } from '@acronis-platform/shadcn-uikit/react';

export function ChipRemovable() {
  const [chips, setChips] = useState([
    { id: 1, label: 'React' },
    { id: 2, label: 'TypeScript' },
    { id: 3, label: 'Tailwind CSS' },
  ]);

  const handleRemoveChip = (id: number) => {
    setChips(chips.filter((chip) => chip.id !== id));
  };

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap gap-2">
        {chips.map((chip) => (
          <Chip key={chip.id} onRemove={() => handleRemoveChip(chip.id)}>
            {chip.label}
          </Chip>
        ))}
      </div>
      {chips.length === 0 && (
        <p className="text-sm text-muted-foreground">All chips removed!</p>
      )}
    </div>
  );
}

import { useState } from 'react';
import { Chip } from '@acronis-platform/shadcn-uikit/react';
import { CheckCircleIcon } from '@acronis-platform/shadcn-uikit';
import { TagIcon, ZapIcon } from '../icons/missing-icons';
export function ChipWithIconsRemovable() {
  const [selectedChips, setSelectedChips] = useState([
    { id: 1, label: 'Design', icon: <TagIcon className="h-4 w-4" /> },
    { id: 2, label: 'Development', icon: <ZapIcon className="h-4 w-4" /> },
    { id: 3, label: 'Testing', icon: <CheckCircleIcon className="h-4 w-4" /> },
  ]);

  const handleRemoveSelectedChip = (id: number) => {
    setSelectedChips(selectedChips.filter((chip) => chip.id !== id));
  };

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap gap-2">
        {selectedChips.map((chip) => (
          <Chip
            key={chip.id}
            icon={chip.icon}
            onRemove={() => handleRemoveSelectedChip(chip.id)}
          >
            {chip.label}
          </Chip>
        ))}
      </div>
      {selectedChips.length === 0 && (
        <p className="text-sm text-muted-foreground">All chips removed!</p>
      )}
    </div>
  );
}

import { Chip } from '@acronis-platform/shadcn-uikit/react';
import { StarIcon } from '@acronis-platform/shadcn-uikit';
import { TagIcon } from '../icons/missing-icons';
export function ChipFilters() {
  return (
    <div className="space-y-3">
      <p className="text-sm font-medium">Active Filters:</p>
      <div className="flex flex-wrap gap-2">
        <Chip icon={<TagIcon className="h-4 w-4" />} onRemove={() => {}}>
          Category: Electronics
        </Chip>
        <Chip icon={<TagIcon className="h-4 w-4" />} onRemove={() => {}}>
          Price: $100-$500
        </Chip>
        <Chip icon={<TagIcon className="h-4 w-4" />} onRemove={() => {}}>
          Brand: Samsung
        </Chip>
        <Chip icon={<StarIcon className="h-4 w-4" />} onRemove={() => {}}>
          Rating: 4+
        </Chip>
      </div>
    </div>
  );
}