Interactive List An interactive list component designed for search interfaces or recent activity logs. It supports animated removal of list items and filter tags, is fully responsive, and adapts to shadcn themes out-of-the-box.
import * as React from 'react';
import { Book, Settings, LayoutGrid, Search } from 'lucide-react';
import { InteractiveList } from '@/components/ui/interactive-list';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
// --- Initial data for the demo ---
const initialItems = [
{
id: 1,
icon: <LayoutGrid className="h-5 w-5" />,
title: 'Browse & Discover',
description: 'Search features, filters, bookmarks.',
},
{
id: 2,
icon: <Book className="h-5 w-5" />,
title: 'Guided Tour & Tutorial',
description: 'Account setup, onboarding, registration.',
},
{
id: 3,
icon: <Settings className="h-5 w-5" />,
title: 'Settings & Preferences',
description: 'Profiles, settings, dark-mode switch.',
},
];
const initialTags = [
{ id: 'cat', label: 'Categories', color: 'var(--orange-9)' }, // Using a placeholder for brand colors
{ id: 'dia', label: 'Dialog', color: 'var(--sand-9)' },
{ id: 'gla', label: 'Glass', color: 'var(--violet-9)' },
];
// Assuming you have these colors in your globals.css
// :root {
// --orange-9: 24 9.8% 30%; /* Example dark theme color */
// --sand-9: 38 6.9% 48.2%;
// --violet-9: 262.1 83.3% 57.8%;
// }
export default function InteractiveListDemo() {
const [items, setItems] = React.useState(initialItems);
const [tags, setTags] = React.useState(initialTags);
const handleRemoveItem = (id: string | number) => {
setItems((prevItems) => prevItems.filter((item) => item.id !== id));
};
const handleRemoveTag = (id: string | number) => {
setTags((prevTags) => prevTags.filter((tag) => tag.id !== id));
};
const handleClearAll = () => {
setItems([]);
};
return (
<div className="flex min-h-[450px] w-full items-center justify-center bg-background p-4">
<Card className="w-full max-w-md rounded-2xl shadow-lg">
<CardHeader className="p-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
placeholder="UI Elements, Flows..."
className="w-full rounded-lg pl-9"
aria-label="Search"
/>
</div>
</CardHeader>
<CardContent className="p-4 pt-0">
<InteractiveList
title="Recent"
actionText="Clear all"
onActionClick={handleClearAll}
items={items}
onRemoveItem={handleRemoveItem}
tags={tags}
onRemoveTag={handleRemoveTag}
/>
</CardContent>
</Card>
</div>
);
}