From 894fe14eaff5fd8e7890a562c52be3d451eadd67 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Thu, 11 Jul 2024 17:42:07 +0500 Subject: [PATCH] feat: add scrolling to the courusel --- app/App.jsx | 1 + .../ReleaseCourusel/ReleaseCourusel.jsx | 69 +++++++++++++++---- .../ReleaseCourusel.module.css | 11 +++ app/components/ReleaseLink/ReleaseLink.jsx | 10 +-- app/globals.css | 30 -------- package-lock.json | 19 +++++ package.json | 1 + 7 files changed, 93 insertions(+), 48 deletions(-) create mode 100644 app/components/ReleaseCourusel/ReleaseCourusel.module.css diff --git a/app/App.jsx b/app/App.jsx index 76c1fc4..9fbfaa0 100644 --- a/app/App.jsx +++ b/app/App.jsx @@ -1,6 +1,7 @@ import { Navbar } from "./components/Navbar/Navbar"; import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"] }); + export const App = (props) => { return ( diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.jsx b/app/components/ReleaseCourusel/ReleaseCourusel.jsx index a2441e7..767a000 100644 --- a/app/components/ReleaseCourusel/ReleaseCourusel.jsx +++ b/app/components/ReleaseCourusel/ReleaseCourusel.jsx @@ -1,24 +1,67 @@ "use client"; +import { useEffect, useRef } from "react"; import { ReleaseLink } from "../ReleaseLink/ReleaseLink"; +import Link from "next/link"; + +import Styles from "./ReleaseCourusel.module.css"; +import Swiper from "swiper"; +import "swiper/css"; +import "swiper/css/navigation"; +import { Navigation } from "swiper/modules"; + export const ReleaseCourusel = (props) => { + useEffect(() => { + const options = { + direction: "horizontal", + spaceBetween: 8, + allowTouchMove: true, + slidesPerView: "auto", + navigation: { + enabled: false, + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + }, + breakpoints: { + 450: { + navigation: { + enabled: true, + }, + }, + }, + modules: [Navigation], + }; + new Swiper(".swiper", options); + }, []); + return ( -
-
+
+

{props.sectionTitle}

- +
-

Показать все

- +

Показать все

+
- +
-
- {props.content.map((release) => { - return ; - })} +
+
+
+ {props.content.map((release) => { + return ( +
+ +
+ ); + })} +
+
+
+
); diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.module.css b/app/components/ReleaseCourusel/ReleaseCourusel.module.css new file mode 100644 index 0000000..3a53a01 --- /dev/null +++ b/app/components/ReleaseCourusel/ReleaseCourusel.module.css @@ -0,0 +1,11 @@ +.swiper-button:global(.swiper-button-disabled) { + opacity: 0 !important; + } + +.section .swiper-button { + display: none !important; +} + +.section:hover .swiper-button { + display: flex !important; +} \ No newline at end of file diff --git a/app/components/ReleaseLink/ReleaseLink.jsx b/app/components/ReleaseLink/ReleaseLink.jsx index 88b8d1a..45366c5 100644 --- a/app/components/ReleaseLink/ReleaseLink.jsx +++ b/app/components/ReleaseLink/ReleaseLink.jsx @@ -3,11 +3,11 @@ import Link from "next/link"; export const ReleaseLink = (props) => { const grade = props.grade.toFixed(1); return ( - +
-
+
@@ -26,10 +26,10 @@ export const ReleaseLink = (props) => { >

{grade}

-
+

{props.status.name}

-

{props.title_ru}

+

{props.title_ru}

diff --git a/app/globals.css b/app/globals.css index 3f9ae90..b5c61c9 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,33 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -/* :root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - -@layer utilities { - .text-balance { - text-wrap: balance; - } -} */ diff --git a/package-lock.json b/package-lock.json index 0a45192..ce954d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "next": "14.2.5", "react": "^18", "react-dom": "^18", + "swiper": "^11.1.4", "swr": "^2.2.5", "zustand": "^4.5.4" }, @@ -4398,6 +4399,24 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "11.1.4", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.4.tgz", + "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/swr": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz", diff --git a/package.json b/package.json index a80ae22..9e8b061 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "next": "14.2.5", "react": "^18", "react-dom": "^18", + "swiper": "^11.1.4", "swr": "^2.2.5", "zustand": "^4.5.4" },