fix slider on workspace

sandygudie · Jan 17, 2024 · 06e038d · 06e038d
1 parent b73011b
commit 06e038d
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "react-redux": "^8.0.5",
     "react-responsive": "^9.0.0",
     "react-router-dom": "6",
+    "swiper": "^11.0.5",
     "uuidv4": "^6.2.13",
     "yup": "^0.32.11"
   },

diff --git a/public/start-project.png b/public/start-project.png
diff --git a/public/start-project.webp b/public/start-project.webp
diff --git a/public/tailwindcss_logo.png b/public/tailwindcss_logo.png
diff --git a/public/todo-graphic.webp b/public/todo-graphic.webp
diff --git a/public/todo.webp b/public/todo.webp
diff --git a/public/typescript.webp b/public/typescript.webp
diff --git a/src/components/SideBar/index.tsx b/src/components/SideBar/index.tsx
@@ -62,7 +62,7 @@ export default function Index({
                       return (
                         <button
                           key={options.id}
-                          className={`py-3 w-52 px-4 relative flex items-center group justify-between font-bold cursor-pointer ${`${
+                          className={`py-3 w-[14rem] px-4 relative flex items-center group justify-between font-bold cursor-pointer ${`${
                             active.id === options.id
                               ? "bg-primary rounded-r-full text-white"
                               : `${
@@ -80,11 +80,18 @@ export default function Index({
                         >
                           <div className="flex items-center gap-x-2 justify-between">
                             <Icon type="board" />
-                            {options.name}
+                            <span>
+                              {" "}
+                              {options.name}
+                              <span className="text-sm font-bold pl-1">
+                                ({options.columns.length})
+                              </span>
+                            </span>
                           </div>
                           <span onClick={() => setOpenMenu(true)}>
                             <div className="relative">
                               <CgMoreVerticalO
+                                size={15}
                                 className={`${
                                   isOpenMenu
                                     ? `${active.id !== options.id && `hidden`}`

diff --git a/src/page/workspace/index.tsx b/src/page/workspace/index.tsx
@@ -11,6 +11,12 @@ import ToggleBtn from "components/ToggleBtn";
 import { Link, useNavigate } from "react-router-dom";
 import { AppState } from "types";
 import { IoArrowBack } from "react-icons/io5";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "swiper/css/autoplay";
+import { Autoplay, Pagination } from "swiper/modules";
 
 export default function Index() {
   const navigate = useNavigate();
@@ -111,18 +117,39 @@ export default function Index() {
               Available workspace
             </button>
           ) : null}
-          <div className="flex-wrap flex items-start md:items-center relative h-full justify-center md:mt-12">
-            <div className="hidden md:block lg:w-[30rem] h-auto">
-              <img
-                src="/start-project.png"
-                alt="start project"
-                loading="eager"
-                className="w-72 lg:w-[30rem] h-auto"
-              />
-            </div>
-            <div className="w-96 mx-6 md:mx-0 mt-6">
+          <div className="flex-wrap flex items-start md:items-center relative h-full justify-center">
+            <Swiper
+              loop={true}
+              spaceBetween={20}
+              centeredSlides={true}
+              autoplay={{
+                delay: 2500,
+                disableOnInteraction: false,
+              }}
+              pagination={{
+                clickable: true,
+              }}
+              modules={[Autoplay, Pagination]}
+              className="mySwiper hidden md:inline md:w-[30rem] ml-0 mr-10 h-auto"
+            >
+              {["/start-project.webp", "/todo-graphic.webp", "/todo.webp"].map(
+                (ele, index) => {
+                  return (
+                    <SwiperSlide key={index}>
+                      <img
+                        src={ele}
+                        alt="start project"
+                        loading="eager"
+                        className="w-[25rem] h-auto"
+                      />
+                    </SwiperSlide>
+                  );
+                }
+              )}
+            </Swiper>
+            <div className="w-96 mx-6 md:mx-0 mt-8">
               <div>
-                <h1 className="text-primary text-xl sm:text-2xl md:text-3xl font-bold ">
+                <h1 className="text-primary text-xl sm:text-3xl md:text-3xl font-bold ">
                   Welcome to Kanban!
                 </h1>
                 <p className="text-gray mt-1 text-base mb-8">

diff --git a/yarn.lock b/yarn.lock
@@ -4843,6 +4843,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swiper@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.0.5.tgz#6ed1ad06e6906ba42fd4b93d4988f0626a49046e"
+  integrity sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==
+
 tailwindcss@^3.1.8:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.0.tgz#045a9c474e6885ebd0436354e611a76af1c76839"