update version 2

src/App.jsx

@@ -1,10 +1,10 @@
 import { Fragment, Suspense, lazy } from "react";
 import { Routes, Route } from "react-router-dom";
 import Main from "./components/layout/Main";
-import "react-toastify/dist/ReactToastify.css";
-import "swiper/css";
 import LoadingComponent from "./components/loading/LoadingComponent";
 
+import "swiper/css";
+
 const HomePage = lazy(() => import("./page/HomePage"));
 const AnimePage = lazy(() => import("./page/AnimePage"));
 const SearchPage = lazy(() => import("./page/SearchPage"));

src/components/anime-details/DetailStatus.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const DetailStatus = ({ type, content, className }) => {
+  return (
+    <span className={`flex gap-x-2 ${className}`}>
+      <span className="font-semibold text-white opacity-100">{type}: </span>
+      <span className="opacity-75">{content}</span>
+    </span>
+  );
+};
+
+export default DetailStatus;

src/components/anime/AnimeItem.jsx

@@ -1,59 +1,40 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import IconStar from "../icons/IconStar";
+import IconFavorite from "../icons/IconFavorite";
+import Button from "../buttons/Button";
 
 const AnimeItem = ({ anime }) => {
   const navigate = useNavigate();
   const { title, score, favorites, images, mal_id } = anime;
 
   return (
-    <div className="shadow-md p-3 bg-slate-900 flex flex-col gap-y-3 h-full rounded-lg select-none">
-      <div className="w-full h-[350px]">
+    <div className="shadow-md bg-slate-900 flex flex-col gap-y-1 h-full rounded-lg select-none">
+      <div className="w-full h-[350px] rounded-t-lg">
         <img
           src={images.jpg.large_image_url}
           alt=""
-          className="w-full h-full object-cover"
+          className="w-full h-full object-cover rounded-t-lg"
         />
       </div>
-      <div className="flex flex-1 flex-col gap-y-4">
+      <div className="flex flex-1 flex-col gap-y-3 p-3">
         <h3 className="text-md font-semibold">{title}</h3>
         <div className="flex items-center justify-between mt-auto">
           <div className="flex items-center gap-x-1">
-            <span className="text-sm opacity-80">{score}</span>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-[14px] w-[14px] text-yellow-300"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-            </svg>
+            <span className="text-sm opacity-80">{score || "0"}</span>
+
+            <IconStar
+              className={"h-[16px] w-[16px] flex items-center text-yellow-300"}
+            />
           </div>
 
           <div className="flex items-center gap-x-1">
-            <span className="text-sm opacity-80">{favorites}</span>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-[14px] w-[14px] text-red-500"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fillRule="evenodd"
-                d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
-                clipRule="evenodd"
-              />
-            </svg>
+            <span className="text-sm opacity-80">{favorites || "0"}</span>
+            <IconFavorite className={"h-[16px] w-[16px] text-red-500"} />
           </div>
         </div>
 
-        <div>
-          <button
-            onClick={() => navigate(`/anime/${mal_id}`)}
-            className="w-full bg-green-400 rounded-lg p-2 font-semibold hover:opacity-75"
-          >
-            Watch Now
-          </button>
-        </div>
+        <Button onClick={() => navigate(`/anime/${mal_id}`)}>Watch Now</Button>
       </div>
     </div>
   );

src/components/buttons/Button.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const Button = ({ className = "", onClick = () => {}, children }) => {
+  return (
+    <button
+      onClick={onClick}
+      className={`w-full bg-green-400 rounded-lg p-2 font-semibold hover:opacity-75 ${className}`}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/components/icons/IconFavorite.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const IconFavorite = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default IconFavorite;

src/components/icons/IconRank.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const IconRank = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        d="M9.243 3.03a1 1 0 01.727 1.213L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H17a1 1 0 110 2h-2.97l-1 4H15a1 1 0 110 2h-2.47l-.56 2.242a1 1 0 11-1.94-.485L10.47 14H7.53l-.56 2.242a1 1 0 11-1.94-.485L5.47 14H3a1 1 0 110-2h2.97l1-4H5a1 1 0 110-2h2.47l.56-2.243a1 1 0 011.213-.727zM9.03 8l-1 4h2.938l1-4H9.031z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default IconRank;

src/components/icons/IconStar.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const IconStar = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+    </svg>
+  );
+};
+
+export default IconStar;

src/components/icons/IconUserGroup.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const IconUserGroup = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
+    </svg>
+  );
+};
+
+export default IconUserGroup;

src/index.scss

@@ -7,6 +7,7 @@
 @layer base {
   html {
     font-family: 'Poppins', sans-serif;
+    scroll-behavior: smooth;
   }
 
   body {

src/main.jsx

@@ -1,17 +1,28 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.scss";
-import App from "./App";
 import { BrowserRouter } from "react-router-dom";
-import { MangaProvider } from "./context/mangaContext";
+import { ToastContainer } from "react-toastify";
+
+import App from "./App";
+import "./index.scss";
+import "react-toastify/dist/ReactToastify.css";
 
 ReactDOM.render(
   <React.StrictMode>
-    <MangaProvider>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </MangaProvider>
+    <BrowserRouter>
+      <App />
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById("root")
 );