// 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://cdn.21st.dev/assets/mirror/fe/febd67023dbd4cf096b58a7280ae6ab72e1ac7a65af8703804d2e3456821c423.jpg',
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://cdn.21st.dev/assets/mirror/f3/f30731edbee626b0eb8d9947a19135e4e3a40fe631d389dd56394eeb3a91aca1.jpg',
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://cdn.21st.dev/assets/mirror/10/1015230f2eaf20e3d9619739b198b48c285fef16f1f0af2a55c576bd61a56673.jpg',
name: 'sophia',
text: 'When you start redesign of app? Previous project was perfect!',
date: '18 July',
isFavorite: false,
isActive: false,
},
{
id: '4',
avatar: 'https://cdn.21st.dev/assets/mirror/ab/ab81447425d7c305d146c625fe16d9886a81f62514362f2beb2cfc88d4b4ea2a.jpg',
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://cdn.21st.dev/assets/mirror/4f/4fe8f748d120d978680dd5d30dc2d4672597af3d3f7155fbe48bd41c613de0ea.jpg',
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://cdn.21st.dev/assets/mirror/29/29bb52ea3497c562b0d2e6c546ed8fd73b413de47f7cd8fe023ae0697f191b94.jpg',
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;
