panel/components/cards/UserCard.tsx

import { User } from "revolt-api";
import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Badge } from "../ui/badge";
import { AUTUMN_URL } from "@/lib/constants";

export function UserCard({ user, subtitle }: { user: User; subtitle: string }) {
  return (
    <Card
      className="bg-no-repeat bg-right text-left"
      style={{
        backgroundImage: user.profile?.background
          ? `linear-gradient(to right, white, rgba(255,0,0,0)), url('${AUTUMN_URL}/backgrounds/${user.profile.background._id}')`
          : "",
        backgroundSize: "75%",
      }}
    >
      <CardHeader>
        <CardTitle className="overflow-hidden overflow-ellipsis whitespace-nowrap">
          <Avatar>
            <AvatarImage src={`${AUTUMN_URL}/avatars/${user.avatar?._id}`} />
            <AvatarFallback className="overflow-hidden overflow-ellipsis whitespace-nowrap">
              {(user.display_name ?? user.username)
                .split(" ")
                .slice(0, 2)
                .map((x) => String.fromCodePoint(x.codePointAt(0) ?? 32) ?? "")
                .join("")}
            </AvatarFallback>
          </Avatar>
          {user.bot && <Badge className="align-middle">Bot</Badge>}{" "}
          {user.username}#{user.discriminator} {user.display_name}
        </CardTitle>
        <CardDescription>{subtitle}</CardDescription>
      </CardHeader>
    </Card>
  );
}