forked from administration/panel
39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
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";
|
|
|
|
export function UserCard({ user, subtitle }: { user: User; subtitle: string }) {
|
|
return (
|
|
<Card
|
|
className="shadow-none bg-no-repeat bg-right text-left"
|
|
style={{
|
|
backgroundImage: user.profile?.background
|
|
? `linear-gradient(to right, white, rgba(255,0,0,0)), url('https://autumn.revolt.chat/backgrounds/${user.profile.background._id}')`
|
|
: "",
|
|
backgroundSize: "75%",
|
|
}}
|
|
>
|
|
<CardHeader>
|
|
<CardTitle className="overflow-hidden overflow-ellipsis whitespace-nowrap">
|
|
<Avatar>
|
|
<AvatarImage
|
|
src={`https://autumn.revolt.chat/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>
|
|
);
|
|
}
|