130 lines
4.3 KiB
TypeScript
130 lines
4.3 KiB
TypeScript
import type { Colle, UserPreferences } from "~/lib/api";
|
|
|
|
import { Link } from "react-router";
|
|
import { Card } from "~/components/ui/card";
|
|
import { User, Star, CalendarDays, MapPin } from "lucide-react";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import {
|
|
cn,
|
|
formatDate,
|
|
formatGrade,
|
|
formatTime,
|
|
getColorClass,
|
|
getSubjectColor,
|
|
getSubjectEmoji,
|
|
} from "~/lib/utils";
|
|
|
|
type ColleCardProps = {
|
|
colle: Colle;
|
|
onToggleFavorite: (id: number, favorite: boolean) => void;
|
|
isFavorite: boolean;
|
|
preferences: UserPreferences;
|
|
};
|
|
|
|
export default function ColleCard({
|
|
colle,
|
|
onToggleFavorite,
|
|
isFavorite,
|
|
preferences,
|
|
}: ColleCardProps) {
|
|
// TODO: Favorites
|
|
// const handleToggleFavorite = (e: React.MouseEvent) => {
|
|
// e.stopPropagation(); // Prevent card click
|
|
// e.preventDefault();
|
|
// const newValue = !isFavorite;
|
|
// onToggleFavorite(colle.id, newValue);
|
|
// };
|
|
|
|
const subjectColor = getColorClass(getSubjectColor(colle.subject.name, preferences));
|
|
const subjectEmoji = getSubjectEmoji(colle.subject.name, preferences);
|
|
|
|
return (
|
|
<Link to={`/colles/${colle.id}`}>
|
|
<Card
|
|
id={`colle-${colle.id}`}
|
|
className="p-0 overflow-hidden hover:shadow-lg transition-shadow max-w-sm"
|
|
>
|
|
<div className="flex min-h-40">
|
|
<div
|
|
className={cn(
|
|
"p-2 flex flex-col justify-center items-center min-w-[4px]",
|
|
subjectColor
|
|
)}
|
|
></div>
|
|
|
|
<div className="flex-1 p-3 flex flex-col justify-between">
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-bold text-foreground">
|
|
{colle.student.fullName}
|
|
</h3>
|
|
{colle.grade && (
|
|
<div className="flex items-center gap-2 h-full">
|
|
{/* <Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={`h-8 w-8 ${
|
|
isFavorite ? "text-yellow-500" : "text-muted-foreground"
|
|
}`}
|
|
onClick={handleToggleFavorite}
|
|
>
|
|
<Star
|
|
className={`h-5 w-5 ${
|
|
isFavorite ? "fill-yellow-500" : ""
|
|
}`}
|
|
/>
|
|
<span className="sr-only">Ajouter aux favoris</span>
|
|
</Button> */}
|
|
<div
|
|
className={`px-2 py-1 rounded-md text-sm font-medium ${subjectColor}`}
|
|
>
|
|
{formatGrade(colle.grade)}/20
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-sm text-primary grid gap-1">
|
|
<div className="flex items-center gap-1">
|
|
<CalendarDays className="h-3 w-3" />
|
|
<span>
|
|
{formatDate(colle.date)} à {formatTime(colle.date)}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<MapPin className="h-3 w-3" />
|
|
<span>{colle.room?.name}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<User className="h-3 w-3" />
|
|
<span>{colle.examiner?.name}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full flex justify-between items-center">
|
|
<div className="flex items-center gap-1">
|
|
<Badge className={subjectColor}>
|
|
{colle.subject.name + " " + subjectEmoji}
|
|
</Badge>
|
|
{isFavorite && (
|
|
<Badge variant="secondary">
|
|
<Star className="h-3 w-3 fill-yellow-500 text-yellow-500 mr-1" />
|
|
Favori
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
{/* TODO: Attachments */}
|
|
{/* {colle.attachmentsCount > 0 && (
|
|
<div className="flex items-center gap-1 text-muted-foreground">
|
|
<Paperclip className="h-3.5 w-3.5" />
|
|
<span className="text-xs">{colle.attachmentsCount}</span>
|
|
</div>
|
|
)} */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|