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

badge-home-page

Browse source 
Création de la page des badges et aussi d'un composant badge
This commit is contained in:
Nicolas VINCENT 2023-02-13 15:41:28 +01:00
parent 18d1d82659
commit bc5eb76e15
4 changed files with 29 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.vscode/settings.json vendored
View file

@ -1,4 +1,4 @@
{ {
"typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib", "typescript.tsdk": "node_modules\\.pnpm\\typescript@4.9.5\\node_modules\\typescript\\lib",
"typescript.enablePromptUseWorkspaceTsdk": true "typescript.enablePromptUseWorkspaceTsdk": true
} }

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

@ -1,11 +1,21 @@
import Badge from '@/ui/Badge';
import Image from 'next/image';
export default function Page() { export default function Page() {
return ( return (
<div className="flex h-screen w-full"> <div className="h-full w-f">
<div className="m-auto"> <div className="">
<h1 className="text-center text-4xl font-bold"> <h1 className="text-2xl font-bold tracking-tight ">Mes badges</h1>
Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '} <div className="flex flex-col pt-5">
<span className="text-blue-500">Tailwindcss</span> ! <div className="bg-dark rounded-lg shadow-md mb-9 max-h-5/6 max-w-11/12">
</h1> <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>
</div>
</div>
</div> </div>
</div> </div>
); );

2
app/dashboard/layout.tsx
View file

@ -13,4 +13,4 @@ export default function Layout({ children }: { children: ReactNode }) {
</div> </div>
</div> </div>
); );
} }

10
ui/Badge.tsx Normal file
View file

@ -0,0 +1,10 @@
export default function Badge({ title, path, alt, type }: { title: string; path: string; alt: string; type: string }) {
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>
);
}