adilallo
71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { normalizeImagePlaceholderColor } from "../../lib/propNormalization";
|
|
|
|
export type ImagePlaceholderColorValue =
|
|
| "blue"
|
|
| "green"
|
|
| "purple"
|
|
| "red"
|
|
| "orange"
|
|
| "teal"
|
|
| "Blue"
|
|
| "Green"
|
|
| "Purple"
|
|
| "Red"
|
|
| "Orange"
|
|
| "Teal";
|
|
|
|
interface ImagePlaceholderProps {
|
|
width?: number;
|
|
height?: number;
|
|
text?: string;
|
|
/**
|
|
* Image placeholder color. Accepts both lowercase and PascalCase (case-insensitive).
|
|
* Figma uses PascalCase, codebase uses lowercase - both are supported.
|
|
*/
|
|
color?: ImagePlaceholderColorValue;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Simple image placeholder component for testing
|
|
* Generates colored backgrounds with text overlays
|
|
*/
|
|
const ImagePlaceholder = memo<ImagePlaceholderProps>(
|
|
({
|
|
width = 260,
|
|
height = 390,
|
|
text = "Blog Image",
|
|
color: colorProp = "blue",
|
|
className = "",
|
|
}) => {
|
|
// Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
|
|
const color = normalizeImagePlaceholderColor(colorProp);
|
|
const colors: Record<string, string> = {
|
|
blue: "bg-blue-500",
|
|
green: "bg-green-500",
|
|
purple: "bg-purple-500",
|
|
red: "bg-red-500",
|
|
orange: "bg-orange-500",
|
|
teal: "bg-teal-500",
|
|
};
|
|
|
|
const bgColor = colors[color] || colors.blue;
|
|
|
|
return (
|
|
<div
|
|
className={`${bgColor} flex items-center justify-center text-white font-bold text-lg ${className}`}
|
|
style={{ width: `${width}px`, height: `${height}px` }}
|
|
>
|
|
{text}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
ImagePlaceholder.displayName = "ImagePlaceholder";
|
|
|
|
export default ImagePlaceholder;
|