53 lines
2 KiB
TypeScript
53 lines
2 KiB
TypeScript
import type { User } from "@tensamin/user/context";
|
|
import { Avatar, AvatarFallback, AvatarImage, Button } from "@tensamin/ui";
|
|
import Text from "@tensamin/markdown/text";
|
|
import { ChevronDown, ChevronUp } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
export default function Profile({ user }: { user: User }) {
|
|
const [showAdvancedInformation, setShowAdvancedInformation] = useState(false);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex gap-2 items-center">
|
|
<Avatar className="size-10">
|
|
<AvatarImage src={user.Avatar} />
|
|
<AvatarFallback className="text-lg">
|
|
{user.Display.slice(0, 2).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex flex-col">
|
|
<p className="text-lg font-semibold">{user.Display}</p>
|
|
<p className="text-muted-foreground">{user.Username}</p>
|
|
</div>
|
|
</div>
|
|
<Text value={user.About || ""} />
|
|
<Button
|
|
className="h-auto justify-start gap-1.5 px-0 py-1 text-base font-medium text-white no-underline hover:no-underline"
|
|
variant="link"
|
|
aria-expanded={showAdvancedInformation}
|
|
onClick={() => setShowAdvancedInformation((show) => !show)}
|
|
>
|
|
{showAdvancedInformation ? (
|
|
<ChevronUp className="size-4" />
|
|
) : (
|
|
<ChevronDown className="size-4" />
|
|
)}
|
|
<span>Show advanced information</span>
|
|
</Button>
|
|
{showAdvancedInformation && (
|
|
<div className="flex flex-col">
|
|
<p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
|
|
Iota ID: <code>{user.IotaId}</code>
|
|
</p>
|
|
<p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
|
|
User ID: <code>{user.UserId}</code>
|
|
</p>
|
|
<p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
|
|
Public Key: <code>{user.PublicKey}</code>
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|