ui: new colles card
This commit is contained in:
Nathan Lamy
parent
26cc3bf4bb
commit
cdc41c4a51
2 changed files with 77 additions and 79 deletions
|
|
@ -1,17 +1,11 @@
|
|||
import type React from "react";
|
||||
import type { Colle } from "~/lib/api";
|
||||
|
||||
import { Link } from "react-router";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
} from "~/components/ui/card";
|
||||
import { User, UserCheck, Paperclip, Star, MapPinHouse } from "lucide-react";
|
||||
import { Card } from "~/components/ui/card";
|
||||
import { User, Star, CalendarDays, MapPin } from "lucide-react";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
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
|
||||
const getSubjectColor = (_: string) => {
|
||||
|
|
@ -35,12 +29,12 @@ export default function ColleCard({
|
|||
isFavorite,
|
||||
}: ColleCardProps) {
|
||||
// TODO: Favorites
|
||||
const handleToggleFavorite = (e: React.MouseEvent) => {
|
||||
e.stopPropagation(); // Prevent card click
|
||||
e.preventDefault();
|
||||
const newValue = !isFavorite;
|
||||
onToggleFavorite(colle.id, newValue);
|
||||
};
|
||||
// const handleToggleFavorite = (e: React.MouseEvent) => {
|
||||
// e.stopPropagation(); // Prevent card click
|
||||
// e.preventDefault();
|
||||
// const newValue = !isFavorite;
|
||||
// onToggleFavorite(colle.id, newValue);
|
||||
// };
|
||||
|
||||
const subjectColor = getSubjectColor(colle.subject.name);
|
||||
const subjectEmoji = getSubjectEmoji(colle.subject.name);
|
||||
|
|
@ -49,84 +43,88 @@ export default function ColleCard({
|
|||
<Link to={`/colles/${colle.id}`}>
|
||||
<Card
|
||||
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>
|
||||
<div className="font-medium">{formatDate(colle.date)}</div>
|
||||
<div className="font-normal text-sm text-muted-foreground">
|
||||
{formatTime(colle.date)}
|
||||
</div>
|
||||
</div>
|
||||
{colle.grade && (
|
||||
<div className="flex items-center gap-2 h-full mb-3">
|
||||
<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 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>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="pb-0 pt-0 px-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<User className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">{colle.student.fullName}</span>
|
||||
<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-2">
|
||||
<UserCheck className="h-4 w-4 text-muted-foreground" />
|
||||
<span>{colle.examiner.name}</span>
|
||||
<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>
|
||||
|
||||
{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>
|
||||
</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="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
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<Badge className={subjectColor}>
|
||||
{colle.subject.name + " " + subjectEmoji}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{/* TODO: Attachments */}
|
||||
{/* {colle.attachmentsCount > 0 && (
|
||||
{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>
|
||||
</CardFooter>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export const formatTime = (date: string) => {
|
|||
return dt.toLocaleString({
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
})?.replace(":", "h") || "N/A";
|
||||
};
|
||||
|
||||
export const formatGrade = (grade?: number) => {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue