53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
|
import React from "react";
|
||
|
|
import NoImageIcon from "../assets/no-image-svgrepo-com.svg";
|
||
|
|
|
||
|
|
interface NoImagePlaceholderProps {
|
||
|
|
size?: "sm" | "md" | "lg";
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* NoImagePlaceholder Component
|
||
|
|
* Componente reutilizável para exibir placeholder quando não há imagem disponível
|
||
|
|
*
|
||
|
|
* @param size - Tamanho do placeholder (sm, md, lg)
|
||
|
|
* @param className - Classes CSS adicionais
|
||
|
|
*/
|
||
|
|
const NoImagePlaceholder: React.FC<NoImagePlaceholderProps> = ({
|
||
|
|
size = "md",
|
||
|
|
className = "",
|
||
|
|
}) => {
|
||
|
|
const sizeClasses = {
|
||
|
|
sm: "w-16 h-14 p-4",
|
||
|
|
md: "w-24 h-20 p-4",
|
||
|
|
lg: "w-32 h-28 p-4",
|
||
|
|
};
|
||
|
|
|
||
|
|
const textSizeClasses = {
|
||
|
|
sm: "text-xs",
|
||
|
|
md: "text-sm",
|
||
|
|
lg: "text-base",
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`flex flex-col items-center justify-center text-slate-400 ${className}`}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className={`${sizeClasses[size]} flex items-center justify-center mb-2 p-2`}
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={NoImageIcon}
|
||
|
|
alt="Sem imagem"
|
||
|
|
className={`${sizeClasses[size]} object-contain`}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<span className={`font-medium text-slate-400 ${textSizeClasses[size]}`}>
|
||
|
|
Sem imagem
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default NoImagePlaceholder;
|