Navigation & Structure
Thread Preview Card
Thread preview card with status badges, online indicators, and hover effects. Features gradient overlays and smooth animations on interaction.
navigation-structurechatthreadpreviewcardstatusindicator
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
avatarUrl | string | "https://api.dicebear.com/7.x/bottts/svg?seed=gpt" | URL of the avatar image. |
name | string | "Support Bot" | Name displayed in the preview card. |
message | string | "Your ticket #4928 has been resolved. Click here to view details." | Preview message text. |
status | 'new' | 'unread' | 'read' | 'new' | Status of the thread. |
timestamp | string | "2 min ago" | Timestamp text displayed in the card. |
online | boolean | true | Whether the user is online. |
hoverEffect | boolean | true | Whether to enable hover animations. |
onClick | () => void | undefined | Callback function called when the card is clicked. |
className | string | undefined | Additional CSS classes for custom styling. |
accentColor | string | "#3b82f6" | Accent color for status badges and hover effects (hex, rgb, or hsl). |