Message Design Card List

Cards 65

About

Here is Message Design Card List component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Message Design Card List to your project and fits it to your theme.

Code

How Message Design Card List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// 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;