Components
Loading preview...
Here is Message Design Card List component
npx shadcn@latest add https://21st.dev/r/kristen17/message-design-card-list// src/demos/default.tsx
'use client';
import React, { useState } from 'react';
import { ClientMessagesSidebar, MessageProps } from '@/components/ui/message-design-card-list';
const initialMessages: MessageProps[] = [
{
id: '1',
avatar: 'https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
name: 'peter',
text: 'I got your first assigment. It was quite good. You can start work on next assignment.',
date: '21 July',
isFavorite: false,
isActive: false,
},
{
id: '2',
avatar: 'https://images.pexels.com/photos/874158/pexels-photo-874158.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
name: 'david',
text: 'Hey tell me about progress of project? Waiting for your response',
date: '19 July',
isFavorite: true,
isActive: true, // This message starts active
},
{
id: '3',
avatar: 'https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
name: 'sophia',
text: 'When you start redesign of app? Previous project was perfect!',
date: '18 July',
isFavorite: false,
isActive: false,
},
{
id: '4',
avatar: 'https://images.pexels.com/photos/1181690/pexels-photo-1181690.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
name: 'andrea',
text: 'Hey tell me about progress of project? Waiting for your response',
date: '18 July',
isFavorite: false,
isActive: false,
},
{
id: '5',
avatar: 'https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
name: 'john',
text: 'I want some changes in previous work you sent me. Waiting for your reply...',
date: '17 July',
isFavorite: false,
isActive: false,
},
{
id: '6',
avatar: 'https://images.pexels.com/photos/709188/pexels-photo-709188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
name: 'martin',
text: 'I am really impressed from your work :-). Keep doing great work.',
date: '10 July',
isFavorite: false,
isActive: false,
},
];
const DefaultDemo: React.FC = () => {
const [messages, setMessages] = useState<MessageProps[]>(initialMessages);
const handleMessageClick = (clickedId: string) => {
setMessages((prevMessages) =>
prevMessages.map((msg) => ({
...msg,
isActive: msg.id === clickedId,
}))
);
};
const handleFavoriteToggle = (toggledId: string) => {
setMessages((prevMessages) =>
prevMessages.map((msg) =>
msg.id === toggledId ? { ...msg, isFavorite: !msg.isFavorite } : msg
)
);
};
return (
<ClientMessagesSidebar
messages={messages}
onMessageClick={handleMessageClick}
onFavoriteToggle={handleFavoriteToggle}
/>
);
};
export default DefaultDemo;