feat: add slider
This commit is contained in:
22
package-lock.json
generated
22
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
BIN
public/images/empty-image.jpg
Normal file
BIN
public/images/empty-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
50
public/svg/empty-paper.svg
Normal file
50
public/svg/empty-paper.svg
Normal file
@@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 400 450" style="enable-background:new 0 0 400 450;" xml:space="preserve">
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="57.9286" y1="-32.737" x2="342.1984" y2="482.9674">
|
||||
<stop offset="0.6888" style="stop-color:#B1B1B1"/>
|
||||
<stop offset="0.7285" style="stop-color:#B6B6B7"/>
|
||||
<stop offset="0.7792" style="stop-color:#C5C6C6"/>
|
||||
<stop offset="0.8356" style="stop-color:#DEDFE0"/>
|
||||
<stop offset="0.8564" style="stop-color:#E9EAEC"/>
|
||||
</linearGradient>
|
||||
<rect style="fill:url(#SVGID_1_);" width="400" height="450"/>
|
||||
<linearGradient id="SVGID_00000092431468075801409100000001785422653880840880_" gradientUnits="userSpaceOnUse" x1="-1.2847" y1="381.6029" x2="311.3088" y2="2.6513" gradientTransform="matrix(-1 0 0 1 328.1064 0)">
|
||||
<stop offset="0" style="stop-color:#D6D6D6"/>
|
||||
<stop offset="0.0286" style="stop-color:#E3E3E3"/>
|
||||
<stop offset="0.0797" style="stop-color:#F3F3F3"/>
|
||||
<stop offset="0.1376" style="stop-color:#FCFCFC"/>
|
||||
<stop offset="0.2157" style="stop-color:#FFFFFF"/>
|
||||
<stop offset="0.4066" style="stop-color:#F9FAFA"/>
|
||||
<stop offset="0.5936" style="stop-color:#EEEFF1"/>
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_00000092431468075801409100000001785422653880840880_);" d="M0,0h399.991
|
||||
C400,85.167,400,195.667,400,267.482c0,40.935-10.167,57.018-30.941,77.621c-39.216,38.894-175.393,83.521-228.69,92.004
|
||||
C98.403,443.788,63.291,449.474,0,449.478V0z"/>
|
||||
<path style="fill:#B6B6B6;" d="M140.369,437.107C98.403,443.788,63.624,449.474,0,449.478V450c63.791,0,98.403-5.69,140.369-12.371
|
||||
c7.205-1.147,15.985-3.103,25.855-5.72C156.354,434.197,147.574,435.961,140.369,437.107z"/>
|
||||
<path style="fill:#EBEBEB;" d="M285.738,393.981c-52.481,21.401-113.877,38.113-145.367,43.126
|
||||
C195,424.566,244.894,392.766,284.99,332.044L285.738,393.981z"/>
|
||||
<linearGradient id="SVGID_00000088827454265147082520000018364783835286127748_" gradientUnits="userSpaceOnUse" x1="-0.2559" y1="376.5401" x2="26.9199" y2="325.43" gradientTransform="matrix(-0.9999 0.0125 0.0125 0.9999 325.0059 -3.0947)">
|
||||
<stop offset="0.1061" style="stop-color:#828282"/>
|
||||
<stop offset="0.4697" style="stop-color:#CBCBCB"/>
|
||||
<stop offset="1" style="stop-color:#858585"/>
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_00000088827454265147082520000018364783835286127748_);" d="M284.99,332.044
|
||||
c27.121,14.806,65.801,29.605,81.623,14.697c0.913-0.864,2.121-1.362,2.979-2.322c-0.177,0.225-0.352,0.476-0.533,0.684
|
||||
c-14.903,16.99-46.976,34.06-83.322,48.879L284.99,332.044z"/>
|
||||
<linearGradient id="SVGID_00000160896986531897257690000003598917995091685003_" gradientUnits="userSpaceOnUse" x1="66.4041" y1="407.0864" x2="87.9274" y2="354.5603" gradientTransform="matrix(-0.9999 0.0125 0.0125 0.9999 325.0059 -3.0947)">
|
||||
<stop offset="0" style="stop-color:#C8C8C8"/>
|
||||
<stop offset="0.2454" style="stop-color:#ADADAD"/>
|
||||
<stop offset="0.3301" style="stop-color:#B7B7B7"/>
|
||||
<stop offset="0.7764" style="stop-color:#E5E5E5"/>
|
||||
<stop offset="1" style="stop-color:#F7F7F7"/>
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_00000160896986531897257690000003598917995091685003_);" d="M374.459,340.525
|
||||
c-36.689,48.121-179.686,87.854-233.912,96.73c-0.399,0.065-0.718-0.062-1.108,0c56.186-10.63,105.481-42.467,145.574-103.187
|
||||
c26.545,12.035,65.786,32.856,83.486,10.868C368.323,345.162,374.626,340.306,374.459,340.525z"/>
|
||||
<path style="fill:#828282;" d="M359.061,351.22c13.189-5.533,40.126-35.387,40.355-73.845c0.417-70,0.507-189.88-0.139-277.375
|
||||
h0.691C399.99,93.933,400,207,400,277.083c0,31.571-16.633,57.537-33.147,70.268C366.392,347.869,360.724,351.539,359.061,351.22z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@@ -1 +0,0 @@
|
||||
reusable components
|
||||
@@ -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() {
|
||||
Наши услуги <Mark>подтверждены лицензиями</Mark> и сертификатами
|
||||
</h2>
|
||||
|
||||
<div className={s.Slider}>Slider here</div>
|
||||
<div className={s.Slider}>
|
||||
<LicenseSlider images={slides} />
|
||||
</div>
|
||||
|
||||
<div className={s.Form}>
|
||||
<div className={s.Offer}>
|
||||
@@ -45,3 +49,26 @@ export default function License() {
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const slides = [
|
||||
{
|
||||
id: '0',
|
||||
name: '',
|
||||
image: emptyPaper,
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
name: '',
|
||||
image: emptyPaper,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '',
|
||||
image: emptyPaper,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '',
|
||||
image: emptyPaper,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
reusable components
|
||||
1
src/widgets/index.ts
Normal file
1
src/widgets/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { LicenseSlider } from './license-slider';
|
||||
1
src/widgets/license-slider/index.ts
Normal file
1
src/widgets/license-slider/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as LicenseSlider } from './license-slider';
|
||||
9
src/widgets/license-slider/license-slider.module.scss
Normal file
9
src/widgets/license-slider/license-slider.module.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
.Slider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.Slide {
|
||||
cursor: pointer;
|
||||
}
|
||||
43
src/widgets/license-slider/license-slider.tsx
Normal file
43
src/widgets/license-slider/license-slider.tsx
Normal file
@@ -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 (
|
||||
<Swiper
|
||||
className={clsx(s.Slider, className)}
|
||||
slidesPerView={3}
|
||||
onSlideChange={() => console.log('slide change')}
|
||||
onSwiper={(swiper) => console.log(swiper)}
|
||||
>
|
||||
{images.map(({ id, name, image }) => (
|
||||
<SwiperSlide key={id}>
|
||||
<a href={mockFullSizeImage} target='_blank'>
|
||||
<Image className={s.Slide} src={image} alt={name} />
|
||||
</a>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user