diff --git a/components/carousel/Carousel.js b/components/carousel/Carousel.js new file mode 100644 index 00000000..6470d2a6 --- /dev/null +++ b/components/carousel/Carousel.js @@ -0,0 +1,49 @@ +import React, { useEffect } from 'react' +import useEmblaCarousel from 'embla-carousel-react' +import gumletLoader from "@/components/new-index/gumletLoader"; +import Image from "next/image"; + +const Carousel = ({gallery})=> { + const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }) + + useEffect(() => { + if (emblaApi) { + console.log(emblaApi.slideNodes()) // Access API + } + }, [emblaApi]) + + return ( +
+
+ {gallery?.map((current, index) => ( +
+
+ {`Gallery +
+
+ ))} + + + {/*
Slide 1
+
Slide 2
+
Slide 3
*/} +
+
+ ) +} + + export default Carousel diff --git a/components/carousel/EmblaCarousel.jsx b/components/carousel/EmblaCarousel.jsx new file mode 100644 index 00000000..4ba6367b --- /dev/null +++ b/components/carousel/EmblaCarousel.jsx @@ -0,0 +1,110 @@ +import React, { useState, useEffect, useCallback } from 'react' +import useEmblaCarousel from 'embla-carousel-react' +import { Thumb } from './EmblaCarouselThumbsButton' +// import imageByIndex from './imageByIndex' +import Image from "next/image"; +import gumletLoader from "@/components/new-index/gumletLoader"; + +import { + PrevButton, + NextButton, + usePrevNextButtons +} from './EmblaCarouselArrowButtons' + +const EmblaCarousel = (props) => { + const { slides, options } = props + const [selectedIndex, setSelectedIndex] = useState(0) + const [emblaMainRef, emblaMainApi] = useEmblaCarousel(options) + const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel({ + containScroll: 'keepSnaps', + dragFree: true + }) + + const onThumbClick = useCallback( + (index) => { + if (!emblaMainApi || !emblaThumbsApi) return + emblaMainApi.scrollTo(index) + }, + [emblaMainApi, emblaThumbsApi] + ) + + const onSelect = useCallback(() => { + if (!emblaMainApi || !emblaThumbsApi) return + setSelectedIndex(emblaMainApi.selectedScrollSnap()) + emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap()) + }, [emblaMainApi, emblaThumbsApi, setSelectedIndex]) + + useEffect(() => { + if (!emblaMainApi) return + onSelect() + emblaMainApi.on('select', onSelect) + emblaMainApi.on('reInit', onSelect) + }, [emblaMainApi, onSelect]) + + const { + prevBtnDisabled, + nextBtnDisabled, + onPrevButtonClick, + onNextButtonClick + } = usePrevNextButtons(emblaMainApi) + + return ( +
+
+ + +
+
+
+ {slides.map((item,index) => ( +
+
+ {index + 1} +
+ {/* Your alt text */} +
+ {`Gallery +
+
+ ))} +
+
+ +
+
+
+ {slides.map((item,index) => ( + onThumbClick(index)} + selected={index === selectedIndex} + index={index} + imgSrc={item.thumbnail} + key={index} + /> + ))} +
+
+
+
+ ) +} + +export default EmblaCarousel diff --git a/components/carousel/EmblaCarouselArrowButtons.jsx b/components/carousel/EmblaCarouselArrowButtons.jsx new file mode 100644 index 00000000..408e9f6b --- /dev/null +++ b/components/carousel/EmblaCarouselArrowButtons.jsx @@ -0,0 +1,87 @@ +import React, { useCallback, useEffect, useState } from 'react' + +export const usePrevNextButtons = (emblaApi) => { + const [prevBtnDisabled, setPrevBtnDisabled] = useState(true) + const [nextBtnDisabled, setNextBtnDisabled] = useState(true) + + const onPrevButtonClick = useCallback(() => { + if (!emblaApi) return + emblaApi.scrollPrev() + }, [emblaApi]) + + const onNextButtonClick = useCallback(() => { + if (!emblaApi) return + emblaApi.scrollNext() + }, [emblaApi]) + + const onSelect = useCallback((emblaApi) => { + setPrevBtnDisabled(!emblaApi.canScrollPrev()) + setNextBtnDisabled(!emblaApi.canScrollNext()) + }, []) + + useEffect(() => { + if (!emblaApi) return + + onSelect(emblaApi) + emblaApi.on('reInit', onSelect) + emblaApi.on('select', onSelect) + }, [emblaApi, onSelect]) + + return { + prevBtnDisabled, + nextBtnDisabled, + onPrevButtonClick, + onNextButtonClick + } +} + +export const PrevButton = (props) => { + const { children, ...restProps } = props + + return ( + + ) +} + +export const NextButton = (props) => { + const { children, ...restProps } = props + + return ( + + ) +} diff --git a/components/carousel/EmblaCarouselThumbsButton.jsx b/components/carousel/EmblaCarouselThumbsButton.jsx new file mode 100644 index 00000000..fb2dc538 --- /dev/null +++ b/components/carousel/EmblaCarouselThumbsButton.jsx @@ -0,0 +1,57 @@ +import React from 'react' +import Image from "next/image"; +import gumletLoader from "@/components/new-index/gumletLoader"; + +export const Thumb = (props) => { + const { selected, imgSrc, index, onClick } = props + + return ( +
+ +
+ ) +} diff --git a/components/carousel/Footer.jsx b/components/carousel/Footer.jsx new file mode 100644 index 00000000..ac7c4feb --- /dev/null +++ b/components/carousel/Footer.jsx @@ -0,0 +1,21 @@ +import React from 'react' + +const Footer = () => ( + +) + +export default Footer diff --git a/components/carousel/Header.jsx b/components/carousel/Header.jsx new file mode 100644 index 00000000..4c4fced1 --- /dev/null +++ b/components/carousel/Header.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Header = () => ( +
+

Embla Carousel Thumbs React

+
+) + +export default Header diff --git a/components/carousel/imageByIndex.js b/components/carousel/imageByIndex.js new file mode 100644 index 00000000..5f0905f1 --- /dev/null +++ b/components/carousel/imageByIndex.js @@ -0,0 +1,10 @@ +import image1 from '../images/slide-1.jpg' +import image2 from '../images/slide-2.jpg' +import image3 from '../images/slide-3.jpg' +import image4 from '../images/slide-4.jpg' + +export const images = [image1, image2, image3, image4] + +const imageByIndex = (index) => images[index % images.length] + +export default imageByIndex diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx new file mode 100644 index 00000000..b9b6d85a --- /dev/null +++ b/components/carousel/index.jsx @@ -0,0 +1,21 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import EmblaCarousel from './EmblaCarousel' +import Header from './Header' +import Footer from './Footer' +// import '../css/base.css' +// import '../css/sandbox.css' +// import '../css/embla.css' + +const OPTIONS = { align: 'start' } +const SLIDE_COUNT = 10 +const SLIDES = Array.from(Array(SLIDE_COUNT).keys()) + +const Carousel = ({gallery}) => ( +
+ +
+) + + +export default Carousel \ No newline at end of file diff --git a/components/v4/card/CategoriesIconCard.js b/components/v4/card/CategoriesIconCard.js index 8279b93c..3ce7aaee 100644 --- a/components/v4/card/CategoriesIconCard.js +++ b/components/v4/card/CategoriesIconCard.js @@ -22,7 +22,7 @@ const CategoriesIconCard = ({ topic, withBackground, showCount }) => { }); }} className="flex" - >
+ >
@@ -47,7 +47,7 @@ const CategoriesIconCard = ({ topic, withBackground, showCount }) => {
{topic.icon? :} diff --git a/components/v4/section/NewsletterSection.js b/components/v4/section/NewsletterSection.js index f3b90906..31956813 100644 --- a/components/v4/section/NewsletterSection.js +++ b/components/v4/section/NewsletterSection.js @@ -9,11 +9,12 @@ const NewsletterSection = ({title,padding}) =>{
-
+

{title?title:'The best design articles, every week'}

Join 25,000+ creatives who enjoy a regular dose of inspiration and motivation, delivered to your inbox every week.

+
=10" + }, + "peerDependencies": { + "react": ">= 16.8", + "react-dom": ">= 16.8" + } + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -11827,6 +11841,31 @@ "node": ">4.0" } }, + "node_modules/embla-carousel": { + "version": "8.0.0-rc22", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0-rc22.tgz", + "integrity": "sha512-MeXnPT1LShfgAu8qXj3CskayV0R6OkHx7w3cPTx+Q5ZWKyShKpIuu7qVQJ5BoFegalE4n6yxqoQaRuGFbK9pYw==" + }, + "node_modules/embla-carousel-react": { + "version": "8.0.0-rc22", + "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.0-rc22.tgz", + "integrity": "sha512-NwmISV0Cw9XVo76Vquz3hJaeZe7qoCRtrzStxlEY7qfZD8WR/f4JlQAso35URTs1BeYVhcuClflelioo+Zmidg==", + "dependencies": { + "embla-carousel": "8.0.0-rc22", + "embla-carousel-reactive-utils": "8.0.0-rc22" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.1 || ^18.0.0" + } + }, + "node_modules/embla-carousel-reactive-utils": { + "version": "8.0.0-rc22", + "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0-rc22.tgz", + "integrity": "sha512-K4b8QhQGXYW5wr4l+U6XryhafsFV5c/IyohDnZN3MGoYIB9xY7qpjUWAcs5bTDjAD+qCZPOuXre0D3IVa28mqw==", + "peerDependencies": { + "embla-carousel": "8.0.0-rc22" + } + }, "node_modules/emoji-regex": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.2.1.tgz", @@ -25951,6 +25990,11 @@ "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.0.1.tgz", "integrity": "sha512-mMyQ9vjpuFqePkfe5bZVIf/H3Dmk6wA8Kjxff9RcO4kqzJo+Ek9pGKwZHpeMr7Eku0QhLXMCd7fNCSnEnRMubg==" }, + "@phosphor-icons/react": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.0.15.tgz", + "integrity": "sha512-PQKNcRrfERlC8gJGNz0su0i9xVmeubXSNxucPcbCLDd9u0cwJVTEyYK87muul/svf0UXFdL2Vl6bbeOhT1Mwow==" + }, "@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -32025,6 +32069,25 @@ "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz", "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==" }, + "embla-carousel": { + "version": "8.0.0-rc22", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0-rc22.tgz", + "integrity": "sha512-MeXnPT1LShfgAu8qXj3CskayV0R6OkHx7w3cPTx+Q5ZWKyShKpIuu7qVQJ5BoFegalE4n6yxqoQaRuGFbK9pYw==" + }, + "embla-carousel-react": { + "version": "8.0.0-rc22", + "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.0-rc22.tgz", + "integrity": "sha512-NwmISV0Cw9XVo76Vquz3hJaeZe7qoCRtrzStxlEY7qfZD8WR/f4JlQAso35URTs1BeYVhcuClflelioo+Zmidg==", + "requires": { + "embla-carousel": "8.0.0-rc22", + "embla-carousel-reactive-utils": "8.0.0-rc22" + } + }, + "embla-carousel-reactive-utils": { + "version": "8.0.0-rc22", + "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0-rc22.tgz", + "integrity": "sha512-K4b8QhQGXYW5wr4l+U6XryhafsFV5c/IyohDnZN3MGoYIB9xY7qpjUWAcs5bTDjAD+qCZPOuXre0D3IVa28mqw==" + }, "emoji-regex": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.2.1.tgz", diff --git a/package.json b/package.json index ee878a13..604e3307 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@heroicons/react": "^1.0.5", "@meilisearch/instant-meilisearch": "^0.8.1", "@next/bundle-analyzer": "^12.1.5", + "@phosphor-icons/react": "^2.0.15", "@radix-ui/colors": "^0.1.8", "@radix-ui/react-checkbox": "^1.0.1", "@radix-ui/react-collapsible": "^1.0.1", @@ -76,6 +77,7 @@ "cross-env": "^7.0.3", "date-fns": "2.28.0", "email-validator": "^2.0.4", + "embla-carousel-react": "^8.0.0-rc22", "file-saver": "^2.0.5", "filepond": "^4.30.4", "filepond-plugin-file-poster": "^2.5.1", diff --git a/pages/index.js b/pages/index.js index c577d219..2a3d3623 100644 --- a/pages/index.js +++ b/pages/index.js @@ -151,6 +151,7 @@ export default function Index({ + {/*
*/}
- +
+ +
{/* @@ -177,9 +180,11 @@ export default function Index({
+ +
+ {/* */} - {/* */} {/* */} {/* */} @@ -241,9 +246,11 @@ export default function Index({ {/* */}
+
{/* */} -
+
+ {/* */} {/* */} {TAB_ITEMS?.map((topic, index) => { @@ -266,14 +273,14 @@ export default function Index({ - {index==0? + {index==2?
:'' } - {index==3? + {index==4?
diff --git a/pages/posts/[tag]/page/[pageNo].js b/pages/posts/[tag]/page/[pageNo].js index 9cdd4987..fd4c5383 100644 --- a/pages/posts/[tag]/page/[pageNo].js +++ b/pages/posts/[tag]/page/[pageNo].js @@ -94,7 +94,7 @@ export default function PostsPage({ >
-
+
{/* */} {/*
*/} @@ -107,7 +107,7 @@ export default function PostsPage({

{tagName}

- +
diff --git a/pages/toolbox/[slug].js b/pages/toolbox/[slug].js index 22feace8..276a6f7c 100644 --- a/pages/toolbox/[slug].js +++ b/pages/toolbox/[slug].js @@ -12,7 +12,9 @@ import Layout from "@/components/new-index/layoutForIndex"; // import { ToolBoxDisplay } from "../../components/toolbox/ToolboxGrid"; import gumletLoader from "@/components/new-index/gumletLoader"; import useUser from "@/lib/iron-session/useUser"; +import { SealQuestion } from "@phosphor-icons/react"; +import Carousel from '@/components/carousel' const PopupGallery = dynamic(() => import("@/components/gallery/PopupGallery"), { ssr: true, }); @@ -63,109 +65,134 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => { <>
-
+ + +
- {/*
*/}
-
-
+
+
+
+
-
- Brand logo for external website's link -
-
-

- {post?.attributes?.title} -

- {/* {post?.attributes?.author && ( -
- -
- )} */} - {/*
- {tags.map((tag) => { - return ( - - {tag.attributes.name} - - ); - })} -
*/} -
- Is this your tool? Claim this page. +
+ Brand logo for external website's link
-
+
+

+ {post?.attributes?.title} +

+ {/* {post?.attributes?.author && ( +
+ +
+ )} */} + {/*
+ {tags.map((tag) => { + return ( + + {tag.attributes.name} + + ); + })} +
*/} + {/*
+ Is this your tool? Claim this page. +
*/} +
+
+
+ +
-
-
- - - +
+ +
+
Is this your tool? Claim this page.
- {/*
- Is this your tool? Claim this page. -
*/} +
+
+
+ {tags.map((tag) => { + return ( + + {tag.attributes.name} + + ); + })} +
- + {/* */}
- +
-
-
-

Overview

-
-
-
-

Gallery

- {post?.attributes && ( - - )} -
+
+
+ {/*

Gallery

*/} + {/* {post?.attributes && ( + + )} */} + +
+
+
+

Overview

+
+
+
+
-
+ {/* right panel */} + {/*

Tags

@@ -187,23 +214,12 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
- {/*
-

- Discover more
Related Content -

-
-
-
-
-
-
-
*/}
-
+
*/}
- +
diff --git a/pages/toolbox/index.js b/pages/toolbox/index.js index 8c49f9ed..2fac60fe 100644 --- a/pages/toolbox/index.js +++ b/pages/toolbox/index.js @@ -5,7 +5,7 @@ import ToolboxIndexPage from "@/components/toolbox/ToolboxIndexPage"; import ALL_SLUGS_GROUPS from "@/lib/menus/allTools"; import Footer from "@/components/footer"; -const PAGE_SIZE = 30; +const PAGE_SIZE = 16; diff --git a/pages/toolbox/page/[pageNo].js b/pages/toolbox/page/[pageNo].js index 19c333de..83f8c114 100644 --- a/pages/toolbox/page/[pageNo].js +++ b/pages/toolbox/page/[pageNo].js @@ -5,7 +5,7 @@ import ToolboxIndexPage from "@/components/toolbox/ToolboxIndexPage"; import ALL_SLUGS_GROUPS from "@/lib/menus/allTools"; import Footer from "@/components/footer"; -const PAGE_SIZE = 30; +const PAGE_SIZE = 16; diff --git a/pages/topics.js b/pages/topics.js index 3fde0ce1..c1619ecb 100644 --- a/pages/topics.js +++ b/pages/topics.js @@ -147,20 +147,24 @@ export default function Index({ {/* */} -
-

All topics

-
- {morePopularTags.map((topic, i) => ( - - ))} + {/*
*/} +
+ {/* */} +
+

All topics

+
+ {morePopularTags.map((topic, i) => ( + + ))} +
+
-
{/* */} diff --git a/public/static/images/toolbox/dots.svg b/public/static/images/toolbox/dots.svg new file mode 100644 index 00000000..08f5f7a5 --- /dev/null +++ b/public/static/images/toolbox/dots.svg @@ -0,0 +1,732 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/toolbox/squares2.svg b/public/static/images/toolbox/squares2.svg new file mode 100644 index 00000000..82027d00 --- /dev/null +++ b/public/static/images/toolbox/squares2.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/index.scss b/styles/index.scss index 9375443b..b3daf1a1 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -572,4 +572,195 @@ box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; padding-right: 0.1em; position: relative; padding-bottom: 3px; +} + +// .embla { +// overflow: hidden; +// } +// .embla__container { +// display: flex; +// } +// .embla__slide { +// flex: 0 0 100%; +// min-width: 0; +// } +.embla { + --slide-spacing: 1rem; + --slide-size: 33.33%; + --slide-height: 19rem; + // padding: 1.6rem; +} +.embla__viewport { + overflow: hidden; +} +.embla__container { + backface-visibility: hidden; + display: flex; + touch-action: pan-y; + margin-left: calc(var(--slide-spacing) * -1); +} +.embla__slide { + flex: 0 0 var(--slide-size); + min-width: 0; + padding-left: var(--slide-spacing); + position: relative; +} +.embla__slide__img { + display: block; + height: var(--slide-height); + width: 100%; + object-fit: cover; +} +.embla__slide__number { + width: 4.6rem; + height: 4.6rem; + z-index: 1; + position: absolute; + top: 0.6rem; + right: 0.6rem; + border-radius: 50%; + background-color: rgba(var(--background-site-rgb-value), 0.85); + line-height: 4.6rem; + font-weight: 900; + text-align: center; + pointer-events: none; +} +.embla__slide__number > span { + color: var(--brand-primary); + background-image: linear-gradient( + 45deg, + var(--brand-primary), + var(--brand-secondary) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 1.6rem; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.embla-thumbs { + --thumbs-slide-spacing: 0.8rem; + --thumbs-slide-height: 3.2rem; + margin-top: var(--thumbs-slide-spacing); +} +.embla-thumbs__viewport { + overflow: hidden; +} +.embla-thumbs__container { + display: flex; + // justify-content: center; + flex-direction: row; + // margin-left: 10px; + margin-left: calc(var(--thumbs-slide-spacing) * -1); +} +.embla-thumbs__slide { + // flex: 0 0 28%; + min-width: 0; + padding-left: var(--thumbs-slide-spacing); + position: relative; +} +@media (min-width: 576px) { + .embla-thumbs__slide { + // flex: 0 0 18%; + } +} +.embla-thumbs__slide__button { + -webkit-appearance: none; + // background-color: transparent; + touch-action: manipulation; + display: block; + text-decoration: none; + cursor: pointer; + // border: 0; + padding: 0; + margin: 0; + width: 100%; + // opacity: 0.2; + // transition: opacity 0.2s; +} +.embla-thumbs__slide--selected .embla-thumbs__slide__button { + opacity: 1; +} +.embla-thumbs__slide__img { + display: block; + height: var(--thumbs-slide-height); + width: 80px; + object-fit: cover; +} +.embla-thumbs__slide__number { + width: 3rem; + height: 3rem; + z-index: 1; + position: absolute; + top: 0.3rem; + right: 0.3rem; + border-radius: 50%; + background-color: rgba(var(--background-site-rgb-value), 0.85); + line-height: 3rem; + font-weight: 900; + text-align: center; + pointer-events: none; +} +.embla-thumbs__slide__number > span { + color: var(--brand-primary); + background-image: linear-gradient( + 45deg, + var(--brand-primary), + var(--brand-secondary) + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 1.4rem; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.embla__button { + -webkit-appearance: none; + // background-color: transparent; + touch-action: manipulation; + display: inline-flex; + text-decoration: none; + cursor: pointer; + // border: 0; + padding: 0; + margin: 0; +} +.embla__buttons { + display: flex; + align-items: center; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0; +} +.embla__button { + z-index: 1; + color: var(--background-site); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + // width: 4rem; + // height: 4rem; +} +.embla__button:disabled { + // opacity: 0.3; +} +.embla__button:disabled .embla__button__svg { + opacity: 0.4; +} +.embla__button .embla__button__svg { + width: 65%; + height: 65%; } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 9413430c..f377aba4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1250,11 +1250,116 @@ resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz" integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw== +"@esbuild/android-arm@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz" + integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw== + +"@esbuild/android-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz" + integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ== + +"@esbuild/android-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz" + integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg== + "@esbuild/darwin-arm64@0.18.20": version "0.18.20" resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz" integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA== +"@esbuild/darwin-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz" + integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ== + +"@esbuild/freebsd-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz" + integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw== + +"@esbuild/freebsd-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz" + integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ== + +"@esbuild/linux-arm@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz" + integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg== + +"@esbuild/linux-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz" + integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA== + +"@esbuild/linux-ia32@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz" + integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA== + +"@esbuild/linux-loong64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz" + integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg== + +"@esbuild/linux-mips64el@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz" + integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ== + +"@esbuild/linux-ppc64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz" + integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA== + +"@esbuild/linux-riscv64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz" + integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A== + +"@esbuild/linux-s390x@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz" + integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ== + +"@esbuild/linux-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz" + integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w== + +"@esbuild/netbsd-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz" + integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A== + +"@esbuild/openbsd-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz" + integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg== + +"@esbuild/sunos-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz" + integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ== + +"@esbuild/win32-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz" + integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg== + +"@esbuild/win32-ia32@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz" + integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g== + +"@esbuild/win32-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz" + integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ== + "@fal-works/esbuild-plugin-global-externals@^2.1.2": version "2.1.2" resolved "https://registry.npmjs.org/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz" @@ -1665,6 +1770,11 @@ resolved "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.0.1.tgz" integrity sha512-mMyQ9vjpuFqePkfe5bZVIf/H3Dmk6wA8Kjxff9RcO4kqzJo+Ek9pGKwZHpeMr7Eku0QhLXMCd7fNCSnEnRMubg== +"@phosphor-icons/react@^2.0.15": + version "2.0.15" + resolved "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.0.15.tgz" + integrity sha512-PQKNcRrfERlC8gJGNz0su0i9xVmeubXSNxucPcbCLDd9u0cwJVTEyYK87muul/svf0UXFdL2Vl6bbeOhT1Mwow== + "@pkgjs/parseargs@^0.11.0": version "0.11.0" resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz" @@ -6061,6 +6171,24 @@ email-validator@^2.0.4: resolved "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz" integrity sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ== +embla-carousel-react@^8.0.0-rc22: + version "8.0.0-rc22" + resolved "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.0-rc22.tgz" + integrity sha512-NwmISV0Cw9XVo76Vquz3hJaeZe7qoCRtrzStxlEY7qfZD8WR/f4JlQAso35URTs1BeYVhcuClflelioo+Zmidg== + dependencies: + embla-carousel "8.0.0-rc22" + embla-carousel-reactive-utils "8.0.0-rc22" + +embla-carousel-reactive-utils@8.0.0-rc22: + version "8.0.0-rc22" + resolved "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0-rc22.tgz" + integrity sha512-K4b8QhQGXYW5wr4l+U6XryhafsFV5c/IyohDnZN3MGoYIB9xY7qpjUWAcs5bTDjAD+qCZPOuXre0D3IVa28mqw== + +embla-carousel@8.0.0-rc22: + version "8.0.0-rc22" + resolved "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0-rc22.tgz" + integrity sha512-MeXnPT1LShfgAu8qXj3CskayV0R6OkHx7w3cPTx+Q5ZWKyShKpIuu7qVQJ5BoFegalE4n6yxqoQaRuGFbK9pYw== + emoji-regex@^10.2.1: version "10.2.1" resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.2.1.tgz"