"use client";

import * as React from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";
import { StatusIndicator } from "@/components/shadcncraft/pro-application/messaging";

type Sender = {
  name: string;
  avatar?: string;
  status?: "online" | "offline";
};

type MessageCardProps = {
  sender: Sender;
  subject?: string;
  preview: string;
  timestamp: string;
  selected?: boolean;
};

type MessageCard1Props = React.ComponentProps<"div"> & MessageCardProps;

function MessageCard1({
  sender,
  subject,
  preview,
  timestamp,
  selected = false,
  className,
  ...props
}: MessageCard1Props) {
  const fallbackInitials = React.useMemo(() => {
    const parts = sender.name.trim().split(/\s+/);
    if (parts.length >= 2) {
      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
    }
    return sender.name.slice(0, 2).toUpperCase();
  }, [sender.name]);

  return (
    <div
      data-slot="message-card"
      data-selected={selected}
      className={cn(
        "group/message-card relative flex cursor-pointer gap-3 border-b border-l p-4 transition-colors",
        "hover:bg-accent",
        selected && "bg-sidebar",
        className
      )}
      {...props}
    >
      {/* Avatar with Status */}
      <div className="relative shrink-0 self-start">
        <Avatar className="size-10">
          <AvatarImage src={sender.avatar} alt={sender.name} className="object-cover" />
          <AvatarFallback className="uppercase">{fallbackInitials}</AvatarFallback>
        </Avatar>
        {sender.status && (
          <StatusIndicator status={sender.status} className="absolute right-0 bottom-0" />
        )}
      </div>

      {/* Content */}
      <div className="flex min-w-0 flex-1 flex-col gap-4">
        {/* Header: Name + Timestamp */}
        <div className="flex items-start justify-between gap-4">
          <div className="min-w-0 flex-1">
            <p
              className={cn(
                "truncate text-sm font-medium text-muted-foreground transition-colors",
                selected && "text-foreground"
              )}
            >
              {sender.name}
            </p>
            {subject && (
              <p
                className={cn(
                  "truncate text-sm font-normal text-muted-foreground transition-colors",
                  selected && "text-foreground"
                )}
              >
                {subject}
              </p>
            )}
          </div>
          <span className="shrink-0 text-xs text-muted-foreground/50">{timestamp}</span>
        </div>

        {/* Preview */}
        <p
          className={cn(
            "line-clamp-2 text-sm text-muted-foreground/50 transition-colors",
            selected && "text-muted-foreground"
          )}
        >
          {preview}
        </p>
      </div>
    </div>
  );
}

export { MessageCard1, type MessageCardProps };

Message Card

Message Card 1

Get access to these components and the full library

Built for real interfaces

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

More Components

Real support from the team behind shadcncraft