Chip

import React from 'react';
import { Chip } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Chip>Chip Filled</Chip>
      <Chip variant='outlined'>Chip Outlined</Chip>
      <Chip disabled>Chip Disabled</Chip>
    </div>
  );
}

"use client"
 
import React from 'react';
import { Chip } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Chip variant='filled' onClick={() => {}} clickable>Clickable</Chip>
      <Chip variant='outlined' onClick={() => {}} clickable>Clickable</Chip>
    </div>
  );
}

"use client"
 
import React from 'react';
import { Chip } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Chip variant='filled' onDelete={() => {}}>Deletable</Chip>
      <Chip variant='outlined' onDelete={() => {}}>Deletable</Chip>
    </div>
  );
}

"use client"
 
import React from 'react';
import { Chip } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Chip variant='filled' clickable onDelete={() => {}} onClick={() => {}}>Clickable and Deletable</Chip>
      <Chip variant='outlined' clickable onDelete={() => {}} onClick={() => {}}>Clickable and Deletable</Chip>
    </div>
  );
}

import React from 'react';
import { Chip } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Chip variant='filled' component={'a'} href="#" clickable>Clickable link</Chip>
      <Chip variant='outlined' component={'a'} href="#" clickable>Clickable link</Chip>
    </div>
  );
}

"use client"
 
import React from 'react';
import { Chip } from 'archi-ui'
import { DeleteIcon, Trash2 } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Chip variant='filled' onDelete={() => {}} deleteIcon={<DeleteIcon />}>Custome Delete Icon</Chip>
      <Chip variant='outlined' onDelete={() => {}} deleteIcon={<Trash2 />}>Custome Delete Icon</Chip>
    </div>
  );
}

import React from 'react';
import { Avatar, Chip } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Chip avatar={<Avatar size='sm'>V</Avatar>} variant='filled'>Avatar</Chip>
      <Chip avatar={<Avatar size='sm' alt='Naruto Uzumaki' src='/naruto-uzumaki.webp' />} variant='outlined'>Avatar</Chip>
    </div>
  );
}

import React from 'react';
import { Chip } from 'archi-ui'
import { Check, Puzzle } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Chip icon={<Check />} variant='filled'>With Icon</Chip>
      <Chip icon={<Puzzle />} variant='outlined'>With Icon</Chip>
    </div>
  );
}

import React from 'react';
import { Chip } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-2">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Chip variant='filled' color='default' clickable>Default</Chip>
        <Chip variant='filled' color='primary' clickable>Primary</Chip>
        <Chip variant='filled' color='secondary' clickable>Secondary</Chip>
        <Chip variant='filled' color='info' clickable>Info</Chip>
        <Chip variant='filled' color='warning' clickable>Warning</Chip>
        <Chip variant='filled' color='success' clickable>Success</Chip>
        <Chip variant='filled' color='error' clickable>Error</Chip>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Chip variant='outlined' color='default' clickable>Default</Chip>
        <Chip variant='outlined' color='primary' clickable>Primary</Chip>
        <Chip variant='outlined' color='secondary' clickable>Secondary</Chip>
        <Chip variant='outlined' color='info' clickable>Info</Chip>
        <Chip variant='outlined' color='warning' clickable>Warning</Chip>
        <Chip variant='outlined' color='success' clickable>Success</Chip>
        <Chip variant='outlined' color='error' clickable>Error</Chip>
      </div>
    </div>
  );
}

import React from 'react';
import { Chip } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Chip color='primary' size='md'>Medium</Chip>
      <Chip color='secondary' size='sm'>Small</Chip>
    </div>
  );
}

import React from 'react';
import { Badge, Chip } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <div className="relative inline-flex items-center">
        <Chip color='success' size='md'>Medium</Chip>
        <Badge color='error' badgeContent={"10"} className='absolute top-0 transform -translate-y-1/2 right-0 translate-x-1/2' />
      </div>
      <div className="relative inline-flex items-center">
        <Chip color='secondary' size='sm'>Small</Chip>
        <Badge color='success' badgeContent={"10"} className='absolute top-0 transform -translate-y-1/2 right-0 translate-x-1/2' />
      </div>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Button, Chip } from 'archi-ui'
 
export default function MyReactPage() {
  
  const [chipData, setChipData] = useState([
    { key: 0, label: 'Action' },
    { key: 1, label: 'Adventure' },
    { key: 2, label: 'Sci-fiction' },
    { key: 3, label: 'Horror' },
    { key: 4, label: 'Romantic' },
    { key: 5, label: 'Marvel' },
  ]);
 
  const handleReset = () => {
    setChipData([
      { key: 0, label: 'Action' },
      { key: 1, label: 'Adventure' },
      { key: 2, label: 'Sci-fiction' },
      { key: 3, label: 'Horror' },
      { key: 4, label: 'Romantic' },
      { key: 5, label: 'Marvel' },
    ]);
  }
 
  const handleChipDelete = (chipToDelete) => () => {
    setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key));
  }
 
  return (
    <div className='flex flex-wrap items-center justify-center gap-2'>
      {
        chipData.map((data) => {
          return (
            <Chip
              key={data.key}
              onDelete={handleChipDelete(data)}
            >
              {data.label}
            </Chip>
          )
        })
      }
      <Button onClick={handleReset}>Reset</Button>
    </div>
  );
}