refactor(components) : merge file and change name
This commit is contained in:
@@ -0,0 +1,295 @@
|
||||
"use client";
|
||||
|
||||
import { useState, type ReactNode } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { LogOut, UserRound } from "lucide-react";
|
||||
import { signOut } from "next-auth/react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type {
|
||||
DiscordMemberProfile as DiscordMemberProfileData,
|
||||
DiscordRole,
|
||||
} from "@/lib/discord/discord";
|
||||
import {
|
||||
discordColorToHex,
|
||||
} from "@/lib/discord/profile-appearance";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type DiscordMemberProfile = DiscordMemberProfileData;
|
||||
|
||||
const DEFAULT_ROLE_COLOR = "#99aab5";
|
||||
|
||||
type DiscordAvatarProps = {
|
||||
avatarUrl: string | null;
|
||||
decorationUrl?: string | null;
|
||||
alt: string;
|
||||
fallback: string;
|
||||
className?: string;
|
||||
imageError?: boolean;
|
||||
onImageError?: () => void;
|
||||
};
|
||||
|
||||
export function DiscordAvatar({
|
||||
avatarUrl,
|
||||
decorationUrl,
|
||||
alt,
|
||||
fallback,
|
||||
className,
|
||||
imageError = false,
|
||||
onImageError,
|
||||
}: DiscordAvatarProps) {
|
||||
return (
|
||||
<div className={cn("relative shrink-0", className)}>
|
||||
<Avatar className="size-full">
|
||||
{!imageError && avatarUrl && (
|
||||
<AvatarImage src={avatarUrl} alt={alt} onError={onImageError} />
|
||||
)}
|
||||
<AvatarFallback>{fallback}</AvatarFallback>
|
||||
</Avatar>
|
||||
{decorationUrl && (
|
||||
<Image
|
||||
src={decorationUrl}
|
||||
alt=""
|
||||
aria-hidden
|
||||
width={160}
|
||||
height={160}
|
||||
className="pointer-events-none absolute left-1/2 top-1/2 size-[125%] max-w-none -translate-x-1/2 -translate-y-1/2 object-contain"
|
||||
unoptimized
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DiscordServerTag({
|
||||
primaryGuild,
|
||||
}: Pick<DiscordMemberProfile, "primaryGuild">) {
|
||||
if (!primaryGuild) return null;
|
||||
|
||||
return (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-6 shrink-0 rounded-full px-2 text-xs"
|
||||
aria-label={`Server tag ${primaryGuild.tag}`}
|
||||
>
|
||||
{primaryGuild.badgeUrl && (
|
||||
<Image
|
||||
src={primaryGuild.badgeUrl}
|
||||
alt=""
|
||||
width={16}
|
||||
height={16}
|
||||
unoptimized
|
||||
/>
|
||||
)}
|
||||
{primaryGuild.tag}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
function initials(value: string) {
|
||||
return value.trim().slice(0, 2).toLocaleUpperCase("th-TH") || "?";
|
||||
}
|
||||
|
||||
function RolePill({ role }: { role: DiscordRole }) {
|
||||
const colorHex = role.color === 0
|
||||
? DEFAULT_ROLE_COLOR
|
||||
: discordColorToHex(role.color);
|
||||
return (
|
||||
<div className="inline-flex items-center gap-1 border border-border bg-muted/50 px-2 py-1 text-xs font-medium">
|
||||
<div
|
||||
className="w-2 h-2 rounded-full shrink-0"
|
||||
style={{ backgroundColor: colorHex }}
|
||||
/>
|
||||
<span className="text-foreground max-w-40 truncate">
|
||||
{role.name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DiscordProfileCard({
|
||||
userName,
|
||||
userImage,
|
||||
profile,
|
||||
imgError,
|
||||
onImageError,
|
||||
}: {
|
||||
userName: string;
|
||||
userImage: string;
|
||||
profile: DiscordMemberProfile | null;
|
||||
imgError: boolean;
|
||||
onImageError: () => void;
|
||||
}) {
|
||||
const displayAvatar = profile?.avatarUrl || userImage;
|
||||
const displayName = profile?.globalName || userName;
|
||||
const username = profile?.username || userName;
|
||||
const bannerStyle = {
|
||||
height: 100,
|
||||
backgroundImage: profile?.bannerUrl ? `url(${profile.bannerUrl})` : undefined,
|
||||
backgroundSize: "cover" as const,
|
||||
backgroundPosition: "center" as const,
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="relative w-full bg-muted" style={bannerStyle} />
|
||||
<div className="relative px-3 pb-3">
|
||||
<div className="absolute" style={{ top: -56, left: 12 }}>
|
||||
<div className="relative">
|
||||
<div className="rounded-full bg-popover p-1.5">
|
||||
<DiscordAvatar
|
||||
avatarUrl={displayAvatar || null}
|
||||
decorationUrl={profile?.avatarDecorationUrl}
|
||||
alt={displayName}
|
||||
fallback={initials(displayName)}
|
||||
className="size-19"
|
||||
imageError={imgError}
|
||||
onImageError={onImageError}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ paddingTop: 36 }}>
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<div className="truncate font-bold text-lg leading-tight text-foreground">
|
||||
{displayName}
|
||||
</div>
|
||||
{profile && <DiscordServerTag primaryGuild={profile.primaryGuild} />}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
{username}
|
||||
</div>
|
||||
{profile && profile.roles.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<div className="text-xs text-muted-foreground uppercase tracking-wider mb-2">
|
||||
Roles / บทบาท
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{profile.roles.map((role) => (
|
||||
<RolePill key={role.id} role={role} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DiscordProfileDropdown({
|
||||
userName,
|
||||
userImage = "",
|
||||
profile,
|
||||
children,
|
||||
}: {
|
||||
userName: string;
|
||||
userImage?: string;
|
||||
profile: DiscordMemberProfile;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const [imgError, setImgError] = useState(false);
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="start"
|
||||
className="overflow-hidden p-0"
|
||||
style={{ width: 280 }}
|
||||
>
|
||||
<DiscordProfileCard
|
||||
userName={userName}
|
||||
userImage={userImage}
|
||||
profile={profile}
|
||||
imgError={imgError}
|
||||
onImageError={() => setImgError(true)}
|
||||
/>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
|
||||
export function DropdownMenuAvatar({
|
||||
userName,
|
||||
userImage,
|
||||
profile,
|
||||
showName = true,
|
||||
}: {
|
||||
userName: string;
|
||||
userImage: string;
|
||||
profile: DiscordMemberProfile | null;
|
||||
showName?: boolean;
|
||||
}) {
|
||||
const [imgError, setImgError] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
const displayAvatar = profile?.avatarUrl || userImage;
|
||||
const displayName = profile?.globalName || userName;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className={showName ? "pl-1 pr-2 flex items-center gap-2" : "h-9 w-9 rounded-full p-0 flex items-center justify-center"}>
|
||||
<DiscordAvatar
|
||||
avatarUrl={displayAvatar || null}
|
||||
decorationUrl={profile?.avatarDecorationUrl}
|
||||
alt={displayName}
|
||||
fallback={initials(displayName)}
|
||||
className="size-8"
|
||||
imageError={imgError}
|
||||
onImageError={() => setImgError(true)}
|
||||
/>
|
||||
{showName && <span className="text-sm font-medium">{displayName}</span>}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="overflow-hidden p-0"
|
||||
style={{ width: 280 }}
|
||||
>
|
||||
<DiscordProfileCard
|
||||
userName={userName}
|
||||
userImage={userImage}
|
||||
profile={profile}
|
||||
imgError={imgError}
|
||||
onImageError={() => setImgError(true)}
|
||||
/>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup className="p-2">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/profile">
|
||||
<UserRound />
|
||||
โปรไฟล์ของฉัน
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => signOut({ callbackUrl: pathname })}
|
||||
className="text-destructive"
|
||||
>
|
||||
<LogOut />
|
||||
ออกจากระบบ
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user