diff --git a/yoga-app/package-lock.json b/yoga-app/package-lock.json index af303f4..74ee318 100644 --- a/yoga-app/package-lock.json +++ b/yoga-app/package-lock.json @@ -17,6 +17,7 @@ "@types/ityped": "^1.0.3", "@types/pg": "^8.11.10", "@types/qs": "^6.9.18", + "@types/react-slick": "^0.23.13", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "ajv-i18n": "^4.2.0", @@ -33,12 +34,14 @@ "react": "^19.0.0", "react-bootstrap": "^2.10.9", "react-dom": "^19.0.0", + "react-slick": "^0.30.3", + "slick-carousel": "^1.8.1", "validator": "^13.12.0" }, "devDependencies": { "@eslint/eslintrc": "^3", "@types/bcryptjs": "^2.4.6", - "@types/node": "^20", + "@types/node": "^20.17.47", "@types/nodemailer": "^6.4.17", "@types/react": "^19", "@types/react-dom": "^19", @@ -1567,9 +1570,10 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "20.17.10", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.10.tgz", - "integrity": "sha512-/jrvh5h6NXhEauFFexRin69nA0uHJ5gwk4iDivp/DeoEua3uwCUto6PC86IpRITBOs4+6i2I56K5x5b6WYGXHA==", + "version": "20.17.47", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.47.tgz", + "integrity": "sha512-3dLX0Upo1v7RvUimvxLeXqwrfyKxUINk0EAM83swP2mlSUcwV73sZy8XhNz8bcZ3VbsfQyC/y6jRdL5tgCNpDQ==", + "license": "MIT", "dependencies": { "undici-types": "~6.19.2" } @@ -1673,6 +1677,15 @@ "@types/react": "^19.0.0" } }, + "node_modules/@types/react-slick": { + "version": "0.23.13", + "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz", + "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==", + "license": "MIT", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.12", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz", @@ -2739,6 +2752,12 @@ "node": ">=10.13.0" } }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==", + "license": "MIT" + }, "node_modules/es-abstract": { "version": "1.23.8", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.8.tgz", @@ -4383,6 +4402,7 @@ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dev": true, + "license": "MIT", "dependencies": { "argparse": "^2.0.1" }, @@ -4407,6 +4427,15 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "license": "MIT", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/json5": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", @@ -5550,6 +5579,23 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "node_modules/react-slick": { + "version": "0.30.3", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.3.tgz", + "integrity": "sha512-B4x0L9GhkEWUMApeHxr/Ezp2NncpGc+5174R02j+zFiWuYboaq98vmxwlpafZfMjZic1bjdIqqmwLDcQY0QaFA==", + "license": "MIT", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -5644,6 +5690,12 @@ "node": ">=0.10.0" } }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==", + "license": "MIT" + }, "node_modules/resolve": { "version": "1.22.10", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", @@ -5981,6 +6033,15 @@ "is-arrayish": "^0.3.1" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "license": "MIT", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -6035,6 +6096,12 @@ "node": ">=0.6.19" } }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==", + "license": "MIT" + }, "node_modules/string.prototype.includes": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz", diff --git a/yoga-app/package.json b/yoga-app/package.json index 949c0a8..5752382 100644 --- a/yoga-app/package.json +++ b/yoga-app/package.json @@ -19,6 +19,7 @@ "@types/ityped": "^1.0.3", "@types/pg": "^8.11.10", "@types/qs": "^6.9.18", + "@types/react-slick": "^0.23.13", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "ajv-i18n": "^4.2.0", @@ -35,12 +36,14 @@ "react": "^19.0.0", "react-bootstrap": "^2.10.9", "react-dom": "^19.0.0", + "react-slick": "^0.30.3", + "slick-carousel": "^1.8.1", "validator": "^13.12.0" }, "devDependencies": { "@eslint/eslintrc": "^3", "@types/bcryptjs": "^2.4.6", - "@types/node": "^20", + "@types/node": "^20.17.47", "@types/nodemailer": "^6.4.17", "@types/react": "^19", "@types/react-dom": "^19", diff --git a/yoga-app/src/components/our.services.component.tsx b/yoga-app/src/components/our.services.component.tsx index 9599a5c..5ad6f74 100644 --- a/yoga-app/src/components/our.services.component.tsx +++ b/yoga-app/src/components/our.services.component.tsx @@ -1,11 +1,73 @@ +'use client'; import YogaImageComponent from "@/components/yoga.image.component"; import {YogaOurServicesComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-our-services-component"; +// import OurServiceItemComponent from "@/components/our.services.item.component"; +import "slick-carousel/slick/slick.css"; +import "slick-carousel/slick/slick-theme.css"; +import Slider ,{Settings} from "react-slick"; import OurServiceItemComponent from "@/components/our.services.item.component"; + export interface Props{ config: YogaOurServicesComponent_Plain } const OurServiceComponent = ({config: {title,header,description,services}}: Props) => { + + const settings: Settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 4, + slidesToScroll: 1, + swipe: true, + responsive: [ + /** + * + * col-lg-3 col-md-6 col-sm-6 col-xs-12 + * + * Breakpoint Class infix Dimensions + * X-Small None <576px + * Small sm ≥576px + * Medium md ≥768px + * Large lg ≥992px + * Extra large xl ≥1200px + * Extra extra large xxl ≥1400px + */ + { + breakpoint: 992, + settings: { + slidesToShow: 4, + slidesToScroll: 1, + infinite: true, + dots: true + } + }, + { + breakpoint: 768, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + initialSlide: 1 + } + }, + { + breakpoint: 576, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + initialSlide: 1 + } + }, + { + breakpoint: 480, + settings: { + slidesToShow: 1, + slidesToScroll: 1 + } + } + ] + }; + console.info(settings) return (
@@ -18,12 +80,21 @@ const OurServiceComponent = ({config: {title,header,description,services}}: Prop
-
+ + {/*
*/} + {/* {services.map(*/} + {/* itemConfig =>*/} + {/* */} + {/* )}*/} + {/*
*/} + + {services.map( itemConfig => )} -
+ +
diff --git a/yoga-app/src/components/our.services.item.component.module.css b/yoga-app/src/components/our.services.item.component.module.css new file mode 100644 index 0000000..3103e8f --- /dev/null +++ b/yoga-app/src/components/our.services.item.component.module.css @@ -0,0 +1,37 @@ +.serviceSlide{ + +} + +button:first-of-type{ + left: 6px; + z-index: 1; +} + +button:last-of-type{ + right: 6px; +} + +.serviceSlide{ + margin: 0 6px; + +} + +:global(.slick-active){ + padding-left: 3px; + padding-right: 3px; +} + +:global(div:nth-child(1 of .slick-active)){ + padding-left: 0; + padding-right: 3px; +} + +:global(div:nth-last-child(1 of .slick-active)){ + padding-left: 3px; + padding-right: 0; +} + +/*:global(div.slick-active):nth-last-child(n!*){*/ +/* padding-left: 6px;*/ +/* padding-right: 0;*!*/ +/*}*/ \ No newline at end of file diff --git a/yoga-app/src/components/our.services.item.component.tsx b/yoga-app/src/components/our.services.item.component.tsx index 3e1804f..80a0d2e 100644 --- a/yoga-app/src/components/our.services.item.component.tsx +++ b/yoga-app/src/components/our.services.item.component.tsx @@ -2,6 +2,7 @@ import YogaImageComponent from "@/components/yoga.image.component"; import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service"; import {StrapiFile} from "@/types/types"; import strapiApi from "@/api/strapi/strapi-api"; +import styles from './our.services.item.component.module.css' export interface Props { config: YogaSingleService_Plain @@ -11,7 +12,8 @@ const OurServiceItemComponent = ({config: {header,description,image}}: Props) => const imageFile: StrapiFile = image as StrapiFile; return ( -
+
+ {/*
*/}