khollise/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: new colles card

Browse source
This commit is contained in:
Nathan Lamy 2025-08-19 14:00:33 +02:00
parent 26cc3bf4bb
commit cdc41c4a51
2 changed files with 77 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
app/components/home/colle-card.tsx
View file

@ -1,17 +1,11 @@
import type React from "react";
import type { Colle } from "~/lib/api"; import type { Colle } from "~/lib/api";
import { Link } from "react-router"; import { Link } from "react-router";
import { import { Card } from "~/components/ui/card";
Card, import { User, Star, CalendarDays, MapPin } from "lucide-react";
CardContent,
CardHeader,
CardFooter,
} from "~/components/ui/card";
import { User, UserCheck, Paperclip, Star, MapPinHouse } from "lucide-react";
import { Badge } from "~/components/ui/badge"; import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { formatDate, formatGrade, formatTime } from "~/lib/utils"; import { cn, formatDate, formatGrade, formatTime } from "~/lib/utils";
// TODO: Preferences for subject colors // TODO: Preferences for subject colors
const getSubjectColor = (_: string) => { const getSubjectColor = (_: string) => {
@ -35,12 +29,12 @@ export default function ColleCard({
isFavorite, isFavorite,
}: ColleCardProps) { }: ColleCardProps) {
// TODO: Favorites // TODO: Favorites
const handleToggleFavorite = (e: React.MouseEvent) => { // const handleToggleFavorite = (e: React.MouseEvent) => {
e.stopPropagation(); // Prevent card click // e.stopPropagation(); // Prevent card click
e.preventDefault(); // e.preventDefault();
const newValue = !isFavorite; // const newValue = !isFavorite;
onToggleFavorite(colle.id, newValue); // onToggleFavorite(colle.id, newValue);
}; // };
const subjectColor = getSubjectColor(colle.subject.name); const subjectColor = getSubjectColor(colle.subject.name);
const subjectEmoji = getSubjectEmoji(colle.subject.name); const subjectEmoji = getSubjectEmoji(colle.subject.name);
@ -49,84 +43,88 @@ export default function ColleCard({
<Link to={`/colles/${colle.id}`}> <Link to={`/colles/${colle.id}`}>
<Card <Card
id={`colle-${colle.id}`} id={`colle-${colle.id}`}
className="h-full cursor-pointer hover:shadow-md transition-shadow border-primary" className="p-0 overflow-hidden hover:shadow-lg transition-shadow max-w-sm"
> >
<CardHeader className="pb-0 pt-3 px-4 flex flex-row items-center justify-between"> <div className="flex min-h-40">
<div> <div
<div className="font-medium">{formatDate(colle.date)}</div> className={cn(
<div className="font-normal text-sm text-muted-foreground"> "p-2 flex flex-col justify-center items-center min-w-[4px]",
{formatTime(colle.date)} subjectColor
</div> )}
</div> ></div>
{colle.grade && (
<div className="flex items-center gap-2 h-full mb-3"> <div className="flex-1 p-3 flex flex-col justify-between">
<Button <div>
variant="ghost" <div className="flex items-center justify-between">
size="icon" <h3 className="text-lg font-bold text-foreground">
className={`h-8 w-8 ${ {colle.student.fullName}
isFavorite ? "text-yellow-500" : "text-muted-foreground" </h3>
}`} {colle.grade && (
onClick={handleToggleFavorite} <div className="flex items-center gap-2 h-full">
> {/* <Button
<Star variant="ghost"
className={`h-5 w-5 ${isFavorite ? "fill-yellow-500" : ""}`} size="icon"
/> className={`h-8 w-8 ${
<span className="sr-only">Ajouter aux favoris</span> isFavorite ? "text-yellow-500" : "text-muted-foreground"
</Button> }`}
<div onClick={handleToggleFavorite}
className={`px-2 py-1 rounded-md text-sm font-medium ${subjectColor}`} >
> <Star
{formatGrade(colle.grade)}/20 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> </div>
)}
</CardHeader>
<CardContent className="pb-0 pt-0 px-4"> <div className="text-sm text-primary grid gap-1">
<div className="flex items-center justify-between"> <div className="flex items-center gap-1">
<div className="space-y-1"> <CalendarDays className="h-3 w-3" />
<div className="flex items-center gap-2"> <span>
<User className="h-4 w-4 text-muted-foreground" /> {formatDate(colle.date)} à {formatTime(colle.date)}
<span className="font-medium">{colle.student.fullName}</span> </span>
</div> </div>
<div className="flex items-center gap-1">
<div className="flex items-center gap-2"> <MapPin className="h-3 w-3" />
<UserCheck className="h-4 w-4 text-muted-foreground" /> <span>{colle.room?.name}</span>
<span>{colle.examiner.name}</span> </div>
<div className="flex items-center gap-1">
<User className="h-3 w-3" />
<span>{colle.examiner?.name}</span>
</div> </div>
{colle.room && (
<div className="flex items-center gap-2">
<MapPinHouse className="h-4 w-4 text-muted-foreground" />
<span>{colle.room.name}</span>
</div>
)}
</div> </div>
</div>
</CardContent>
<CardFooter className="pt-1 pb-3 px-4 flex flex-col items-start"> <div className="w-full flex justify-between items-center">
<div className="w-full flex justify-between items-center"> <div className="flex items-center gap-1">
<div className="flex items-center gap-1"> <Badge className={subjectColor}>
<Badge className={subjectColor}> {colle.subject.name + " " + subjectEmoji}
{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> </Badge>
)} {isFavorite && (
</div> <Badge variant="secondary">
{/* TODO: Attachments */} <Star className="h-3 w-3 fill-yellow-500 text-yellow-500 mr-1" />
{/* {colle.attachmentsCount > 0 && ( Favori
</Badge>
)}
</div>
{/* TODO: Attachments */}
{/* {colle.attachmentsCount > 0 && (
<div className="flex items-center gap-1 text-muted-foreground"> <div className="flex items-center gap-1 text-muted-foreground">
<Paperclip className="h-3.5 w-3.5" /> <Paperclip className="h-3.5 w-3.5" />
<span className="text-xs">{colle.attachmentsCount}</span> <span className="text-xs">{colle.attachmentsCount}</span>
</div> </div>
)} */} )} */}
</div>
</div> </div>
</CardFooter> </div>
</Card> </Card>
</Link> </Link>
); );

2
app/lib/utils.ts
View file

@ -63,7 +63,7 @@ export const formatTime = (date: string) => {
return dt.toLocaleString({ return dt.toLocaleString({
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
}); })?.replace(":", "h") || "N/A";
}; };
export const formatGrade = (grade?: number) => { export const formatGrade = (grade?: number) => {