ЯсноПонятно24

ред вами приложение — магазин игрушек. На главной странице (компонент Home) отображается каталог товаров. При клике на карточке товара осуществляется переход на страницу отдельного товара (компонент Product). На странице товара можно посмотреть краткую информацию о товаре, а кнопка «Подробнее...» позволяет развернуть или свернуть детальное описание за которое отвечает компонент ProductDetails. Для выполнения задания вам нужно: Обеспечить ленивую загрузку страницы отдельного товара Product. Обеспечить ленивую загрузку компонента ProductDetails, отвечающего за детальное описание товара. Не забудьте, что для ленивой загрузки страницы компонент, который за нее отвечает, должен называться Component. import { useParams } from "react-router-dom"; import { products } from "../../data"; import s from "./product.module.css"; import { useState } from "react"; import { ProductDetails } from "../../components/product-details/product-details"; export const Product = () => { const { id } = useParams(); const [ showDetails, setShowDetails ] = useState(false); const product = products.find(p => p.id === id)!; return ( <article className={s.product}> <h1>{product?.title}</h1> <img className={s.image} alt={product.alt} src={product.src} /> <p className={s.description}>{product.description}</p> <button onClick={() => setShowDetails(!showDetails)}>Подробнее...</button> {showDetails && ( <ProductDetails product={product} /> )} </article> ) } export const Component = Product; import { TProduct } from "../../types" type TProductDetailsProps = { product: TProduct } export const ProductDetails = ({ product }: TProductDetailsProps) => { return ( <p>{product.fullInfo}</p> ) } import { products} from "../../data"; import { CardsList } from "../../components/cards-list"; export const Home = () => { return ( <section> <h1>Каталог игрушек</h1> <CardsList cards={products} /> </section> ) }; Использовать lazy