untitled

import { useState } from 'react'
import './App.css'

const dane = [
    { id: 0, alt: "Mak", filename: "obraz1.jpg", category: 1, downloads: 35 },
    { id: 1, alt: "Bukiet", filename: "obraz2.jpg", category: 1, downloads: 43 },
    { id: 2, alt: "Dalmatyńczyk", filename: "obraz3.jpg", category: 2, downloads: 2 },
    { id: 3, alt: "Świnka morska", filename: "obraz4.jpg", category: 2, downloads: 53 },
    { id: 4, alt: "Rotwailer", filename: "obraz5.jpg", category: 2, downloads: 43 },
    { id: 5, alt: "Audi", filename: "obraz6.jpg", category: 3, downloads: 11 },
    { id: 6, alt: "kotki", filename: "obraz7.jpg", category: 2, downloads: 22 },
    { id: 7, alt: "Róża", filename: "obraz8.jpg", category: 1, downloads: 33 },
    { id: 8, alt: "Świnka morska", filename: "obraz9.jpg", category: 2, downloads: 123 },
    { id: 9, alt: "Foksterier", filename: "obraz10.jpg", category: 2, downloads: 22 },
    { id: 10, alt: "Szczeniak", filename: "obraz11.jpg", category: 2, downloads: 12 },
    { id: 11, alt: "Garbus", filename: "obraz12.jpg", category: 3, downloads: 321 }
];



function App() {
    const blokiZdjęc = [];
    const [kwiaty, setKwiaty] = useState(true);
    const [zwierzęta, setZwierzęta] = useState(true);
    const [samochody, setSamochody] = useState(true);

    function zmienKwiaty() {
        setKwiaty(!kwiaty)
    }

    function zmienZwierzęta() {
        setZwierzęta(!zwierzęta)
    }

    function zmienSamochody() {
        setSamochody(!samochody)
    }

    function pobierz(event) {
        const id = Number(event.target.value);

        for (let i = 0; i < dane.length; i++) {
            if (dane[i].id == id) {

            }
        }
    }

    for (let i = 0; i < dane.length; i++) {
        let pokaz = false;

        if (dane[i].category == 1 && kwiaty) {
            pokaz = true;
        }
        if (dane[i].category == 2 && zwierzęta) {
            pokaz = true;
        }
        if (dane[i].category == 3 && samochody) {
            pokaz = true;
        }

        if (pokaz) {
            blokiZdjęc.push(
                <div>
                    <img src={"src/assets/" + dane[i].filename} alt={dane[i].alt} />
                    <h4>Pobrań: {dane[i].downloads}</h4>
                    <button value={dane[i].id} onClick={pobierz}>Pobierz</button>
                </div>
            );
        }
    }
}

  return (
    <div>
        <h1>Kategorie Zdjęć</h1>
        <div class="">
            


          </div>
          {blokiZdjęc}
    </div>
  )


export default App