Components
Loading preview...
Here is Label Selector component by IndevUi
npx shadcn@latest add https://21st.dev/r/ln-dev7/label-selector'use client';
import { useState } from 'react';
import LabelSelector, { labels } from '@/components/ui/label-selector';
import type { LabelInterface } from '@/components/ui/label-selector';
const LabelSelectorDemo = () => {
const [selected, setSelected] = useState<LabelInterface[]>([labels[0], labels[2]]);
return (
<div className="flex w-full flex-col items-center justify-center gap-8 p-4">
<div className="flex flex-col items-center gap-2">
<h2 className="text-lg font-semibold">Label Selector</h2>
<p className="text-sm text-muted-foreground">Click to select or deselect labels.</p>
</div>
<LabelSelector selectedLabels={selected} onChange={setSelected} />
<div className="w-full max-w-sm rounded-lg border bg-background p-4">
<h3 className="mb-2 font-medium">Currently Selected Labels:</h3>
{selected.length > 0 ? (
<div className="flex flex-wrap gap-2">
{selected.map((label) => (
<span
key={label.id}
className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold"
style={{
backgroundColor: `${label.color}33`,
color: label.color,
border: `1px solid ${label.color}`,
}}
>
{label.name}
</span>
))}
</div>
) : (
<p className="text-sm text-muted-foreground">No labels selected.</p>
)}
</div>
</div>
);
};
export { LabelSelectorDemo as DemoOne };