91 lines
4.5 KiB
TypeScript
91 lines
4.5 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { MTGCard } from '@/components/ui/mtg-card'
|
|
|
|
interface carte_from_stats {
|
|
id: string,
|
|
name: string,
|
|
normal_image: string,
|
|
sanitized_name: string,
|
|
nbr_decks: number,
|
|
total_decks: number,
|
|
percent_decks: number,
|
|
price: string,
|
|
cardmarket_uri: string
|
|
}
|
|
|
|
export default function Home() {
|
|
const [creatureCardList, setCreatureCardList] = useState([])
|
|
const [instantCardList, setInstantCardList] = useState([])
|
|
const [sorceryCardList, setSorceryCardList] = useState([])
|
|
const [planeswalkerCardList, setPlaneswalkerCardList] = useState([])
|
|
const [artifactCardList, setArtifactCardList] = useState([])
|
|
const [enchantmentCardList, setEnchantmentCardList] = useState([])
|
|
const [landCardList, setLandCardList] = useState([])
|
|
|
|
useEffect(() => {
|
|
fetch('http://localhost:8072/top/mono-white.json').then((res) => {
|
|
if(res.status == 200) {
|
|
res.json().then((data) => {
|
|
const limit = 20
|
|
setCreatureCardList(data["creature"].slice(0,limit))
|
|
setInstantCardList(data["instant"].slice(0,limit))
|
|
setSorceryCardList(data["sorcery"].slice(0,limit))
|
|
setPlaneswalkerCardList(data["planeswalker"].slice(0,limit))
|
|
setArtifactCardList(data["artifact"].slice(0,limit))
|
|
setEnchantmentCardList(data["enchantment"].slice(0,limit))
|
|
setLandCardList(data["land"].slice(0,limit))
|
|
console.log(data)
|
|
})
|
|
}
|
|
})
|
|
}, [])
|
|
return (
|
|
<div className="flex flex-col items-center mt-32">
|
|
<h1>Creature</h1>
|
|
<div className="flex flex-row flex-wrap gap-4 p-8">
|
|
{creatureCardList.map((card: carte_from_stats) => (
|
|
<MTGCard key={card.id} cardname={card.name} imageURI={card.normal_image} url={"/card/" + card.sanitized_name} nbrDecks={card.nbr_decks} totalDecks={card.total_decks} percentDecks={card.percent_decks} price={card.price} cardmarketURI={card.cardmarket_uri}/>
|
|
))}
|
|
</div>
|
|
<h1>Instants</h1>
|
|
<div className="flex flex-row flex-wrap gap-4 p-8">
|
|
{instantCardList.map((card: carte_from_stats) => (
|
|
<MTGCard key={card.id} cardname={card.name} imageURI={card.normal_image} url={"/card/" + card.sanitized_name} nbrDecks={card.nbr_decks} totalDecks={card.total_decks} percentDecks={card.percent_decks} price={card.price} cardmarketURI={card.cardmarket_uri}/>
|
|
))}
|
|
</div>
|
|
<h1>Sorceries</h1>
|
|
<div className="flex flex-row flex-wrap gap-4 p-8">
|
|
{sorceryCardList.map((card: carte_from_stats) => (
|
|
<MTGCard key={card.id} cardname={card.name} imageURI={card.normal_image} url={"/card/" + card.sanitized_name} nbrDecks={card.nbr_decks} totalDecks={card.total_decks} percentDecks={card.percent_decks} price={card.price} cardmarketURI={card.cardmarket_uri}/>
|
|
))}
|
|
</div>
|
|
<h1>Enchantment</h1>
|
|
<div className="flex flex-row flex-wrap gap-4 p-8">
|
|
{enchantmentCardList.map((card: carte_from_stats) => (
|
|
<MTGCard key={card.id} cardname={card.name} imageURI={card.normal_image} url={"/card/" + card.sanitized_name} nbrDecks={card.nbr_decks} totalDecks={card.total_decks} percentDecks={card.percent_decks} price={card.price} cardmarketURI={card.cardmarket_uri}/>
|
|
))}
|
|
</div>
|
|
<h1>Planeswalker</h1>
|
|
<div className="flex flex-row flex-wrap gap-4 p-8">
|
|
{planeswalkerCardList.map((card: carte_from_stats) => (
|
|
<MTGCard key={card.id} cardname={card.name} imageURI={card.normal_image} url={"/card/" + card.sanitized_name} nbrDecks={card.nbr_decks} totalDecks={card.total_decks} percentDecks={card.percent_decks} price={card.price} cardmarketURI={card.cardmarket_uri}/>
|
|
))}
|
|
</div>
|
|
<h1>Artifact</h1>
|
|
<div className="flex flex-row flex-wrap gap-4 p-8">
|
|
{artifactCardList.map((card: carte_from_stats) => (
|
|
<MTGCard key={card.id} cardname={card.name} imageURI={card.normal_image} url={"/card/" + card.sanitized_name} nbrDecks={card.nbr_decks} totalDecks={card.total_decks} percentDecks={card.percent_decks} price={card.price} cardmarketURI={card.cardmarket_uri}/>
|
|
))}
|
|
</div>
|
|
<h1>Lands</h1>
|
|
<div className="flex flex-row flex-wrap gap-4 p-8">
|
|
{landCardList.map((card: carte_from_stats) => (
|
|
<MTGCard key={card.id} cardname={card.name} imageURI={card.normal_image} url={"/card/" + card.sanitized_name} nbrDecks={card.nbr_decks} totalDecks={card.total_decks} percentDecks={card.percent_decks} price={card.price} cardmarketURI={card.cardmarket_uri}/>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|