Zastosowanie wszystkich poprawek UI i logiki kalkulatora

2026-08-10 23:26:52 +02:00
commit 7324a6f800
218 changed files with 33628 additions and 0 deletions
@@ -0,0 +1,35 @@
+import { Image as ImageIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface PlaceholderProps {
+  text: string;
+  className?: string;
+  aspect?: "video" | "square" | "portrait" | "auto" | "banner";
+}
+
+export function Placeholder({ text, className, aspect = "video" }: PlaceholderProps) {
+  const aspectClasses = {
+    video: "aspect-video",
+    square: "aspect-square",
+    portrait: "aspect-[3/4]",
+    banner: "aspect-[21/9] min-h-[300px]",
+    auto: "h-full w-full",
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative w-full bg-slate-100 dark:bg-slate-800 border-2 border-dashed border-slate-200 dark:border-slate-700 rounded-xl flex flex-col items-center justify-center text-center p-6 text-slate-400 dark:text-slate-500 overflow-hidden group hover:bg-slate-150 transition-colors duration-250",
+        aspectClasses[aspect],
+        className
+      )}
+    >
+      {/* TODO: docelowe zdjęcie — {text} */}
+      <ImageIcon className="size-10 mb-3 group-hover:scale-110 transition-transform duration-300" />
+      <span className="text-sm font-medium px-4 leading-normal">{text}</span>
+      <span className="text-[10px] text-slate-400 mt-2 uppercase tracking-widest font-semibold font-heading opacity-70">
+        Placeholder Zdjęcia
+      </span>
+    </div>
+  );
+}