Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | FilterItem[] | DEFAULT_ITEMS | Array of notification items |
categories | string[] | DEFAULT_CATEGORIES | Category labels for pills |
sound | boolean | true | Enable audio tick on switch |
FilterItem Interface
interface FilterItem {
id: string;
title: string;
body: string;
time: string;
category: string;
}Features
- Spring Pill Indicator: Active category pill has a sliding background that spring-animates via layoutId
- Staggered Transitions: Items exit and enter with staggered spring animations on filter change
- Customizable Categories: Pass any category labels as strings
- Hover Brightening: Item text brightens from dim to hi on hover
- Glass Morphism: Backdrop blur with light/dark CSS custom properties
- Audio Feedback: Soft tick on category switch
Usage
import { NotificationsFilter } from "@/components/ruixen/notifications-filter";
export default function Example() {
return <NotificationsFilter />;
}