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 { Link } from "react-router-dom";

function Navbar() {
return (

import '../css_componant/Slider.css';

function Slider() {
const images = [
"https://shipsy.io/wp-content/uploads/2021/02/Blog-91.jpg",
"https://ebz-static.s3.ap-south-1.amazonaws.com/easebuzz-static/upi-credit-cards-v1.png",
"https://www.dimofinf.sa/blog/wp-content/uploads/2024/07/ecommerce.png",
];

```
return (
    <div id="carouselExample" className="carousel slide">
        <div className="carousel-inner">

            <div className="carousel-item active">
                <img src={images[0]} className="d-block w-100" />
            </div>

            <div className="carousel-item">
                <img src={images[1]} className="d-block w-100" />
            </div>

            <div className="carousel-item">
                <img src={images[2]} className="d-block w-100" />
            </div>

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

}

export default Slider;

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

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


```
  <img src={product?.image} className="card-img-top" />

  <div className="card-body">

    <h5>
      {allData ? product.title : product.title?.substring(0, 15)}
    </h5>

    <p>
      {allData ? product.description : product.description?.substring(0, 100)}
    </p>

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

  </div>

</div>
```

);
}

export default ProductItem;

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

function ProductDetail() {
const { prodId } = useParams();
const [product, setProduct] = useState({});
const navigate = useNavigate();

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

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

        <h1>Product Detail</h1>

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

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

    </div>
);
```

}

export default ProductDetail;