import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(




,
)

import { Route, Routes } from 'react-router-dom';
import Navbar from './componants/componants/Navbar';
import ProductList from './componants/componants/ProductList';
import Slider from './componants/componants/Slider';
import ProductDetail from './componants/ProductDetail';

function App() {
return (
<>


```
  <Routes>

    <Route
      path="/"
      element={
        <>
          <Slider />
          <ProductList />
        </>
      }
    />

    <Route
      path="/products/:prodId"
      element={<ProductDetail />}
    />

  </Routes>

</>
```

)
}

export default App;

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import ProductItem from "./componants/Product";
import { useNavigate } from "react-router-dom";

function ProductDetail(props) {
const prodId = useParams().prodId;
const baseURL = "[https://fakestoreapi.com](https://fakestoreapi.com/)";
const [product, setProduct] = useState({});
const navigate = useNavigate();

```
useEffect(() => {
    fetch(`${baseURL}/products/${prodId}`)
        .then((res) => res.json())
        .then((data) => setProduct(data));
}, []);

return (
    <div>
        <div className="container mt-5">

            <h1>Product Detail</h1>

            <ProductItem
              product={product}
              showButton={false}
              allData={true}
            />

            <button
              className="btn btn-primary mb-3 w-100"
              onClick={() => navigate(-1)}
            >
              Go Back
            </button>

        </div>
    </div>
)
```

}

export default ProductDetail;

import { Link } from "react-router-dom";

function ProductItem({ product, showButton = true, allData = false }) {
return (


```
  <img
    src={product?.image}
    style={{ height: "300px", objectFit: "contain" }}
    className="card-img-top p-5"
    alt={product?.title ? product.title : "Loading..."}
  />

  <div className="card-body d-flex flex-column justify-content-between">

    <h5 className="card-title">
      {product?.title
        ? allData
          ? product.title
          : product.title.substring(0, 15) + "..."
        : "Loading..."}
    </h5>

    <p className="card-text">
      {product?.description
        ? allData
          ? product.description
          : product.description.substring(0, 100) + "..."
        : "Loading..."}
    </p>

    {showButton && (
      <Link to={`/products/${product.id}`} className="btn btn-primary">
        View Details
      </Link>
    )}

  </div>

</div>
```

);
}

export default ProductItem;