rschneider/yogastic
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

[yoga-3] our services carousel #8

Merged
rschneider merged 1 commits from feature/yoga-3-services-carousel into main 2025-05-17 20:07:25 +00:00
Conversation 0 Commits 1 Files Changed 5 +188 -8
5 changed files with 188 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
yoga-app/package-lock.json generated
View File

@ -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",

5
yoga-app/package.json
View File

@ -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",

75
yoga-app/src/components/our.services.component.tsx
View File

@ -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 (
<section className="services_section">
<div className="container">
@ -18,12 +80,21 @@ const OurServiceComponent = ({config: {title,header,description,services}}: Prop
</div>
</div>
</div>
<div className="row" data-aos="fade-up">
{/*<div className="row" data-aos="fade-up">*/}
{/* {services.map(*/}
{/* itemConfig =>*/}
{/* <OurServiceItemComponent config={itemConfig} key={itemConfig.id} />*/}
{/* )}*/}
{/*</div>*/}
<Slider {...settings}>
{services.map(
itemConfig =>
<OurServiceItemComponent config={itemConfig} key={itemConfig.id} />
)}
</div>
</Slider>
<figure className="services_left_shape left_shape mb-0">
<YogaImageComponent src="/assets/images/services_left_shape.png" alt="" className="img-fluid"/>
</figure>

37
yoga-app/src/components/our.services.item.component.module.css Normal file
View File

@ -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;*!*/
/*}*/

4
yoga-app/src/components/our.services.item.component.tsx
View File

@ -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 (
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className={styles.serviceSlide}>
{/*<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">*/}
<div className="services_box_content">
<div className="services_box_upper_portion">
<figure className="mb-0">