From d4625f44b7f55448a026b00a83342cafaa0c80d7 Mon Sep 17 00:00:00 2001
From: timhaller <67918170+timhaller@users.noreply.github.com>
Date: Sun, 10 Dec 2023 21:12:49 +0100
Subject: [PATCH] changed input and output on gradeForm

---
 app/page.tsx                      |  2 +-
 app/play/page.tsx                 |  3 +-
 components/custom/gradingForm.tsx | 66 +++++++++++++------------------
 images/your-grade.svg             |  8 ++--
 package-lock.json                 | 34 ++++++++++++++++
 package.json                      |  1 +
 6 files changed, 68 insertions(+), 46 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 6dc0382..f0bd99a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -31,7 +31,7 @@ export default function Home() {
 		<div className={"w-full h-screen text-[#F0F0F0] bg-black p-12 flex flex-col items-center justify-center gap-y-28"}>
 			<Image src={logo} alt={"Logo"} width={100} height={200} className={"mx-auto w-full md:w-[400px]"}/>
 			<form onSubmit={handleSubmit} className={"flex flex-row gap-4 w-full md:w-[400px]"}>
-				<Input type="text" placeholder="Mot de passe" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)}></Input>
+				<Input type="password" placeholder="Mot de passe" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)}></Input>
 				<input type="submit" value="Submit" id="submit" className={"hidden"} />
 				<label htmlFor="submit" className={"w-[54px] h-[54px] bg-secondary rounded-[20px] contents-none grid place-content-center"}>
 					<Check width={24} height={24} color={"white"}/>
diff --git a/app/play/page.tsx b/app/play/page.tsx
index f0a2654..709cb7a 100644
--- a/app/play/page.tsx
+++ b/app/play/page.tsx
@@ -27,7 +27,6 @@ export default function Play() {
 		<div className={"w-full h-[100vh] text-[#F0F0F0] bg-black p-12 flex flex-col items-center justify-center gap-y-28"}>
 			<Image src={Logo} alt={"Logo"} width={100} height={200} className={"mx-auto w-full md:w-[400px]"}/>
 			<TestCard data={data} error={error} isLoading={isLoading} />
-			{data && console.log(data)}
 			{data && data.status == 200 && password && <GradingForm password={password} data={data} />}
 			<div>
 				<button
@@ -36,7 +35,7 @@ export default function Play() {
 						router.push('/');
 					}}
 				>
-					<Image src={LogOut} alt={"Logo"} width={100} height={200} className={"mx-auto w-full md:w-[400px]"}/>
+					<Image src={LogOut} alt={"Logo"} width={50} height={50} className={"mx-auto w-full md:w-[400px]"}/>
 				</button>
 			</div>
 		</div>
diff --git a/components/custom/gradingForm.tsx b/components/custom/gradingForm.tsx
index a59e47f..d0ef52a 100644
--- a/components/custom/gradingForm.tsx
+++ b/components/custom/gradingForm.tsx
@@ -2,6 +2,9 @@
 
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import Image from 'next/image';
+import YourGrade from '@images/your-grade.svg';
+import {Check} from "lucide-react";
 
 export function GradingForm({ password, data }: { password: string; data: any }) {
 	const [grade, setGrade] = useState<number>(0);
@@ -25,51 +28,36 @@ export function GradingForm({ password, data }: { password: string; data: any })
 
 	if (data.vote.hasVoted || hasVoted) {
 		return (
-			<div>
-				<p>Vous avez déjà voté, merci !</p>
-				<p>{'Vous avez mis ' + (data.vote.hasVoted ? data.vote.grade : grade) + ' !'}</p>
+			<div className={"w-full md:w-[400px]"}>
+				<div className={"flex flex-row justify-evenly"}>
+					<Image src={YourGrade} alt={YourGrade} width={100}/>
+					<span className={"w-[54px] h-[54px] bg-accent rounded-[20px] contents-none grid place-content-center"}>{data.vote.hasVoted ? data.vote.grade : grade}</span>
+				</div>
 			</div>
 		);
 	}
 
 	return (
-		<div>
-			<p>Cliquer sur la note à la fin de la présentation :</p>
+		<div className={"w-full md:w-[400px]"}>
 			<form onSubmit={handleSubmit}>
-				<input type="radio" id="one" name="grade" checked={grade == 1} onChange={(e) => setGrade(1)}></input>
-				<label htmlFor="one">1</label>
-				<br></br>
-				<input type="radio" id="15" name="grade" checked={grade == 1.5} onChange={(e) => setGrade(1.5)}></input>
-				<label htmlFor="one">1.5</label>
-				<br></br>
-				<input type="radio" id="2" name="grade" checked={grade == 2} onChange={(e) => setGrade(2)}></input>
-				<label htmlFor="one">2</label>
-				<br></br>
-				<input type="radio" id="25" name="grade" checked={grade == 2.5} onChange={(e) => setGrade(2.5)}></input>
-				<label htmlFor="one">2.5</label>
-				<br></br>
-				<input type="radio" id="3" name="grade" checked={grade == 3} onChange={(e) => setGrade(3)}></input>
-				<label htmlFor="one">3</label>
-				<br></br>
-				<input type="radio" id="35" name="grade" checked={grade == 3.5} onChange={(e) => setGrade(3.5)}></input>
-				<label htmlFor="one">3.5</label>
-				<br></br>
-				<input type="radio" id="4" name="grade" checked={grade == 4} onChange={(e) => setGrade(4)}></input>
-				<label htmlFor="one">4</label>
-				<br></br>
-				<input type="radio" id="45" name="grade" checked={grade == 4.5} onChange={(e) => setGrade(4.5)}></input>
-				<label htmlFor="one">4.5</label>
-				<br></br>
-				<input type="radio" id="5" name="grade" checked={grade == 5} onChange={(e) => setGrade(5)}></input>
-				<label htmlFor="one">5</label>
-				<br></br>
-				<input type="radio" id="55" name="grade" checked={grade == 5.5} onChange={(e) => setGrade(5.5)}></input>
-				<label htmlFor="one">5.5</label>
-				<br></br>
-				<input type="radio" id="6" name="grade" checked={grade == 6} onChange={(e) => setGrade(6)}></input>
-				<label htmlFor="one">6</label>
-				<br></br>
-				<input type="submit" value={'Envoyer'}></input>
+				<div>
+					<input
+						type="range"
+						min="2"
+						max="12"
+						id="gradeSelector"
+						className={"w-full h-4 bg-white range range:bg-white text-white"}
+						onChange={(e) => setGrade(Number(e.target.value) / 2)}
+					/>
+				</div>
+				<div className={"flex flex-row justify-evenly"}>
+					<Image src={YourGrade} alt={YourGrade} width={100}/>
+					<span className={"w-[54px] h-[54px] bg-accent rounded-[20px] contents-none grid place-content-center"}>{grade}</span>
+					<input type="submit" value={'Envoyer'} id="submit" className={"hidden"}></input>
+					<label htmlFor="submit" className={"w-[54px] h-[54px] bg-secondary rounded-[20px] contents-none grid place-content-center"}>
+						<Check width={24} height={24} color={"white"}/>
+					</label>
+				</div>
 			</form>
 		</div>
 	);
diff --git a/images/your-grade.svg b/images/your-grade.svg
index d197be9..99afb48 100644
--- a/images/your-grade.svg
+++ b/images/your-grade.svg
@@ -1,12 +1,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="133" height="26" fill="none" viewBox="0 0 133 26">
   <g clip-path="url(#a)">
-    <path fill="#F0F0F0" fill-rule="evenodd" d="M28.112 21.826c-.8.94-1.863 1.984-2.94 2.58-1.56.863-3.14.903-4.387-.495-.57-.64-.82-1.37-.799-2.147-1.415 1.309-3.066 2.706-4.575 3.335-1.694.705-3.253.598-4.456-.687-.59-.631-.93-1.474-1.008-2.5-.09-1.2.195-2.704.759-4.358.418-1.228.991-2.55 1.644-3.895-3.36 3.607-4.807 5.821-9.343 9.082a1.262 1.262 0 0 1-1.755-.28 1.246 1.246 0 0 1 .282-1.746c4.947-3.556 6.09-5.85 10.351-10.2 1.852-1.89 5.169-6.566 6.81-8.647.158-.2.556-.724.633-.784.604-.47 1.138-.253 1.39-.115.146.08.972.54.554 1.598-.927 2.346-6.247 10.099-8.185 15.789-.371 1.09-.615 2.092-.641 2.946-.018.58.04 1.076.35 1.407.314.335.716.358 1.144.252.478-.118.978-.373 1.487-.694 2.35-1.481 4.779-4.287 5.916-5.123 1-.737 2.017-1.427 3.152-1.945.48-.22 1.747-.754 1.926-.819.993-.356 1.505.492 1.54.551.134.235.2.507.147.823a1.155 1.155 0 0 1-.456.773c-.018.016-.124.1-.37.213-.893.412-3 1.983-4.144 3.623-.257.369-.465.738-.57 1.1-.084.285-.103.564.098.79.363.406.83.219 1.284-.032 1.328-.735 2.598-2.364 3.119-3.16.502-.768 1.677-2.83 1.912-3.079.608-.645 1.258-.406 1.488-.298.124.058 1.037.581.588 1.78-.245.656-.578 1.342-.763 2.01-.149.54-.181 1.074.427 1.476.577.382.734 1.159.35 1.733a1.262 1.262 0 0 1-1.744.348c-.56-.37-.953-.775-1.215-1.205Z" clip-rule="evenodd"/>
-    <path fill="#F0F0F0" fill-rule="evenodd" d="M9.812 10.483a1.254 1.254 0 0 1-1.207-1.299 1.255 1.255 0 0 1 1.306-1.2c4.158.163 8.042.433 12.208-.155a1.257 1.257 0 0 1 1.42 1.063 1.252 1.252 0 0 1-1.067 1.413c-4.32.61-8.348.346-12.66.178Zm38.985 6.81c1.096-.986 2.168-1.845 3.035-2.307 1.265-.674 2.32-.579 2.947-.074 1.245 1 1.2 2.632.555 4.422-.307.852-.726 1.746-.88 2.547-.063.328-.13.645.162.835.231.152.48.03.745-.11.385-.202.771-.518 1.158-.886 1.816-1.728 3.562-4.49 4.444-5.218.95-.784 2.04-1.453 3.178-1.934.538-.228 1.988-.656 2.214-.655.6.003.907.306 1.068.564 1.89-.413 3.145.102 3.903.945.044.05.087.1.128.153a4.303 4.303 0 0 0 1.009-.214c2.791-.962 4.99-3.42 7.069-5.4.601-.574 1.209-1.13 1.787-1.716.694-.849 1.243-1.464 1.529-1.72.389-.35.707-.323.769-.327.45-.03.754.147.97.363.147.145.672.716.195 1.52a7.926 7.926 0 0 1-.205.271 19.073 19.073 0 0 1-1.49 1.666c-1.778 2.195-4.55 6.025-6.018 9.054-.396.817-.695 1.568-.83 2.202-.04.193-.065.371-.065.533 0 .07-.021.136.01.182.153.22.399.297.68.32.336.027.712-.023 1.116-.119.952-.226 2.019-.699 3.087-1.298-.04-.722.126-1.51.473-2.295.613-1.384 1.787-2.774 3.025-3.659 1.96-1.4 4.033-1.434 5.078.181.231.358.367.916.052 1.622-.383.856-1.943 2.51-3.994 4.074-.365.278-.745.553-1.135.822.573.155 1.329.198 2.3.13 1.022-.071 2.136-.296 3.058-.754a1.261 1.261 0 0 1 1.686.56c.31.618.057 1.37-.564 1.677-1.209.6-2.664.917-4.005 1.011-2.474.172-4.007-.34-4.9-1.125-1.703.928-3.41 1.588-4.77 1.67-1.421.085-2.549-.372-3.26-1.403-.356-.516-.525-1.232-.42-2.12.107-.898.505-2.042 1.113-3.296.206-.426.437-.867.686-1.316a11.45 11.45 0 0 1-2.204 1.053 6.562 6.562 0 0 1-1.06.267c.003.3-.019.613-.068.933-.55 3.577-4.475 8.089-9.913 6.13-1.526-.55-2.293-1.382-2.622-2.252a2.862 2.862 0 0 1-.15-.573c-.728.843-1.497 1.627-2.254 2.164-1.389.988-2.783 1.2-3.987.41-1.518-.994-1.571-2.62-.964-4.437.293-.88.734-1.81.941-2.645a2.689 2.689 0 0 0 .088-.628c-.298.145-.825.417-1.222.71-2.724 2.007-6.439 6.23-7.336 6.926-.57.443-1.03.384-1.228.343a1.25 1.25 0 0 1-.785-.501 1.285 1.285 0 0 1-.253-.818c.004-.165.063-.475.236-.858.312-.689 1.109-2 1.409-2.62.096-.2.206-.405.326-.617a17.25 17.25 0 0 1-2.167 1.027 1.26 1.26 0 0 1-1.63-.706 1.249 1.249 0 0 1 .709-1.62 14.09 14.09 0 0 0 4.177-2.523c.405-.356 1.113-1.29 1.537-1.697.3-.287.585-.433.757-.487.62-.193 1.068.016 1.388.373.16.178.425.544.316 1.22-.104.64-.372 1.336-.733 2.048Zm20.925.666c-.951-.18-1.863-.553-2.63-1.117.024.017.09.059.09.059s-.286-.25-.487-.448c-1.038.64-2.892 2.078-4.001 3.586-.303.411-.55.824-.678 1.226-.073.232-.116.454-.04.657.13.345.52.564 1.125.781 3.629 1.307 6.204-1.77 6.572-4.157.03-.203.05-.4.05-.587Zm14.643.72c.819-.65 1.624-1.442 2.198-2.043a4.618 4.618 0 0 0-.53.332 7.123 7.123 0 0 0-1.668 1.712Zm27.421-2.181a4.637 4.637 0 0 1-.329-.585c-.608-1.293-.149-2.626.952-3.63a5.938 5.938 0 0 1 2.872-1.393c.822-.138 1.593-.04 2.178.263.885.459 1.287 1.076 1.417 1.7.165.796-.156 1.79-1.098 2.756a8.966 8.966 0 0 1-1.048.9c.508.068 1.048.095 1.605.094 3.756-.01 8.219-1.36 9.945-1.88a1.26 1.26 0 0 1 1.567.835 1.25 1.25 0 0 1-.839 1.559c-1.85.556-6.641 1.975-10.667 1.986-1.693.005-3.246-.26-4.487-.86-2.98 1.501-6.69 2.682-9.082 2.646a1.255 1.255 0 0 1-1.238-1.269 1.255 1.255 0 0 1 1.277-1.23c1.841.027 4.579-.79 6.975-1.892Zm2.244-1.179c.33-.2.64-.401.924-.604.472-.335.87-.668 1.155-.993.084-.095.17-.23.229-.329a.47.47 0 0 0-.042-.024c-.17-.088-.4-.05-.639-.006a3.367 3.367 0 0 0-1.167.473 2.332 2.332 0 0 0-.644.58c-.097.136-.185.282-.112.438.081.171.18.326.296.465Z" clip-rule="evenodd"/>
-    <path fill="#F0F0F0" fill-rule="evenodd" d="M129.457 15.645a4.147 4.147 0 0 0-.113-.091 3.045 3.045 0 0 0-.515-.298c-.661-.316-1.556-.59-2.61-.885a1.25 1.25 0 1 1 .68-2.407c1.494.418 2.708.827 3.509 1.297.825.483 1.301 1.073 1.486 1.705.266.908-.04 2.187-1.726 3.744-.509.47-1.305.44-1.777-.066a1.246 1.246 0 0 1 .066-1.766c.377-.348.659-.654.847-.934.064-.094.125-.233.153-.299ZM75.41 11.503c-.694 0-1.257-.56-1.257-1.25s.563-1.25 1.257-1.25c3.633 0 7.21 0 10.805-.59a1.257 1.257 0 0 1 1.445 1.029 1.251 1.251 0 0 1-1.035 1.437c-3.733.614-7.444.624-11.215.624Z" clip-rule="evenodd"/>
+    <path fill="#F0F0F0" fill-rule="evenodd" d="M28.112 21.742c-.8.94-1.863 1.984-2.94 2.58-1.56.863-3.14.903-4.387-.495-.57-.639-.82-1.369-.799-2.147-1.415 1.309-3.066 2.706-4.575 3.335-1.694.705-3.253.598-4.456-.687-.59-.631-.93-1.474-1.008-2.5-.09-1.2.195-2.704.759-4.358.418-1.228.991-2.55 1.644-3.895-3.36 3.607-4.807 5.821-9.343 9.082a1.263 1.263 0 0 1-1.755-.28 1.246 1.246 0 0 1 .282-1.746c4.947-3.556 6.09-5.85 10.351-10.2 1.852-1.89 5.169-6.566 6.81-8.647.158-.2.556-.724.633-.784.604-.47 1.138-.253 1.39-.115.146.08.972.54.554 1.598-.927 2.346-6.247 10.099-8.185 15.789-.371 1.09-.615 2.092-.641 2.946-.018.58.04 1.076.35 1.407.314.335.716.358 1.144.252.478-.118.978-.373 1.487-.694 2.35-1.481 4.779-4.287 5.916-5.123 1-.737 2.017-1.427 3.152-1.945.48-.22 1.747-.754 1.926-.819.993-.356 1.505.492 1.54.551.134.235.2.507.147.822a1.155 1.155 0 0 1-.456.774c-.018.016-.124.1-.37.213-.893.412-3 1.983-4.144 3.623-.257.369-.465.738-.57 1.1-.084.285-.103.564.098.79.363.406.83.219 1.284-.032 1.328-.735 2.598-2.364 3.119-3.16.502-.768 1.677-2.83 1.912-3.079.608-.645 1.258-.406 1.488-.298.124.058 1.037.581.588 1.78-.245.656-.578 1.342-.763 2.01-.149.54-.181 1.074.427 1.476.577.382.734 1.159.35 1.733a1.262 1.262 0 0 1-1.744.348c-.56-.37-.953-.775-1.215-1.205Z" clip-rule="evenodd"/>
+    <path fill="#F0F0F0" fill-rule="evenodd" d="M9.812 10.399A1.254 1.254 0 0 1 8.605 9.1a1.255 1.255 0 0 1 1.306-1.2c4.158.163 8.042.433 12.208-.155a1.257 1.257 0 0 1 1.42 1.063 1.252 1.252 0 0 1-1.067 1.413c-4.32.61-8.348.346-12.66.178Zm38.985 6.81c1.096-.986 2.168-1.845 3.035-2.307 1.265-.674 2.32-.579 2.947-.074 1.245 1 1.2 2.633.555 4.422-.307.852-.726 1.746-.88 2.547-.063.328-.13.645.162.835.231.152.48.03.745-.11.385-.202.771-.518 1.158-.886 1.816-1.728 3.562-4.49 4.444-5.218.95-.784 2.04-1.453 3.178-1.934.538-.228 1.988-.656 2.214-.655.6.003.907.305 1.068.564 1.89-.413 3.145.102 3.903.945.044.05.087.1.128.153a4.303 4.303 0 0 0 1.009-.214c2.791-.961 4.99-3.42 7.069-5.4.601-.574 1.209-1.13 1.787-1.716.694-.849 1.243-1.464 1.529-1.72.389-.35.707-.323.769-.327.45-.03.754.147.97.363.147.145.672.716.195 1.52a7.925 7.925 0 0 1-.205.271 19.073 19.073 0 0 1-1.49 1.667c-1.778 2.194-4.55 6.024-6.018 9.053-.396.817-.695 1.568-.83 2.203a2.61 2.61 0 0 0-.065.532c0 .07-.021.136.01.182.153.22.399.297.68.32.336.027.712-.023 1.116-.119.952-.226 2.019-.699 3.087-1.298-.04-.722.126-1.51.473-2.295.613-1.384 1.787-2.774 3.025-3.659 1.96-1.4 4.033-1.433 5.078.181.231.358.367.916.052 1.622-.383.856-1.943 2.51-3.994 4.074-.365.278-.745.553-1.135.822.573.155 1.329.198 2.3.13 1.022-.071 2.136-.296 3.058-.754a1.261 1.261 0 0 1 1.686.56c.31.618.057 1.37-.564 1.677-1.209.6-2.664.917-4.005 1.011-2.474.172-4.007-.34-4.9-1.125-1.703.928-3.41 1.588-4.77 1.67-1.421.085-2.549-.372-3.26-1.403-.356-.516-.525-1.232-.42-2.12.107-.898.505-2.042 1.113-3.296.206-.426.437-.867.686-1.316a11.45 11.45 0 0 1-2.204 1.053 6.552 6.552 0 0 1-1.06.267c.003.301-.019.613-.068.933-.55 3.577-4.475 8.089-9.913 6.13-1.526-.55-2.293-1.382-2.622-2.252a2.864 2.864 0 0 1-.15-.573c-.728.843-1.497 1.627-2.254 2.164-1.389.988-2.783 1.2-3.987.41-1.518-.994-1.571-2.62-.964-4.437.293-.88.734-1.81.941-2.645a2.686 2.686 0 0 0 .088-.628c-.298.145-.825.417-1.222.71-2.724 2.007-6.439 6.23-7.336 6.926-.57.443-1.03.384-1.228.343a1.251 1.251 0 0 1-.785-.501 1.285 1.285 0 0 1-.253-.818c.004-.165.063-.475.236-.858.312-.689 1.109-2 1.409-2.62.096-.2.206-.405.326-.617a17.25 17.25 0 0 1-2.167 1.027 1.26 1.26 0 0 1-1.63-.706 1.249 1.249 0 0 1 .709-1.62 14.087 14.087 0 0 0 4.177-2.523c.405-.356 1.113-1.29 1.537-1.697.3-.287.585-.433.757-.487.62-.193 1.068.016 1.388.373.16.178.425.544.316 1.22-.104.64-.372 1.336-.733 2.048Zm20.925.666c-.951-.18-1.863-.553-2.63-1.117.024.017.09.059.09.059s-.286-.25-.487-.448c-1.038.64-2.892 2.078-4.001 3.587-.303.41-.55.823-.678 1.225-.073.232-.116.454-.04.657.13.345.52.564 1.125.781 3.629 1.307 6.204-1.77 6.572-4.157.03-.203.05-.4.05-.587Zm14.643.72c.819-.65 1.624-1.442 2.198-2.043a4.63 4.63 0 0 0-.53.332 7.125 7.125 0 0 0-1.668 1.712Zm27.421-2.18a4.623 4.623 0 0 1-.329-.586c-.608-1.293-.149-2.626.952-3.63a5.938 5.938 0 0 1 2.872-1.393c.822-.138 1.593-.04 2.178.263.885.459 1.287 1.076 1.417 1.7.165.796-.156 1.79-1.098 2.756a8.975 8.975 0 0 1-1.048.9c.508.068 1.048.095 1.605.094 3.756-.01 8.219-1.36 9.945-1.88a1.26 1.26 0 0 1 1.567.836 1.25 1.25 0 0 1-.839 1.558c-1.85.556-6.641 1.975-10.667 1.986-1.693.005-3.246-.26-4.487-.86-2.98 1.502-6.69 2.682-9.082 2.646a1.255 1.255 0 0 1-1.238-1.269 1.255 1.255 0 0 1 1.277-1.23c1.841.027 4.579-.79 6.975-1.892Zm2.244-1.18c.33-.2.64-.401.924-.604.472-.335.87-.668 1.155-.993.084-.095.17-.23.229-.329a.495.495 0 0 0-.042-.023c-.17-.089-.4-.052-.639-.007a3.37 3.37 0 0 0-1.167.473 2.332 2.332 0 0 0-.644.58c-.097.136-.185.282-.112.438.081.171.18.326.296.466Z" clip-rule="evenodd"/>
+    <path fill="#F0F0F0" fill-rule="evenodd" d="M129.457 15.561a4.355 4.355 0 0 0-.113-.091 3.045 3.045 0 0 0-.515-.298c-.661-.316-1.556-.59-2.61-.885a1.25 1.25 0 1 1 .68-2.407c1.494.418 2.708.827 3.509 1.297.825.483 1.301 1.073 1.486 1.705.266.908-.04 2.187-1.726 3.744-.509.47-1.305.44-1.777-.066a1.246 1.246 0 0 1 .066-1.766c.377-.348.659-.654.847-.934.064-.094.125-.233.153-.299ZM75.41 11.419c-.694 0-1.257-.56-1.257-1.25s.563-1.25 1.257-1.25c3.633 0 7.21 0 10.805-.59a1.257 1.257 0 0 1 1.445 1.029 1.25 1.25 0 0 1-1.035 1.437c-3.733.614-7.444.624-11.215.624Z" clip-rule="evenodd"/>
   </g>
   <defs>
     <clipPath id="a">
-      <path fill="#fff" d="M.5.668h132v25H.5z"/>
+      <path fill="#fff" d="M.5.584h132v25H.5z"/>
     </clipPath>
   </defs>
 </svg>
diff --git a/package-lock.json b/package-lock.json
index b38a03b..22a96ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@prisma/client": "^5.6.0",
         "@radix-ui/react-select": "^2.0.0",
+        "@radix-ui/react-slider": "^1.1.2",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-toast": "^1.1.5",
         "chart.js": "^4.4.0",
@@ -802,6 +803,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",
+      "integrity": "sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
diff --git a/package.json b/package.json
index ffd4cd1..4b194bb 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@prisma/client": "^5.6.0",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "chart.js": "^4.4.0",