36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
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>
|
|
);
|
|
}
|