bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
48 lines (47 loc) • 3.08 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronDownIcon } from "@radix-ui/react-icons";
import React from "react";
import { BitcoinAvatar } from "../ui-components/BitcoinAvatar.js";
import { Button } from "../ui/button.js";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
import { ProfileCard } from "./ProfileCard.js";
/**
* ProfilePopover - A popover trigger that shows profile details
*
* Features:
* - Customizable trigger (defaults to avatar + name)
* - ProfileCard in popover content
* - Keyboard navigation support
* - Accessible with ARIA labels
*/
export function ProfilePopover({ profile, onEdit, onSwitch, onViewDetails, children, align = "center", side = "bottom", className = "", openOnHover = true, }) {
const [open, setOpen] = React.useState(false);
const getInitials = (name) => {
if (!name)
return "?";
return name
.split(" ")
.map((word) => word[0])
.join("")
.toUpperCase()
.slice(0, 2);
};
return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx("div", { onMouseEnter: openOnHover ? () => setOpen(true) : undefined, onMouseLeave: openOnHover ? () => setOpen(false) : undefined, children: _jsx(PopoverTrigger, { asChild: true, children: children || (_jsx(Button, { variant: "ghost", size: "sm", className: className, "aria-label": "View profile", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(BitcoinAvatar, { size: "sm", src: profile.image, alt: profile.name || "Profile", fallback: getInitials(profile.name) }), _jsx("span", { className: "text-sm font-medium", children: profile.name || "Profile" }), _jsx(ChevronDownIcon, { className: "h-4 w-4" })] }) })) }) }), _jsx(PopoverContent, { align: align, side: side, className: "min-w-[320px]", onMouseEnter: openOnHover ? () => setOpen(true) : undefined, onMouseLeave: openOnHover ? () => setOpen(false) : undefined, children: _jsx(ProfileCard, { profile: profile, onEdit: onEdit, onSwitch: onSwitch, onViewDetails: onViewDetails, showActions: true, noWrapper: true }) })] }));
}
/**
* ProfilePopoverCompact - A compact version with just avatar
*/
export function ProfilePopoverCompact({ profile, onEdit, onSwitch, onViewDetails, align = "center", side = "bottom", className = "", openOnHover = true, }) {
const getInitials = (name) => {
if (!name)
return "?";
return name
.split(" ")
.map((word) => word[0])
.join("")
.toUpperCase()
.slice(0, 2);
};
return (_jsx(ProfilePopover, { profile: profile, onEdit: onEdit, onSwitch: onSwitch, onViewDetails: onViewDetails, align: align, side: side, openOnHover: openOnHover, children: _jsx(Button, { variant: "ghost", size: "sm", className: className, "aria-label": "View profile", children: _jsx(BitcoinAvatar, { size: "sm", src: profile.image, alt: profile.name || "Profile", fallback: getInitials(profile.name) }) }) }));
}