Peer-at-Code/peer-at-code-web
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix badge

Browse source
This commit is contained in:
Théo 2023-02-26 19:06:21 +01:00
parent bc5eb76e15
commit 77d52b742f
3 changed files with 51 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/dashboard/badges/page.tsx
View file

@ -1,18 +1,22 @@
import Badge from '@/ui/Badge';
import Image from 'next/image';
export default function Page() {
return (
<div className="h-full w-f">
<div className="">
<div className="h-full w-full">
<h1 className="text-2xl font-bold tracking-tight ">Mes badges</h1>
<div className="flex flex-col pt-5">
<div className="bg-dark rounded-lg shadow-md mb-9 max-h-5/6 max-w-11/12">
<div className="flex py-2 px-4 rounded-lg justify-between">
<div className="flex flex-wrap md:space-x-0 pt-3 pb-3 ">
<Badge title={"Je suis un teste"} path={"https://cdn-icons-png.flaticon.com/512/226/226777.png"} type={""} alt={"je suis un alt"} />
<Badge title={"Je suis un teste"} path={"https://cdn-icons-png.flaticon.com/512/226/226777.png"} type={"esay"} alt={"je suis un alt"} />
<Badge title={"Je suis un teste"} path={"https://cdn-icons-png.flaticon.com/512/226/226777.png"} type={"hard"} alt={"je suis un alt"} />
</div>
<div className="max-h-5/6 max-w-11/12 mb-9 rounded-lg bg-dark shadow-md">
<div className="flex justify-between rounded-lg py-2 px-4">
<div className="flex flex-wrap space-x-2 pt-3 pb-3 ">
<Badge title="Je suis un teste" path="/assets/badges/java.png" alt="je suis un alt" />
<Badge title="Je suis un teste" path="/assets/badges/java.png" alt="je suis un alt" />
<Badge
title="Salut j'ai été obtenu"
path="/assets/badges/java.png"
type="hard"
alt="je suis un alt"
earned
/>
</div>
</div>
</div>

BIN
public/assets/badges/java.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 47 KiB

37
ui/Badge.tsx
View file

@ -1,10 +1,37 @@
import Image from 'next/image';
export default function Badge({ title, path, alt, type }: { title: string; path: string; alt: string; type: string }) {
import { cn } from '@/lib/utils';
export type Difficulty = 'easy' | 'medium' | 'hard';
export default function Badge({
title,
path,
alt,
type = 'easy',
earned = false
}: {
title: string;
path: string;
alt: string;
type?: Difficulty;
earned?: boolean;
}) {
return (
<div className='text-center md:w-[9%] sm:w-[15%] w-[20%] pr-3 mt-3'>
<img src={path} alt={alt} className={`f-full w-full rounded-full border-2 lg:border-4 ${type === "hard" ? 'border-red-600' : type === 'easy' ? 'border-green-600' : 'border-yellow-600'} `} />
<h2 className='pt-2'>{title}</h2>
<div className="flex w-24 flex-col space-y-2 text-center">
<Image
src={path}
alt={alt}
className={cn(`rounded-full border-2 lg:border-4`, {
'border-green-600': type === 'easy',
'border-yellow-600': type === 'medium',
'border-red-600': type === 'hard',
'border-gray-600 opacity-40': !earned
})}
width={500}
height={500}
/>
<span className="text-sm font-semibold">{earned ? title : '****'}</span>
</div>
);
}