done Tours

Author: latifii

eslint.config.js

@@ -30,6 +30,7 @@ export default [
       ...reactHooks.configs.recommended.rules,
       "react/jsx-no-target-blank": "off",
       "react/prop-types": "off",
+      "no-unused-vars": ["warn"],
       "react-refresh/only-export-components": [
         "warn",
         { allowConstantExport: true },

src/App.jsx

@@ -1,6 +1,6 @@
 import { RouterProvider } from "react-router-dom";
 
-import router from "../routes/router";
+import router from "./routes/router";
 
 function App() {
   return (

src/challanges/02-tours/Loading.jsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="bg-blue-50 min-h-screen py-14 px-10">
+      <h1 className="text-4xl font-bold my-28 text-center">Loading...</h1>
+    </div>
+  );
+}

src/challanges/02-tours/Tour.jsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+
+export default function Tour({ id, name, info, image, price, handleDelete }) {
+  const [readMore, setReadMore] = useState(true);
+
+  return (
+    <div className="flex flex-col bg-white rounded-lg shadow-2xl overflow-hidden relative">
+      <img className="h-60 object-cover" src={image} alt={`name-${name}`} />
+      <div className="p-8 ">
+        <h2 className="font-bold text-l text-zinc-800 tracking-widest mb-4">
+          {name}
+        </h2>
+        <p className="text-gray-500 mb-4">
+          {readMore ? <span>{info.slice(0, 200)}... </span> : info}
+          <button
+            onClick={() => setReadMore(!readMore)}
+            className="text-blue-500"
+          >
+            {readMore ? "Read more" : "Show less"}
+          </button>
+        </p>
+        <button
+          className="border block border-red-800 text-red-800 rounded p-2 w-full cursor-pointer font-medium"
+          onClick={() => handleDelete(id)}
+        >
+          Not Interested
+        </button>
+      </div>
+      <span className="absolute top-0 right-0 bg-blue-100 text-blue-600 rounded-bl-lg  p-3">
+        {price} $
+      </span>
+    </div>
+  );
+}

src/challanges/02-tours/Tours.jsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import Loading from "./Loading";
+import Tour from "./Tour";
+
+const url = "https://course-api.com/react-tours-project";
+
+const backgroundClass = "bg-blue-50 min-h-screen py-14 px-10";
+
+export default function Tours() {
+  const [dataTours, setDataTours] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const handleDelete = (id) => {
+    const data = dataTours.filter((item) => item.id !== id);
+    setDataTours(data);
+  };
+  const fetchTours = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(url);
+      const data = await res.json();
+      setDataTours(data);
+      setLoading(false);
+      console.log("data", data);
+
+      return data;
+    } catch (error) {
+      console.error(error.message);
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTours();
+  }, []);
+
+  if (loading) return <Loading />;
+
+  if (dataTours.length === 0)
+    return (
+      <div className={backgroundClass}>
+        <div className="my-20 mx-auto w-52">
+          <p className="text-3xl font-bold text-gray-800 mb-4">No Tours Left</p>
+          <button
+            className="p-1 rounded-md text-white bg-blue-400 font-bold cursor-pointer"
+            onClick={fetchTours}
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+    );
+
+  return (
+    <div className={backgroundClass}>
+      <h1 className="text-gray-800 text-4xl font-bold text-center mb-20 relative before:content-[''] before:absolute before:-bottom-4 before:left-0 before:right-0 before:mx-auto   before:w-1/10 before:h-1 before:bg-blue-400">
+        Our Tours
+      </h1>
+      <div className="grid grid-cols-3 gap-5">
+        {dataTours.map((tour) => (
+          <Tour key={tour.id} {...tour} handleDelete={handleDelete} />
+        ))}
+      </div>
+    </div>
+  );
+}

routes/router.jsx renamed to src/routes/router.jsx

@@ -1,6 +1,7 @@
 import { createBrowserRouter } from "react-router-dom";
-import BirthdayReminder from "../src/challanges/01-birthday-reminder/BirthdayReminder";
-import Home from "../src/sections/home/Home";
+import Home from "../sections/home/Home";
+import BirthdayReminder from "../challanges/01-birthday-reminder/BirthdayReminder";
+import Tours from "../challanges/02-tours/Tours";
 
 const router = createBrowserRouter([
   {
@@ -11,6 +12,10 @@ const router = createBrowserRouter([
     path: "/birthday",
     element: <BirthdayReminder />,
   },
+  {
+    path: "/tours",
+    element: <Tours />,
+  },
 ]);
 
 export default router;

src/sections/home/Home.jsx

@@ -2,10 +2,13 @@ import { Link } from "react-router-dom";
 
 export default function Home() {
   return (
-    <>
+    <div className="flex flex-col gap-3">
       <Link to="/birthday" className="underline text-blue-500">
         Birthday reminder
       </Link>
-    </>
+      <Link to="/tours" className="underline text-blue-500">
+        Tours
+      </Link>
+    </div>
   );
 }