done Slider

Author: latifii

07-slider/src/index.js

@@ -1,10 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import Alternative from './Alternative';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />

src/challanges/03-reviews/Review.jsx

@@ -0,0 +1,70 @@
+import ContainerPage from "../../components/ContainerPage";
+import { FaAngleRight } from "react-icons/fa6";
+import { FaAngleLeft } from "react-icons/fa6";
+import { FaQuoteRight } from "react-icons/fa6";
+import people from "./data";
+import { useEffect, useState } from "react";
+
+const classButton =
+  "absolute  top-1/2 transform -translate-y-1/2 cursor-pointer w-8 h-8 bg-gray-600 text-white rounded-md";
+
+export default function Slider() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const checkNum = (num) => {
+    if (num > people.length - 1) return 0;
+    if (num < 0) return people.length - 1;
+    return num;
+  };
+
+  const nextSlide = () => setCurrentIndex((prev) => checkNum(prev + 1));
+  const prevSlide = () => setCurrentIndex((prev) => checkNum(prev - 1));
+
+  useEffect(() => {
+    const slideInterval = setInterval(
+      () => setCurrentIndex((prev) => checkNum(prev + 1)),
+      3000
+    );
+    return () => clearInterval(slideInterval);
+  }, [currentIndex]);
+
+  return (
+    <ContainerPage>
+      <div className="w-3/4  mt-10 mx-auto relative overflow-x-hidden flex">
+        <div
+          className="flex transition-all duration-500 ease-in-out"
+          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        >
+          {people.map((item) => {
+            return (
+              <div
+                className="flex flex-col items-center justify-center gap-2 min-w-full px-16"
+                key={item.id}
+              >
+                <div className="border-4 border-gray-300 rounded-full overflow-hidden">
+                  <img
+                    className="w-26 h-26 object-cover"
+                    src={item.image}
+                    alt={`pic-${item.name}`}
+                  />
+                </div>
+                <h2 className="text-blue-400 capitalize tracking-wider text-2xl">
+                  {item.name}
+                </h2>
+                <p className="capitalize text-gray-700 mb-4">{item.title}</p>
+                <p className="text-center text-gray-500">{item.quote}</p>
+                <FaQuoteRight className="text-6xl text-blue-400" />
+              </div>
+            );
+          })}
+        </div>
+        <button className={`${classButton} right-0`} onClick={nextSlide}>
+          <FaAngleRight className="text-2xl mx-auto" />
+        </button>
+        <button className={`${classButton} left-0`} onClick={prevSlide}>
+          <FaAngleLeft className="text-2xl mx-auto " />
+        </button>
+      </div>
+    </ContainerPage>
+  );
+}

src/challanges/07-slider/Slider.jsx

@@ -0,0 +1,40 @@
+const people = [
+  {
+    id: 1,
+    image:
+      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg",
+    name: "maria ferguson",
+    title: "office manager",
+    quote:
+      "Fingerstache umami squid, kinfolk subway tile selvage tumblr man braid viral kombucha gentrify fanny pack raclette pok pok mustache.",
+  },
+  {
+    id: 2,
+    image:
+      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg",
+    name: "john doe",
+    title: "regular guy",
+    quote:
+      "Gastropub sustainable tousled prism occupy. Viral XOXO roof party brunch actually, chambray listicle microdosing put a bird on it paleo subway tile squid umami.",
+  },
+  {
+    id: 3,
+    image:
+      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959121/person-1_aufeoq.jpg",
+    name: "peter smith",
+    title: "product designer",
+    quote:
+      "Drinking vinegar polaroid street art echo park, actually semiotics next level butcher master cleanse hammock flexitarian ethical paleo.",
+  },
+  {
+    id: 4,
+    image:
+      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
+    name: "susan andersen",
+    title: "the boss",
+    quote:
+      "Marfa af yr 3 wolf moon kogi, readymade distillery asymmetrical seitan kale chips fingerstache cloud bread mustache twee messenger bag. ",
+  },
+];
+
+export default people;

src/challanges/07-slider/data.js

@@ -7,6 +7,7 @@ import Accordion from "../challanges/04-accordion-I/Accordion";
 import AccordionII from "../challanges/05-accordion-II/AccordionII";
 import Menu from "../challanges/06-menu/Menu";
 import Tabs from "../challanges/06-tabs/Tabs";
+import Slider from "../challanges/07-slider/Slider";
 
 const router = createBrowserRouter([
   {
@@ -42,6 +43,10 @@ const router = createBrowserRouter([
     path: "/tabs",
     element: <Tabs />,
   },
+  {
+    path: "/slider",
+    element: <Slider />,
+  },
 ]);
 
 export default router;

src/routes/router.jsx

@@ -24,6 +24,9 @@ export default function Home() {
       <Link to="/tabs" className="underline text-blue-500">
         Tabs
       </Link>
+      <Link to="/slider" className="underline text-blue-500">
+        Slider
+      </Link>
     </div>
   );
 }