73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
|
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
|
import type { LucideIcon } from "lucide-react";
|
|
import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
|
|
|
|
type BentoInfoItem = {
|
|
icon: LucideIcon;
|
|
label: string;
|
|
value: string;
|
|
};
|
|
|
|
interface BentoIconInfoCardsProps {
|
|
items: BentoInfoItem[];
|
|
useInvertedBackground: InvertedBackground;
|
|
className?: string;
|
|
cardClassName?: string;
|
|
iconWrapperClassName?: string;
|
|
iconClassName?: string;
|
|
labelClassName?: string;
|
|
valueClassName?: string;
|
|
}
|
|
|
|
const BentoIconInfoCards = ({
|
|
items,
|
|
useInvertedBackground,
|
|
className = "",
|
|
cardClassName = "",
|
|
iconWrapperClassName = "",
|
|
iconClassName = "",
|
|
labelClassName = "",
|
|
valueClassName = "",
|
|
}: BentoIconInfoCardsProps) => {
|
|
const theme = useTheme();
|
|
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
|
|
|
const duplicatedItems = [...items, ...items];
|
|
|
|
return (
|
|
<div className={cls("h-full min-h-0 overflow-hidden mask-fade-y", className)}>
|
|
<div className="flex flex-col animate-marquee-vertical px-px">
|
|
{duplicatedItems.map((item, index) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={cls("card shadow rounded-theme-capped p-3 flex items-center justify-between flex-shrink-0 mb-4", cardClassName)}
|
|
>
|
|
<div className="w-full min-w-0 flex items-center gap-3">
|
|
<div className={cls("h-10 w-auto aspect-square rounded-theme flex items-center justify-center secondary-button", iconWrapperClassName)}>
|
|
<Icon className={cls("h-4/10 w-4/10 text-foreground", iconClassName)} strokeWidth={1.5} />
|
|
</div>
|
|
<p className={cls("text-base truncate", shouldUseLightText ? "text-background" : "text-foreground", labelClassName)}>
|
|
{item.label}
|
|
</p>
|
|
</div>
|
|
<p className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
|
|
{item.value}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
BentoIconInfoCards.displayName = "BentoIconInfoCards";
|
|
|
|
export default memo(BentoIconInfoCards);
|