morty

1
import React, { useState } from "react";
2
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3
import Filter from "../filter/Filter";
4
import CardList from "../characterPage/CharecterPage";
5
import CardDetalis from "../cardDetalis/CardDetalis";
6
import "../style/style.scss";
7

8
function App() {
9
  const [filters, setFilters] = useState({
10
    status: "",
11
    species: "",
12
    gender: "",
13
  });
14

15
  const handleFilterChange = (newFilters) => {
16
    setFilters(newFilters);
17
  };
18

19
  const [showFilter, setShowFilter] = useState(true);
20

21
  return (
22
    <Router>
23
      <div className="App">
24
        {showFilter && <Filter onFilterChange={handleFilterChange} />}
25
        <main>
26
          <Routes>
27
            <Route path="/" element={<CardList filters={filters} />} />
28
            <Route
29
              path="/card/:id"
30
              element={<CardDetalis setShowFilter={setShowFilter} />}
31
            />
32
          </Routes>
33
        </main>
34
      </div>
35
    </Router>
36
  );
37
}
38

39
export default App;
40