added likes and search bar but badges don't work
This commit is contained in:
+47
-87
@@ -1,103 +1,63 @@
|
||||
import reactLogo from "./assets/react.svg";
|
||||
import viteLogo from "./assets/vite.svg";
|
||||
import Header from "./components/Header";
|
||||
import Footer from "./components/Footer";
|
||||
import Carte from "./components/Carte";
|
||||
import Compteur from "./components/Compteur";
|
||||
import { useState } from "react";
|
||||
import "./App.css";
|
||||
|
||||
const jeux = [
|
||||
{
|
||||
id: 1,
|
||||
titre: "Oracle of ages",
|
||||
console: "Game Boy Color",
|
||||
annee: 2001,
|
||||
Type: "2d",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
titre: "Breath of the Wild",
|
||||
console: "Switch",
|
||||
annee: 2017,
|
||||
Type: "3d",
|
||||
},
|
||||
{ id: 3, titre: "Majora's Mask", console: "N64", annee: 2000, Type: "3d" },
|
||||
{
|
||||
id: 4,
|
||||
titre: "Tears of the kingdom",
|
||||
console: "Switch",
|
||||
annee: 2023,
|
||||
Type: "3d",
|
||||
},
|
||||
];
|
||||
|
||||
function App() {
|
||||
const [recherche, setRecherche] = useState("");
|
||||
|
||||
const filtres = jeux.filter((j) =>
|
||||
j.titre.toLowerCase().includes(recherche.toLowerCase()),
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
|
||||
<Carte titre="Géolocalisation" texte="Suivi en temps réel" />
|
||||
<Carte titre="Consommation" texte="Carburant consommé" />
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search Game…"
|
||||
value={recherche}
|
||||
onChange={(e) => setRecherche(e.target.value)}
|
||||
/>
|
||||
|
||||
<Compteur />
|
||||
{filtres.length === 0 && <p>Aucun jeu trouvé 😕</p>}
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img className="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://react.dev/" target="_blank">
|
||||
<img className="button-icon" src={reactLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
{filtres.map((jeu) => (
|
||||
<Carte
|
||||
key={jeu.id}
|
||||
titre={jeu.titre}
|
||||
console={jeu.console}
|
||||
annee={jeu.annee}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
<Footer />
|
||||
</>
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
import Badge from "./Badge";
|
||||
import { useState } from "react";
|
||||
|
||||
function Carte(props) {
|
||||
const [likes, setLikes] = useState(0);
|
||||
return (
|
||||
<div className="carte">
|
||||
<h2>{props.titre}</h2>
|
||||
<p>{props.texte}</p>
|
||||
<p>
|
||||
{props.console} - {props.annee} - <Badge />
|
||||
</p>
|
||||
<button onClick={() => setLikes(likes + 1)}>❤️ {likes}</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
function Docs() {
|
||||
return (
|
||||
<div id="docs">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img className="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://react.dev/" target="_blank">
|
||||
<img className="button-icon" src={reactLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Docs;
|
||||
@@ -1,7 +1,7 @@
|
||||
function Footer() {
|
||||
return (
|
||||
<div id="foot">
|
||||
<h3>The react project</h3>
|
||||
<h3>The Zelda project</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,9 +5,9 @@ function Header() {
|
||||
return (
|
||||
<section id="center">
|
||||
<div>
|
||||
<h1>The react project</h1>
|
||||
<h1>The Zelda project</h1>
|
||||
<p>
|
||||
Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
|
||||
<img src="https://www.greenmangaming.com/blog/wp-content/uploads/2021/06/zelda-timeline.jpg"></img>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user