upgrade packages and switch to custom sizing for tailwind

ndimatteo · Dec 17, 2021 · bcc3a94 · bcc3a94
1 parent 73c98e7
commit bcc3a94
Show file tree

Hide file tree

Showing 40 changed files with 16,191 additions and 18,835 deletions.
diff --git a/components/carousel.js b/components/carousel.js
@@ -12,21 +12,20 @@ const Carousel = ({
   hasArrows,
   hasDots,
   hasCounter,
-  hasThumbs,
   hasDrag = true,
   className,
   children,
 }) => {
   const [currentSlide, setCurrentSlide] = useState(0)
   const [sliderRef, slider] = useKeenSlider({
     initial: 0,
-    slides: '.carousel--slide',
+    selector: '.carousel--slide',
     loop: true,
     duration: 800,
     dragSpeed: 0.8,
     controls: hasDrag,
-    slideChanged(s) {
-      setCurrentSlide(s.details().relativeSlide)
+    slideChanged(slider) {
+      setCurrentSlide(slider.track.details.rel)
     },
   })
 
@@ -40,12 +39,12 @@ const Carousel = ({
         ))}
       </div>
 
-      {slider && slider.details().size > 1 && (
+      {slider?.current && (
         <div className="carousel--hud">
           <div className="carousel--nav">
             {hasArrows && (
               <button
-                onClick={() => slider.prev()}
+                onClick={() => slider.current?.prev()}
                 className="carousel--prev"
                 aria-label="Previous slide"
               >
@@ -56,10 +55,12 @@ const Carousel = ({
             <div className="carousel--status">
               {hasDots && (
                 <div className="carousel--dots">
-                  {[...Array(slider.details().size).keys()].map((index) => (
+                  {[
+                    ...Array(slider.current.track.details.slides.length).keys(),
+                  ].map((index) => (
                     <button
                       key={index}
-                      onClick={() => slider.moveToSlideRelative(index)}
+                      onClick={() => slider.current?.moveToIdx(index)}
                       aria-label={`Go to slide ${index + 1}`}
                       className={cx('carousel--dot', {
                         'is-active': currentSlide === index,
@@ -87,15 +88,15 @@ const Carousel = ({
                     </div>
                   </div>
                   <div className="carousel--counter-item is-total">
-                    <span>{slider.details().size}</span>
+                    <span>{slider.current.track.details.slides.length}</span>
                   </div>
                 </div>
               )}
             </div>
 
             {hasArrows && (
               <button
-                onClick={() => slider.next()}
+                onClick={() => slider.current?.next()}
                 className="carousel--next"
                 aria-label="Next slide"
               >

diff --git a/components/modules/grid.js b/components/modules/grid.js
@@ -39,7 +39,7 @@ const Grid = ({ data = {} }) => {
     <section className="section">
       <div className="section--content">
         <div
-          className={`grid grid-cols-${size} gap-x-4 gap-y-4 sm:gap-x-8 lg:gap-x-12 lg:gap-y-6`}
+          className={`grid grid-cols-${size} gap-x-16 gap-y-16 sm:gap-x-32 lg:gap-x-48`}
         >
           {columns.map((col, key) => {
             const { sizes, blocks } = col

diff --git a/components/modules/product-hero.js b/components/modules/product-hero.js
@@ -18,7 +18,6 @@ const ProductHero = ({ product, activeVariant, onVariantChange }) => {
             activeVariant={activeVariant}
             hasArrows
             hasCounter
-            hasThumbs
           />
         </div>
 

diff --git a/components/product/product-gallery.js b/components/product/product-gallery.js
@@ -11,7 +11,6 @@ const ProductGallery = ({
   photosets,
   activeVariant,
   hasArrows,
-  hasThumbs,
   hasDots,
   hasDrag,
   hasCounter,
@@ -59,7 +58,6 @@ const ProductGallery = ({
               hasArrows={hasArrows}
               hasDots={hasDots}
               hasCounter={hasCounter}
-              thumbs={hasThumbs}
               hasDrag={hasDrag}
             >
               {photos.map((photo, key) => (

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited