Thread Preview Card
Thread preview card with status badges, online indicators, and hover effects. Features gradient overlays and smooth animations on interaction.
Main Features of Thread Preview Card
How to Use Thread Preview Card in Next.js
Installation Guide for Thread Preview Card
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). |