MailList() — ui Function Reference

Architecture documentation for the MailList() function in mail-list.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives calls 1

Entity Profile

ComponentRegistry→ UIPrimitives→ MailList() — ui Function Reference

Dependency Diagram

graph TD
  7e7aaa74_bdc1_bc00_3e41_8a312c8cc072["MailList()"]
  59bf1756_2b53_5adb_7ea0_d474349e159f["mail-list.tsx"]
  7e7aaa74_bdc1_bc00_3e41_8a312c8cc072 -->|defined in| 59bf1756_2b53_5adb_7ea0_d474349e159f
  958d5560_cef6_cca5_832b_dc8a9913d5b1["getBadgeVariantFromLabel()"]
  7e7aaa74_bdc1_bc00_3e41_8a312c8cc072 -->|calls| 958d5560_cef6_cca5_832b_dc8a9913d5b1
  style 7e7aaa74_bdc1_bc00_3e41_8a312c8cc072 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(app)/examples/mail/components/mail-list.tsx lines 15–75

export function MailList({ items }: MailListProps) {
  const [mail, setMail] = useMail()

  return (
    <ScrollArea className="h-screen">
      <div className="flex flex-col gap-2 p-4 pt-0">
        {items.map((item) => (
          <button
            key={item.id}
            className={cn(
              "flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent",
              mail.selected === item.id && "bg-muted"
            )}
            onClick={() =>
              setMail({
                ...mail,
                selected: item.id,
              })
            }
          >
            <div className="flex w-full flex-col gap-1">
              <div className="flex items-center">
                <div className="flex items-center gap-2">
                  <div className="font-semibold">{item.name}</div>
                  {!item.read && (
                    <span className="flex h-2 w-2 rounded-full bg-blue-600" />
                  )}
                </div>
                <div
                  className={cn(
                    "ml-auto text-xs",
                    mail.selected === item.id
                      ? "text-foreground"
                      : "text-muted-foreground"
                  )}
                >
                  {formatDistanceToNow(new Date(item.date), {
                    addSuffix: true,
                  })}
                </div>
              </div>
              <div className="text-xs font-medium">{item.subject}</div>
            </div>
            <div className="line-clamp-2 text-xs text-muted-foreground">
              {item.text.substring(0, 300)}
            </div>
            {item.labels.length ? (
              <div className="flex items-center gap-2">
                {item.labels.map((label) => (
                  <Badge key={label} variant={getBadgeVariantFromLabel(label)}>
                    {label}
                  </Badge>
                ))}
              </div>
            ) : null}
          </button>
        ))}
      </div>
    </ScrollArea>
  )
}