Spaces:
Running
Running
File size: 2,633 Bytes
c2ea5ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
import React from "react";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { LucideIcon } from "lucide-react";
export interface MetadataCardConfig {
id: string;
label: string;
value: string | number;
icon: LucideIcon;
color: string;
tooltip?: string;
}
interface CompactMetadataCardProps {
config: MetadataCardConfig;
onClick?: () => void;
}
export function CompactMetadataCard({
config,
onClick,
}: CompactMetadataCardProps) {
const { label, value, icon: Icon, color, tooltip } = config;
return (
<TooltipProvider delayDuration={300}>
<Tooltip>
<TooltipTrigger asChild>
<div
className={`
bg-card border border-border rounded-lg px-3 py-2
flex items-center gap-2 min-w-0 cursor-default
hover:bg-muted/50 transition-colors
${onClick ? "cursor-pointer" : ""}
`}
onClick={onClick}
>
<Icon className={`h-4 w-4 flex-shrink-0 ${color}`} />
<div className="flex flex-col min-w-0">
<span className="text-xs font-medium text-muted-foreground truncate">
{label}
</span>
<span className="text-sm font-semibold truncate">
{typeof value === "number" && value > 999
? value.toLocaleString()
: value}
</span>
</div>
</div>
</TooltipTrigger>
<TooltipContent>
<div className="text-center">
<p className="font-medium">{label}</p>
{tooltip && (
<p className="text-xs text-muted-foreground mt-1">{tooltip}</p>
)}
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
export function CompactMetadataCardAdd({ onClick }: { onClick: () => void }) {
return (
<TooltipProvider delayDuration={300}>
<Tooltip>
<TooltipTrigger asChild>
<div
className="
bg-card border border-dashed border-border rounded-lg px-3 py-2
flex items-center justify-center gap-2 min-w-[80px] h-[52px]
cursor-pointer hover:bg-muted/50 transition-colors
text-muted-foreground hover:text-foreground
"
onClick={onClick}
>
<span className="text-lg">+</span>
</div>
</TooltipTrigger>
<TooltipContent>
<p>Add metadata card</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
|