Animated status bar with gooey SVG filter effects. Hover over items to see fluid morphing animations with tooltips.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | Array<{ id: string; icon: 'music' | 'cube' | 'cloud' | 'wifi' | 'battery' | 'clock' | 'custom'; label?: string; value?: string; customIcon?: ReactNode }> | defaultStatusItems | Array of status items. Each item has: id (unique identifier), icon (icon type), label/value (display text), customIcon (for 'custom' type) |
| renderContent | (item: StatusItem) => ReactNode | undefined | Custom renderer for tooltip content |
| contentClassName | string | "" | CSS classes for the tooltip text |
| barColor | string | "#C8FF00" | Background color of the bar and gooey blob |
| iconColor | string | "#000000" | Color of the icons |
| className | string | "" | Additional CSS classes for the outer wrapper |
| iconSize | string | "w-5 h-5" | Tailwind size class for icons |
| buttonSize | string | "w-10 h-10" | Tailwind size class for buttons |
| gap | string | "gap-1" | Tailwind gap class between buttons |
| padding | string | "px-3" | CSS padding for the main bar |