Initial commit

2026-01-28 19:37:41 +02:00
commit d62154ea85
301 changed files with 58454 additions and 0 deletions
--- a/src/components/bento/BentoIconInfoCards.tsx
+++ b/src/components/bento/BentoIconInfoCards.tsx
@@ -0,0 +1,72 @@
+"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);