ui: new colles card

app/components/home/colle-card.tsx

@@ -1,17 +1,11 @@
-import type React from "react";
 import type { Colle } from "~/lib/api";
 
 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 { 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) => {
+  // 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 subjectEmoji = getSubjectEmoji(colle.subject.name);
@@ -49,18 +43,25 @@ 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 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="font-medium">{formatDate(colle.date)}</div>
+              <div className="flex items-center justify-between">
-            <div className="font-normal text-sm text-muted-foreground">
+                <h3 className="text-lg font-bold text-foreground">
-              {formatTime(colle.date)}
+                  {colle.student.fullName}
-            </div>
+                </h3>
-          </div>
                 {colle.grade && (
-            <div className="flex items-center gap-2 h-full mb-3">
+                  <div className="flex items-center gap-2 h-full">
-              <Button
+                    {/* <Button
                       variant="ghost"
                       size="icon"
                       className={`h-8 w-8 ${
@@ -69,10 +70,12 @@ export default function ColleCard({
                       onClick={handleToggleFavorite}
                     >
                       <Star
-                  className={`h-5 w-5 ${isFavorite ? "fill-yellow-500" : ""}`}
+                        className={`h-5 w-5 ${
+                          isFavorite ? "fill-yellow-500" : ""
+                        }`}
                       />
                       <span className="sr-only">Ajouter aux favoris</span>
-              </Button>
+                    </Button> */}
                     <div
                       className={`px-2 py-1 rounded-md text-sm font-medium ${subjectColor}`}
                     >
@@ -80,32 +83,26 @@ export default function ColleCard({
                     </div>
                   </div>
                 )}
-        </CardHeader>
+              </div>
-
-        <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>
 
-              <div className="flex items-center gap-2">
+            <div className="text-sm text-primary grid gap-1">
-                <UserCheck className="h-4 w-4 text-muted-foreground" />
+              <div className="flex items-center gap-1">
-                <span>{colle.examiner.name}</span>
+                <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>
 
-              {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}>
@@ -126,7 +123,8 @@ export default function ColleCard({
               </div>
             )} */}
             </div>
-        </CardFooter>
+          </div>
+        </div>
       </Card>
     </Link>
   );

app/lib/utils.ts

@@ -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) => {