bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
66 lines (65 loc) • 5.37 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { CheckIcon, ChevronDownIcon, PersonIcon, PlusIcon, } from "@radix-ui/react-icons";
import { CONTAINER_WIDTHS } from "../../lib/layout-constants.js";
import { cn } from "../../lib/utils.js";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
import { Button } from "../ui/button.js";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
import { ProfileCard } from "./ProfileCard.js";
/**
* ProfileSwitcher allows switching between multiple BAP profiles
*
* Features:
* - Dropdown menu with all available profiles
* - Active profile indication
* - Create new profile option
* - Profile avatar and details
* - Published/unpublished status badges
*/
export function ProfileSwitcher({ profiles, activeProfileId, onSwitch, onCreate, maxProfiles = 10, className = "", size = "2", variant = "soft", }) {
const activeProfile = profiles.find((p) => p.id === activeProfileId);
const canCreateMore = profiles.length < maxProfiles;
const getInitials = (name) => {
if (!name)
return "?";
return name
.split(" ")
.map((word) => word[0])
.join("")
.toUpperCase()
.slice(0, 2);
};
return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: variant === "soft"
? "secondary"
: variant === "ghost"
? "ghost"
: "default", size: size === "1"
? "sm"
: size === "3" || size === "4"
? "lg"
: "default", className: cn("flex items-center gap-2", className), children: [_jsxs(Avatar, { className: "h-5 w-5", children: [_jsx(AvatarImage, { src: activeProfile?.image }), _jsx(AvatarFallback, { children: getInitials(activeProfile?.name) })] }), _jsx("span", { children: activeProfile?.name || "Select Profile" }), _jsx(ChevronDownIcon, { className: "h-4 w-4" })] }) }), _jsxs(DropdownMenuContent, { style: { minWidth: CONTAINER_WIDTHS.POPOVER_SMALL }, children: [_jsx(DropdownMenuLabel, { children: "Switch Profile" }), profiles.map((profile) => (_jsx(DropdownMenuItem, { onSelect: () => onSwitch(profile.id), className: "p-0", children: _jsx(ProfileCard, { profile: profile, compact: true, variant: "ghost", onSwitch: () => onSwitch(profile.id), status: profile.id === activeProfileId
? { label: "Active", color: "green", variant: "soft" }
: undefined, style: {
width: "100%",
cursor: "pointer",
borderRadius: "calc(var(--radius) * 0.5)",
} }) }, profile.id))), onCreate && canCreateMore && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: onCreate, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-8 h-8 rounded bg-muted flex items-center justify-center", children: _jsx(PlusIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium", children: "Create New Profile" })] }) })] })), !canCreateMore && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx("div", { className: "px-3 py-2", children: _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Maximum of ", maxProfiles, " profiles reached"] }) })] }))] })] }));
}
/**
* ProfileSwitcherCompact - A more compact version for space-constrained areas
*/
export function ProfileSwitcherCompact({ profiles, activeProfileId, onSwitch, className = "", }) {
const activeProfile = profiles.find((p) => p.id === activeProfileId);
const getInitials = (name) => {
if (!name)
return "?";
return name
.split(" ")
.map((word) => word[0])
.join("")
.toUpperCase()
.slice(0, 2);
};
return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "default", className: cn("p-0 w-10 h-10", className), children: _jsxs(Avatar, { className: "h-8 w-8", children: [_jsx(AvatarImage, { src: activeProfile?.image }), _jsx(AvatarFallback, { children: getInitials(activeProfile?.name) })] }) }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PersonIcon, { className: "h-4 w-4" }), "Profiles"] }) }), profiles.map((profile) => (_jsx(DropdownMenuItem, { onSelect: () => onSwitch(profile.id), children: _jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsxs(Avatar, { className: "h-5 w-5", children: [_jsx(AvatarImage, { src: profile.image }), _jsx(AvatarFallback, { children: getInitials(profile.name) })] }), _jsx("span", { className: "text-sm", children: profile.name || "Unnamed" }), profile.id === activeProfileId && (_jsx(CheckIcon, { className: "h-4 w-4 ml-auto" }))] }) }, profile.id)))] })] }));
}