83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
|
import { FC } from 'react';
|
||
|
|
import { TeamOutlined } from '@ant-design/icons';
|
||
|
|
import { cn } from '@imphnen-frontend-service/utils';
|
||
|
|
|
||
|
|
interface TeamBannerPlaceholderProps {
|
||
|
|
banner?: string;
|
||
|
|
teamName: string;
|
||
|
|
className?: string;
|
||
|
|
showPlaceholder?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const TeamBannerPlaceholder: FC<TeamBannerPlaceholderProps> = ({
|
||
|
|
banner,
|
||
|
|
teamName,
|
||
|
|
className = '',
|
||
|
|
showPlaceholder = true,
|
||
|
|
}) => {
|
||
|
|
const aspectRatioClass = 'aspect-[3/1]'; // 3:1 aspect ratio
|
||
|
|
|
||
|
|
if (!banner && !showPlaceholder) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (banner) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
'w-full bg-gray-100 overflow-hidden relative',
|
||
|
|
aspectRatioClass,
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={banner}
|
||
|
|
alt={`${teamName} banner`}
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
onError={(e) => {
|
||
|
|
// Fallback to placeholder if image fails to load
|
||
|
|
const target = e.target as HTMLImageElement;
|
||
|
|
target.style.display = 'none';
|
||
|
|
const placeholder = target.nextElementSibling as HTMLElement;
|
||
|
|
if (placeholder) {
|
||
|
|
placeholder.style.display = 'flex';
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
{/* Fallback placeholder (hidden by default, shown on image error) */}
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
'absolute inset-0 bg-linear-to-r from-gray-100 to-gray-200 flex items-center justify-center',
|
||
|
|
'hidden' // Hidden by default
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<div className="text-center">
|
||
|
|
<TeamOutlined className="text-4xl text-gray-400 mb-2" />
|
||
|
|
<p className="text-sm text-gray-500 font-medium">{teamName}</p>
|
||
|
|
<p className="text-xs text-gray-400">Team Banner</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// No banner - show placeholder
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
'w-full bg-linear-to-r from-gray-100 to-gray-200 flex items-center justify-center',
|
||
|
|
aspectRatioClass,
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<div className="text-center">
|
||
|
|
<TeamOutlined className="text-4xl text-gray-400 mb-2" />
|
||
|
|
<p className="text-sm text-gray-500 font-medium">{teamName}</p>
|
||
|
|
<p className="text-xs text-gray-400">No Banner</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default TeamBannerPlaceholder;
|