Hafid NurandGitHub
0c7887268c
* feat(backoffice): create a boilerplate page for Hackathon dashboard - Create an empty page for Hackathon dashboard - Comment out and hide the existing backoffice sidebar * feat(backoffice): Create a nested/dropdown sidebar list - Create a dropdown sidebar list - Show back the old navigation and group them - Make the sidebar responsive for mobile view * test datatable with mock data * base UI for Hackathon backoffice TODO: - Organize table schema for users, teams, and submissions management - Create API Contract for additional back-end endpoint * feat(hackathon): draft data table column & API Contract * update endpoint * feat(backoffice): update page hackathon user management - update data table component - update filtering & pagination - add modal display to edit and add user - hide notification icon in backoffice wrapper * feat(backoffice): add API contract for hackathon users * feat(backoffice): little adjustment in hackathon users management UI and API contract * feat(backoffice): update hackathon team management page - add modal for manage team, add new team, and view project submission - reorganize the table column and data table * feat(backoffice): add searchable city filter - add component for city filter - apply to user management and team management pages * feat(backoffice): improve hackathon team modal UI and add API contract - Add feature to select city in team detail modal using CityFilterSelect component - Add feature to change team logo and banner - Add API contract documentation for hackathon teams in backoffice * feat(backoffice): authentication middleware, error pages, and 404 page * feat(backoffice): hackathon dashboard integration * feat(backoffice): users page integration - Get users data from API - Set up server-side pagination and match URL params - Hide filter that doesn't exist in back-end * feat(backoffice): teams page integration - Get teams data from API - Hide filter that doesn't exists in back-end - Simplify modal according to the back-end * feat(backoffice): submission page integration - Fetch submissions data from API - Move submission modal to hackathon-submissions page
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;
|