Fayorg/calendrier-avent
1
0
Fork 0
mirror of https://github.com/Fayorg/calendrier-avant.git synced 2026-05-27 17:18:38 +02:00
Code Activity

added michal's styles to the results page

Browse Source
This commit is contained in:
timhaller
2023-12-10 12:26:10 +01:00
parent bf49b94a03
commit 4157269251
28 changed files with 1099 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/custom/chart.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"
import {Santa} from "@components/custom/santa";
interface ChartProps {
data: {
@@ -11,25 +11,20 @@ interface ChartProps {
export function Chart({...props}: ChartProps) {
return (
<ResponsiveContainer width="100%" height={350}>
<BarChart data={props.data}>
<XAxis
dataKey="name"
stroke="#888888"
fontSize={12}
tickLine={false}
axisLine={false}
/>
<YAxis
stroke="#888888"
fontSize={12}
tickLine={false}
axisLine={false}
allowDecimals={false}
tickFormatter={(value) => `${value}`}
/>
<Bar dataKey="total" fill="#80a256" radius={[4, 4, 0, 0]} />
</BarChart>
</ResponsiveContainer>
<div className={"text-[#F0F0F0]"}>
<div className={"flex flex-row justify-between w-full items-end"}>
{props.data.map((item, index) => (
<Santa height={item.total} key={index}/>
))}
</div>
<div className={"flex flex-row justify-between w-full items-end mt-2"}>
{props.data.map((item, index) => (
<div className={"w-[100px] h-fit flex flex-col items-center"} key={index}>
<div className={"h-[14px] w-[3pt] bg-white"}/>
<span className={""}>{item.name}</span>
</div>
))}
</div>
</div>
)
}

3
components/custom/index.ts
View File

@@ -1,3 +1,4 @@
export { DayCard as DayCard } from './dayCard';
export { TestCard as TestCard } from './testCard';
export { GradingForm } from "./gradingForm";
export { GradingForm } from "./gradingForm";
export { Santa } from "./santa";

17
components/custom/santa.tsx Normal file
View File

@@ -0,0 +1,17 @@
import Image from "next/image";
import { santas } from "@santa/index";
interface SantaProps {
height: number
}
export function Santa({ ...props} : SantaProps) {
if (props.height <= 0 || props.height > 24) {
return <div className={"w-[100px] bg-blue-500"}/>
}
return (
<div className="flex flex-col items-center">
<Image src={santas[props.height - 1]} alt={"Santa"} width={100} height={200}/>
</div>
)
}

42
components/custom/testCard.tsx
View File

@@ -1,32 +1,50 @@
'use client';
import Calendar from "../../images/date.svg";
import Image from "next/image";
import { Ban, Snowflake, CircleOff } from "lucide-react";
export function TestCard({ data, error, isLoading }: { data: any; error: any; isLoading: boolean }) {
console.log(data);
if (isLoading)
return (
<div className="rounded-lg border-gray-700 border-2">
<h2>Aujourd&apos;hui</h2>
<h3>Chargement...</h3>
<div className={"w-fit h-fit relative"}>
<Image src={Calendar} alt={"Calendrier absolute"} />
<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
<Snowflake width={36} height={36} color={"#000000"} className={"animate-spin place-self-center"} />
<span className={"text-black text-xs"}>Chargement</span>
</div>
</div>
);
if (error)
return (
<div className="rounded-lg border-gray-700 border-2">
<h2>Aujourd&apos;hui</h2>
<h3>Une erreur est survenue, merci d&apos;essayer dans quelques minutes</h3>
<div className={"w-fit h-fit relative"}>
<Image src={Calendar} alt={"Calendrier absolute"} />
<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
<Ban width={36} height={36} color={"#000000"} className={"place-self-center"}/>
<span className={"text-black text-xs"}>Erreur</span>
</div>
</div>
);
if (data.status == 404)
return (
<div className="rounded-lg border-gray-700 border-2">
<h2>{"Aujourd'hui " + new Date().toLocaleDateString()}</h2>
<h3>Pas de test prévu pour aujourd&apos;hui</h3>
<div className={"w-fit h-fit relative"}>
<Image src={Calendar} alt={"Calendrier absolute"} />
<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
<CircleOff width={36} height={36} color={"#000000"} className={"place-self-center"}/>
<span className={"text-black text-xs"}>Pas de test</span>
</div>
</div>
);
return (
<div className="rounded-lg border-gray-700 border-2">
<h2>{"Aujourd'hui " + new Date(data.testOn).toLocaleDateString()}</h2>
<h3>{data.testOf.firstName + ' ' + data.testOf.lastName}</h3>
<div className={"w-fit h-fit relative"}>
<Image src={Calendar} alt={"Calendrier absolute"} />
<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
<span className={"text-black text-[36px] font-medium"}>{new Date().getDate()}</span>
<span className={"text-black text-xs"}>{data.testOf.firstName}</span>
</div>
</div>
);
}

2
components/ui/card.tsx
View File

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
"rounded-lg border bg-black text-[#F0F0F0] shadow-sm",
className
)}
{...props}

2
components/ui/input.tsx
View File

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex flex-1 h-[54px] w-full rounded-[20px] border-none bg-primary px-3 py-3 text-[14px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-textFaded placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}