src/components/Main/Main.jsx - master - DevDenzo/DigitalStore

src/components/Main/Main.jsx
77 строк4 KB
Denis Sklyarskij
Создан скелет магазина
10 дек 2025, 22:19
10 дек 2025, 22:19a36e9ac
import React, { useState, useEffect } from 'react';
import { CatalogCard } from "../Catalog";
import { ServiceCategories } from "../ServiceCategories/ServiceCategories.tsx";
import { PopularCategories } from "../PopularCategories/PopularCategories.tsx";
import { BestsellerCard } from "../BestsellerCard/BestsellerCard.tsx";
import './Main.css';

const Main = () => {
    const [commonItems, setCommonItems] = useState([]);

    useEffect(() => {
        const fetchData = () => {
            fetch('https://appevent.ru/dev/task1/catalog')
                .then((res) => {
                    if (!res.ok) {
                        throw new Error(`HTTP Error! Status: ${res.status}`);
                    }

                    return res.json();
                })
                .then(data => {
                    const { items } = data;
                    const limitedData = items.slice(0, 6);
                    setCommonItems(limitedData);
                })
                .catch(err => console.error('Ошибка: ', err.message))
        };

        fetchData();
    });

    return (
        <main className="main">
            <section className="main__section main__section--service">
                <ServiceCategories />
            </section>
            <section className="main__section main__section--popular">
                <h1 className="main__section-title">Популярные категории</h1>
                <PopularCategories/>
            </section>
            <section className="main__section main__section--popular">
                <h2 className="main__section-title">Популярные товары</h2>
                <div className="main__items">
                    {commonItems.map((item, index) => (
                        <div
                            key={`${item.id}-${index}`}
                            className="main__item"
                        >
                            <CatalogCard item={item}/>
                        </div>
                    ))}
                </div>
            </section>
            <section className="main__section main__section--sold-out">
                <h2 className="main__section-title">Товар дня</h2>
                <BestsellerCard />
            </section>
            <section className="main__section main__section--info">
                <div className="main__section-content">
                    <h2 className="main__section-title main__section-title--small">О компании</h2>
                    <h3 className="main__section-subtitle">
                        TZN Store - интернет-магазин в России с конструктором дизайна
                    </h3>
                    <div className="main__description-info">
                        Готовое решение TZN Store обладает широкими функциональными
                        возможностями, удобным интерфейсом и гибкими настройками дизайна.
                        Оно позволяет создавать интернет-магазины в соответствии с самыми сложными и
                        изысканными запросами клиентов, под решение обширных маркетинговых и бизнес задач,
                        для любой сферы бизнеса, под товары любой тематики.
                    </div>
                </div>
            </section>
        </main>
    );
};

export default Main;