Chip Filter

"use client";

import React, {useState} from "react";
import {ChipContainerType, ChipFilter, IconCheck} from "@brynlabs/fusion-ui";

const activeContent: ChipContainerType = {
  title: "Active",
  chipState: "selected",
  hasRemoveButtons: true,
  chips: [
    {label: "JavaScript", icon: <IconCheck />},
    {label: "TypeScript"},
    {label: "React"},
    {label: "Vue"},
    {label: "Angular"},
  ],
  emptyMessage: "No active chips",
};

const inactiveContent: ChipContainerType = {
  title: "Hidden",
  chipState: "resting",
  hasRemoveButtons: true,
  chips: [
    {label: "Node.js"},
    {label: "Express"},
    {label: "Next.js"},
    {label: "Svelte"},
    {label: "Python"},
  ],
  emptyMessage: "No inactive chips",
};

export const ChipFilterExample: React.FC = () => {
  const [active, setActive] = useState(activeContent);
  const [inactive, setInactive] = useState(inactiveContent);

  return (
    <>
      <ChipFilter
        activeContainer={active}
        inactiveContainer={inactive}
        onChange={({activeContainer, inactiveContainer}) => {
          setActive(activeContainer);
          setInactive(inactiveContainer);
        }}
      />
      <div style={{marginTop: "50px"}}>
        Values:
        <br />
        Container 1: {active.chips.map(c => c.label).join(", ")}
        <br />
        Container 2: {inactive.chips.map(c => c.label).join(", ")}
      </div>
    </>
  );
};