mirror of https://github.com/usememos/memos
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
925 B
TypeScript
33 lines
925 B
TypeScript
import { Tooltip } from "@mui/joy";
|
|
import type { StatCardProps } from "@/types/statistics";
|
|
import { cn } from "@/utils";
|
|
|
|
export const StatCard = ({ icon, label, count, onClick, tooltip, className }: StatCardProps) => {
|
|
const content = (
|
|
<div
|
|
className={cn(
|
|
"w-auto border dark:border-zinc-800 pl-1.5 pr-2 py-0.5 rounded-md flex justify-between items-center",
|
|
"cursor-pointer hover:bg-gray-50 dark:hover:bg-zinc-800/50 transition-colors",
|
|
className,
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
<div className="w-auto flex justify-start items-center mr-1">
|
|
{icon}
|
|
<span className="block text-sm opacity-80">{label}</span>
|
|
</div>
|
|
<span className="text-sm truncate opacity-80">{count}</span>
|
|
</div>
|
|
);
|
|
|
|
if (tooltip) {
|
|
return (
|
|
<Tooltip title={tooltip} placement="top" arrow>
|
|
{content}
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return content;
|
|
};
|