morty
70 строк · 1.8 Кб
1import { useState, useEffect } from "react";2import { useParams, Link } from "react-router-dom";3import { fetchDataCards } from "../services/Services";4import "./cardDetalis.scss";5
6const CardDetalis = ({ setShowFilter }) => {7const { id } = useParams();8const [card, setCards] = useState(null);9
10useEffect(() => {11setShowFilter(false);12return () => {13setShowFilter(true);14};15}, [setShowFilter]);16
17useEffect(() => {18const fetchCardDetails = async () => {19const response = await fetchDataCards(id);20setCards(response);21};22
23fetchCardDetails();24}, [id]);25
26if (!card) {27return <div className="spinner">Loading...</div>;28}29
30return (31<div className="container">32<div className="header">33<Link to="/" className="back-link">34Назад
35</Link>36</div>37<div className="content">38<div className="card-details">39<div className="card-details__image">40<img src={card.image} alt="" />41</div>42<div className="card-details__info">43<div className="card-details__name">44ИМЯ: <br />45{card.name}46</div>47<div className="card-details__gender">48ПОЛ: <br />49{card.gender}50</div>51<div className="card-details__origin">52Место рождения: <br />53{card.origin.name}54</div>55<div className="card-details__location">56Место нахождения: <br />57{card.location.name}58</div>59<div className="card-details__status">60Статус: <br />61{card.status}62</div>63</div>64</div>65</div>66</div>67);68};69
70export default CardDetalis;71