diff --git a/package-lock.json b/package-lock.json index fb3554a..59440c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "next": "15.3.2", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "swiper": "^11.2.8" }, "devDependencies": { "@eslint/eslintrc": "^3", @@ -5517,6 +5518,25 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "11.2.8", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.8.tgz", + "integrity": "sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/tinyglobby": { "version": "0.2.14", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz", diff --git a/package.json b/package.json index 7b1b1da..b17420c 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "dependencies": { "next": "15.3.2", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "swiper": "^11.2.8" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/public/images/empty-image.jpg b/public/images/empty-image.jpg new file mode 100644 index 0000000..7b2c271 Binary files /dev/null and b/public/images/empty-image.jpg differ diff --git a/public/svg/empty-paper.svg b/public/svg/empty-paper.svg new file mode 100644 index 0000000..ef0828b --- /dev/null +++ b/public/svg/empty-paper.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/core/.gitkeep b/src/core/.gitkeep deleted file mode 100644 index c710e69..0000000 --- a/src/core/.gitkeep +++ /dev/null @@ -1 +0,0 @@ -reusable components \ No newline at end of file diff --git a/src/views/home/ui/license/license.tsx b/src/views/home/ui/license/license.tsx index 4602bd8..ae8d8b9 100644 --- a/src/views/home/ui/license/license.tsx +++ b/src/views/home/ui/license/license.tsx @@ -1,9 +1,11 @@ import s from './license.module.scss'; import { Button, Input, Mark } from '@shared/ui'; +import { LicenseSlider } from '@/widgets'; +import Image from 'next/image'; import bgForm from '@public/images/bg-form.jpg'; -import Image from 'next/image'; +import emptyPaper from '@public/svg/empty-paper.svg'; export default function License() { return ( @@ -12,7 +14,9 @@ export default function License() { Наши услуги подтверждены лицензиями и сертификатами -
Slider here
+
+ +
@@ -45,3 +49,26 @@ export default function License() { ); } + +const slides = [ + { + id: '0', + name: '', + image: emptyPaper, + }, + { + id: '1', + name: '', + image: emptyPaper, + }, + { + id: '2', + name: '', + image: emptyPaper, + }, + { + id: '3', + name: '', + image: emptyPaper, + }, +]; diff --git a/src/widgets/.gitkeep b/src/widgets/.gitkeep deleted file mode 100644 index c710e69..0000000 --- a/src/widgets/.gitkeep +++ /dev/null @@ -1 +0,0 @@ -reusable components \ No newline at end of file diff --git a/src/widgets/index.ts b/src/widgets/index.ts new file mode 100644 index 0000000..3b69a03 --- /dev/null +++ b/src/widgets/index.ts @@ -0,0 +1 @@ +export { LicenseSlider } from './license-slider'; diff --git a/src/widgets/license-slider/index.ts b/src/widgets/license-slider/index.ts new file mode 100644 index 0000000..99b8748 --- /dev/null +++ b/src/widgets/license-slider/index.ts @@ -0,0 +1 @@ +export { default as LicenseSlider } from './license-slider'; diff --git a/src/widgets/license-slider/license-slider.module.scss b/src/widgets/license-slider/license-slider.module.scss new file mode 100644 index 0000000..e1541b7 --- /dev/null +++ b/src/widgets/license-slider/license-slider.module.scss @@ -0,0 +1,9 @@ +.Slider { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.Slide { + cursor: pointer; +} \ No newline at end of file diff --git a/src/widgets/license-slider/license-slider.tsx b/src/widgets/license-slider/license-slider.tsx new file mode 100644 index 0000000..f5869df --- /dev/null +++ b/src/widgets/license-slider/license-slider.tsx @@ -0,0 +1,43 @@ +'use client'; + +import s from './license-slider.module.scss'; + +import Image from 'next/image'; +import { StaticImport } from 'next/dist/shared/lib/get-img-props'; +import { clsx } from 'clsx'; + +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; + +type LicenseSliderProps = { + className?: string; + images: { + id: string; + name: string; + image: string | StaticImport; + }[]; +}; + +const mockFullSizeImage = 'images/empty-image.jpg'; + +export default function LicenseSlider({ + className, + images, +}: LicenseSliderProps) { + return ( + console.log('slide change')} + onSwiper={(swiper) => console.log(swiper)} + > + {images.map(({ id, name, image }) => ( + + + {name} + + + ))} + + ); +}