49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { usePathname } from 'next/navigation'
|
|
import { useEffect, useState } from "react"
|
|
import { MTGCard } from '@/components/ui/mtg-card'
|
|
|
|
import type { deck, cartes_dans_deck, carte } from '@prisma/client'
|
|
|
|
interface deckFromApi extends deck {
|
|
commander: carte,
|
|
cartes: cartes_dans_deckFromApi[]
|
|
}
|
|
|
|
interface cartes_dans_deckFromApi extends cartes_dans_deck {
|
|
carte: carte
|
|
}
|
|
|
|
export default function Page() {
|
|
const deckId = usePathname().slice(6).split("/")[0]
|
|
const [deck, setDeck] = useState<deckFromApi>()
|
|
|
|
useEffect(() => {
|
|
fetch('/api/deck/'+deckId, {
|
|
method: "GET",
|
|
}).then((res) => {
|
|
if(res.status == 200) {
|
|
res.json().then((apiData) => {
|
|
setDeck(apiData.deck)
|
|
})
|
|
}
|
|
})
|
|
}, [])
|
|
|
|
return (
|
|
<div className="flex flex-col items-center mt-32">
|
|
{ deck != undefined && (
|
|
<>
|
|
<h1 className="text-5xl">{deck?.name}</h1>
|
|
<MTGCard cardname={deck.commander?.name} imageURI={deck.commander?.normal_image} url={"/card/" + deck.commander?.sanitized_name} />
|
|
<div className="flex flex-row flex-wrap gap-4 p-8">
|
|
{deck.cartes?.map((card) => (
|
|
<MTGCard key={card.carte.id} cardname={card.amount + "x " + card.carte.name} imageURI={card.carte.normal_image} url={"/card/" + card.carte.sanitized_name}/>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|