diff --git a/gatsby-config.ts b/gatsby-config.ts index a800ad3..a52c7a5 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -37,8 +37,8 @@ const config: GatsbyConfig = { name: 'Bianka & David', short_name: 'Bianka & David', start_url: '/', - background_color: '#79bde1ed', - theme_color: '#79bde1ed', + background_color: '#343734ed', + theme_color: '#343734ed', display: 'minimal-ui', icon: 'static/assets/wedding-rings-icon.png', // This path is relative to the root of the site. }, diff --git a/package-lock.json b/package-lock.json index 4f99f17..fdb3b01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react-cookie-consent": "^9.0.0", "react-dom": "^18.2.0", "react-icons": "^5.0.1", + "react-swipeable": "^7.0.1", "tsconfig-paths-webpack-plugin": "^4.1.0" }, "devDependencies": { @@ -15301,6 +15302,14 @@ "node": ">=0.4.0" } }, + "node_modules/react-swipeable": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.1.tgz", + "integrity": "sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==", + "peerDependencies": { + "react": "^16.8.3 || ^17 || ^18" + } + }, "node_modules/read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", diff --git a/package.json b/package.json index 54344ed..b903807 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,8 @@ "homepage": "https://biankaesdavid.info/", "license": "MIT", "dependencies": { - "@fontsource/roboto": "^5.0.8", "@fontsource/montserrat-alternates": "^5.0.8", + "@fontsource/roboto": "^5.0.8", "@gatsbyjs/reach-router": "^2.0.1", "crypto-js": "^4.2.0", "gatsby": "^5.13.3", @@ -25,6 +25,7 @@ "react-cookie-consent": "^9.0.0", "react-dom": "^18.2.0", "react-icons": "^5.0.1", + "react-swipeable": "^7.0.1", "tsconfig-paths-webpack-plugin": "^4.1.0" }, "keywords": [ diff --git a/src/assets/scss/cards/_proposal.scss b/src/assets/scss/cards/_proposal.scss new file mode 100644 index 0000000..a510c95 --- /dev/null +++ b/src/assets/scss/cards/_proposal.scss @@ -0,0 +1,32 @@ +.embedded-video { + margin-bottom: 3rem; +} + +.image-gallery { + position: relative; + margin-bottom: 1rem; +} + +.image-paginator { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'center'); + gap: 0.5rem; + color: white; +} + +.paginator-icon { + cursor: pointer; + opacity: 1; + font-size: 1.75rem; +} + +.disabled-paginator-icon { + cursor: default; + opacity: 0.5; + font-size: 1.75rem; +} + +.page-indicator { + user-select: none; +} diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index e01eedd..324caa2 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -45,3 +45,7 @@ @import 'layout/header'; @import 'layout/main'; @import 'layout/footer'; + +// Cards. + + @import "cards/proposal"; diff --git a/src/cards/Proposal.tsx b/src/cards/Proposal.tsx index 0ffbf59..579664d 100644 --- a/src/cards/Proposal.tsx +++ b/src/cards/Proposal.tsx @@ -1,32 +1,72 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { StaticImage } from 'gatsby-plugin-image'; import Card from '@/components/Card'; +import Video from '@/components/Video'; +import { StaticImage } from 'gatsby-plugin-image'; +import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri'; +import { useSwipeable } from 'react-swipeable'; + +const Proposal = props => { + const [currentPage, setCurrentPage] = useState(1); + const totalPages = 3; + + const prevPage = () => { + setCurrentPage(currentPage => Math.max(1, currentPage - 1)); + }; + + const nextPage = () => { + setCurrentPage(currentPage => Math.min(totalPages, currentPage + 1)); + }; + + const handlers = useSwipeable({ + onSwipedLeft: () => nextPage(), + onSwipedRight: () => prevPage(), + preventScrollOnSwipe: true, + trackMouse: false, + trackTouch: true, + }); -const Proposal = (props) => ( - -

Lánykérés

- - - -

- Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam - erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec - lorem luctus ultrices. -

-

- Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc - rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel - lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis - libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat tempus. -

- -); + const renderCurrentImage = () => { + switch ( currentPage ) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + default: + return null; + } + }; + + return ( + +

Lánykérés

+ +
+ {/*{props.isVideoVisible &&
+ +
+ {renderCurrentImage()} +
+ +
+ + {currentPage} / {totalPages} + +
+ + ); +}; Proposal.propTypes = { articleClassName: PropTypes.string.isRequired, style: PropTypes.any.isRequired, onCloseArticle: PropTypes.func.isRequired, + isVideoVisible: PropTypes.bool.isRequired, }; export default Proposal; diff --git a/src/components/Main.tsx b/src/components/Main.tsx index 36a6fa7..674b292 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -11,8 +11,7 @@ import Menu from '@/cards/Menu'; const Main = props => (
+ style={{ display: 'none' }} onCloseArticle={props.onCloseArticle} /> @@ -21,12 +20,10 @@ const Main = props => ( onCloseArticle={props.onCloseArticle} /> + style={{ display: 'none' }} onCloseArticle={props.onCloseArticle} isVideoVisible={props.isVideoVisible} /> + style={{ display: 'none' }} onCloseArticle={props.onCloseArticle} /> @@ -43,6 +40,7 @@ Main.propTypes = { onCloseArticle: PropTypes.func, timeout: PropTypes.bool, setWrapperRef: PropTypes.func.isRequired, + isVideoVisible: PropTypes.bool.isRequired, }; export default Main; diff --git a/src/components/Video.tsx b/src/components/Video.tsx new file mode 100644 index 0000000..cff7a7d --- /dev/null +++ b/src/components/Video.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +const Video = ({ videoSrcURL, videoTitle, ...props }) => ( +
+