ui: rework colle details
All checks were successful
Deploy to Netlify / Deploy to Netlify (push) Successful in 1m55s
All checks were successful
Deploy to Netlify / Deploy to Netlify (push) Successful in 1m55s
This commit is contained in:
Nathan Lamy
parent
21cb6a8b9f
commit
70ed93e88c
2 changed files with 53 additions and 76 deletions
|
|
@ -160,6 +160,7 @@ export const getColles = async (startDate: DateTime) => {
|
|||
};
|
||||
|
||||
export interface Colle {
|
||||
relatives: Colle[];
|
||||
id: number;
|
||||
date: string; // ISO date string
|
||||
subject: {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import "katex/dist/katex.min.css";
|
|||
import { DomUtils, parseDocument } from "htmlparser2";
|
||||
import Latex from "react-latex-next";
|
||||
import { useState } from "react";
|
||||
import { Navigate, useNavigate, useParams } from "react-router";
|
||||
import { Link, Navigate, useNavigate, useParams } from "react-router";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import {
|
||||
|
|
@ -19,6 +19,7 @@ import {
|
|||
RefreshCw,
|
||||
Share2,
|
||||
ExternalLink,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { Separator } from "~/components/ui/separator";
|
||||
import ColleDetailsSkeleton from "~/components/details/skeleton-details";
|
||||
|
|
@ -27,19 +28,17 @@ import Error from "~/components/error";
|
|||
import { Badge } from "~/components/ui/badge";
|
||||
import { AUTH_ERROR, refreshColle, useColle, useUser } from "~/lib/api";
|
||||
import { toast } from "sonner";
|
||||
import { formatDate, formatGrade, formatTime, goBack } from "~/lib/utils";
|
||||
import {
|
||||
formatDate,
|
||||
formatGrade,
|
||||
formatTime,
|
||||
getColorClass,
|
||||
getSubjectColor,
|
||||
getSubjectEmoji,
|
||||
goBack,
|
||||
} from "~/lib/utils";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
// TODO: Preferences for subject colors
|
||||
const getSubjectColor = (_: string) => {
|
||||
// Mock placeholder function
|
||||
return "bg-blue-100 text-blue-800"; // Default color
|
||||
};
|
||||
const getSubjectEmoji = (_: string) => {
|
||||
// Mock placeholder function
|
||||
return "📚"; // Default emoji
|
||||
};
|
||||
|
||||
// TODO: Move all code to components
|
||||
export default function ColleDetailPage() {
|
||||
const { user, isLoading: isUserLoading, error: userError } = useUser();
|
||||
|
|
@ -143,8 +142,10 @@ export default function ColleDetailPage() {
|
|||
});
|
||||
};
|
||||
|
||||
const subjectColor = getSubjectColor(colle.subject.name);
|
||||
const subjectEmoji = getSubjectEmoji(colle.subject.name);
|
||||
const subjectColor = getColorClass(
|
||||
getSubjectColor(colle.subject.name, user.preferences)
|
||||
);
|
||||
const subjectEmoji = getSubjectEmoji(colle.subject.name, user.preferences);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-6 px-4 pb-20 md:pb-6 md:py-8">
|
||||
|
|
@ -154,6 +155,7 @@ export default function ColleDetailPage() {
|
|||
Retour
|
||||
</Button>
|
||||
<div className="flex md:hidden items-center gap-2">
|
||||
<div className="space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
|
|
@ -166,6 +168,15 @@ export default function ColleDetailPage() {
|
|||
/>
|
||||
<span className="sr-only">Recharger</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={handleShare}
|
||||
>
|
||||
<Share2 className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -174,7 +185,9 @@ export default function ColleDetailPage() {
|
|||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-2xl">Résumé de Colle</CardTitle>
|
||||
<CardTitle className="text-xl">
|
||||
Colle de {colle.subject.name}
|
||||
</CardTitle>
|
||||
{colle.grade && (
|
||||
<div
|
||||
className={`md:hidden px-3 py-1 rounded-md text-sm font-medium ${subjectColor}`}
|
||||
|
|
@ -217,7 +230,7 @@ export default function ColleDetailPage() {
|
|||
<span className="sr-only">Recharger</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
{/* <Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={`h-9 w-9 ${
|
||||
|
|
@ -233,7 +246,7 @@ export default function ColleDetailPage() {
|
|||
}`}
|
||||
/>
|
||||
<span className="sr-only">Ajouter aux favoris</span>
|
||||
</Button>
|
||||
</Button> */}
|
||||
|
||||
{colle.grade && (
|
||||
<div
|
||||
|
|
@ -246,9 +259,9 @@ export default function ColleDetailPage() {
|
|||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-4">
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground mb-1">
|
||||
Date
|
||||
|
|
@ -272,10 +285,10 @@ export default function ColleDetailPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground mb-1">
|
||||
Étudiant
|
||||
Élève
|
||||
</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<User className="h-4 w-4" />
|
||||
|
|
@ -283,29 +296,28 @@ export default function ColleDetailPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* TODO: Colles groups - others students */}
|
||||
{/* {colle.group?.length > 0 && (
|
||||
{colle.relatives?.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground mb-1">
|
||||
Autres élèves
|
||||
</h3>
|
||||
{colle.group.map((linkedColle) => (
|
||||
{colle.relatives.map((linkedColle) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4" />
|
||||
<Link
|
||||
to={`/colles/${linkedColle.id}`}
|
||||
key={linkedColle.id}
|
||||
>
|
||||
{linkedColle.student}
|
||||
{linkedColle.student.fullName}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)} */}
|
||||
)}
|
||||
</div>
|
||||
|
||||
{colle.room && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground mb-1">
|
||||
Salle
|
||||
|
|
@ -377,42 +389,6 @@ export default function ColleDetailPage() {
|
|||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Mobile Action Bar - Fixed at Bottom */}
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border md:hidden z-50">
|
||||
<div className="container mx-auto px-4 py-2 flex items-center justify-around">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
className={`flex-1 h-12 ${
|
||||
// TODO: Use a proper favorite state
|
||||
false ? "text-yellow-500" : "text-muted-foreground"
|
||||
}`}
|
||||
onClick={handleToggleFavorite}
|
||||
>
|
||||
<Star
|
||||
className={`h-5 w-5 mr-2 ${
|
||||
// TODO: Use a proper favorite state
|
||||
false ? "fill-yellow-500" : ""
|
||||
}`}
|
||||
/>
|
||||
{/* TODO: */}
|
||||
{false ? "Favori" : "Ajouter"}
|
||||
</Button>
|
||||
|
||||
<Separator orientation="vertical" className="h-8" />
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
className="flex-1 h-12"
|
||||
onClick={handleShare}
|
||||
>
|
||||
<Share2 className="h-5 w-5 mr-2" />
|
||||
Partager
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue