From 28cd24f5de49744b266fd74c7638e0106bf32323 Mon Sep 17 00:00:00 2001
From: rtrembecky <rtrembecky@gmail.com>
Date: Sat, 23 Nov 2024 15:55:56 +0100
Subject: [PATCH] rework Marquee without SCSS module styles

---
 src/components/Marquee/Marquee.module.scss    |  67 ---------
 .../Marquee/Marquee.module.scss.d.ts          |  12 --
 src/components/Marquee/Marquee.tsx            | 131 +++++++++++-------
 3 files changed, 83 insertions(+), 127 deletions(-)
 delete mode 100644 src/components/Marquee/Marquee.module.scss
 delete mode 100644 src/components/Marquee/Marquee.module.scss.d.ts

diff --git a/src/components/Marquee/Marquee.module.scss b/src/components/Marquee/Marquee.module.scss
deleted file mode 100644
index a8f79724..00000000
--- a/src/components/Marquee/Marquee.module.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-.marqueeContainer {
-  overflow-x: hidden !important;
-  display: flex !important;
-  flex-direction: row !important;
-  position: relative;
-  height: 100%;
-  width: 100%;
-
-  &:hover div {
-    animation-play-state: var(--pause-on-hover);
-  }
-
-  &:active div {
-    animation-play-state: var(--pause-on-click);
-  }
-}
-
-.overlay {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-
-  @mixin gradient {
-    background: linear-gradient(to right, var(--gradient-color));
-  }
-
-  &::before,
-  &::after {
-    @include gradient;
-    content: '';
-    height: 100%;
-    position: absolute;
-    width: var(--gradient-width);
-    z-index: 2;
-  }
-
-  &::after {
-    right: 0;
-    top: 0;
-    transform: rotateZ(180deg);
-  }
-
-  &::before {
-    left: 0;
-    top: 0;
-  }
-}
-
-.marquee {
-  display: flex;
-  flex-direction: row;
-  margin-right: var(--margin-right);
-  animation: scroll var(--duration) linear var(--delay) infinite;
-  animation-play-state: var(--play);
-  animation-delay: var(--delay);
-  animation-direction: var(--direction);
-
-  @keyframes scroll {
-    0% {
-      transform: translateX(0);
-    }
-
-    100% {
-      transform: translateX(calc(-100% - var(--margin-right)));
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/components/Marquee/Marquee.module.scss.d.ts b/src/components/Marquee/Marquee.module.scss.d.ts
deleted file mode 100644
index 4b220908..00000000
--- a/src/components/Marquee/Marquee.module.scss.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type Styles = {
-  marquee: string
-  marqueeContainer: string
-  overlay: string
-  scroll: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/Marquee/Marquee.tsx b/src/components/Marquee/Marquee.tsx
index 8f7374a9..6e3bc7f2 100644
--- a/src/components/Marquee/Marquee.tsx
+++ b/src/components/Marquee/Marquee.tsx
@@ -1,7 +1,23 @@
-import clsx from 'clsx'
+import {Box} from '@mui/material'
 import {FC, useEffect, useRef, useState} from 'react'
 
-import styles from './Marquee.module.scss'
+const marqueeSx = {
+  display: 'flex',
+  flexDirection: 'row',
+  marginRight: 'var(--margin-right)',
+  animation: 'scroll var(--duration) linear var(--delay) infinite',
+  animationPlayState: 'var(--play)',
+  animationDelay: 'var(--delay)',
+  animationDirection: 'var(--direction)',
+  '@keyframes scroll': {
+    '0%': {
+      transform: 'translateX(0)',
+    },
+    '100%': {
+      transform: 'translateX(calc(-100% - var(--margin-right)))',
+    },
+  },
+}
 
 interface MarqueeProps {
   /**
@@ -10,12 +26,6 @@ interface MarqueeProps {
    * Default: {}
    */
   style?: React.CSSProperties
-  /**
-   * Class name to style the container div
-   * Type: string
-   * Default: ""
-   */
-  className?: string
   /**
    * Whether to play or pause the marquee
    * Type: boolean
@@ -79,9 +89,8 @@ interface MarqueeProps {
 }
 
 // tento komponent je z https://github.com/justin-chu/react-fast-marquee/blob/master/src/components/Marquee.tsx
+// ale prepisali sme si ho MUI stylmi
 export const Marquee: FC<MarqueeProps> = ({
-  style = {},
-  className = '',
   play = true,
   pauseOnHover = false,
   pauseOnClick = false,
@@ -123,54 +132,80 @@ export const Marquee: FC<MarqueeProps> = ({
   // Gradient color in an unfinished rgba format
   const rgbaGradientColor = `rgba(${gradientColor[0]}, ${gradientColor[1]}, ${gradientColor[2]}`
 
+  const element = (
+    <Box
+      ref={marqueeRef}
+      sx={{
+        ...marqueeSx,
+        '--play': play ? 'running' : 'paused',
+        '--direction': direction === 'left' ? 'normal' : 'reverse',
+        '--duration': `${duration}s`,
+        '--delay': `${delay}s`,
+        '--margin-right': `${marqueeWidth < containerWidth ? containerWidth - marqueeWidth : 0}px`,
+      }}
+    >
+      {children}
+    </Box>
+  )
+
   return (
     <>
       {!isMounted ? null : (
-        <div
+        <Box
           ref={containerRef}
-          style={{
-            ...style,
-            ['--pause-on-hover' as string]: pauseOnHover ? 'paused' : 'running',
-            ['--pause-on-click' as string]: pauseOnClick ? 'paused' : 'running',
+          sx={{
+            overflowX: 'hidden !important',
+            display: 'flex !important',
+            flexDirection: 'row !important',
+            position: 'relative',
+            height: '100%',
+            width: '100%',
+            animationPlayState: 'running',
+            '&:hover div': {
+              animationPlayState: 'var(--pause-on-hover)',
+            },
+            '&:active div': {
+              animationPlayState: 'var(--pause-on-click)',
+            },
+            '--pause-on-hover': pauseOnHover ? 'paused' : 'running',
+            '--pause-on-click': pauseOnClick ? 'paused' : 'running',
           }}
-          className={clsx(className, styles.marqueeContainer)}
         >
           {gradient && (
-            <div
-              style={{
-                ['--gradient-color' as string]: `${rgbaGradientColor}, 1), ${rgbaGradientColor}, 0)`,
-                ['--gradient-width' as string]:
-                  typeof gradientWidth === 'number' ? `${gradientWidth}px` : gradientWidth,
+            <Box
+              sx={{
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+
+                '&::before, &::after': {
+                  background: 'linear-gradient(to right, var(--gradient-color))',
+                  content: '',
+                  height: '100%',
+                  position: 'absolute',
+                  width: 'var(--gradient-width)',
+                  zIndex: 2,
+                },
+
+                '&::after': {
+                  right: 0,
+                  top: 0,
+                  transform: 'rotateZ(180deg)',
+                },
+
+                '&::before': {
+                  left: 0,
+                  top: 0,
+                },
+
+                '--gradient-color': `${rgbaGradientColor}, 1), ${rgbaGradientColor}, 0)`,
+                '--gradient-width': typeof gradientWidth === 'number' ? `${gradientWidth}px` : gradientWidth,
               }}
-              className={styles.overlay}
             />
           )}
-          <div
-            ref={marqueeRef}
-            style={{
-              ['--play' as string]: play ? 'running' : 'paused',
-              ['--direction' as string]: direction === 'left' ? 'normal' : 'reverse',
-              ['--duration' as string]: `${duration}s`,
-              ['--delay' as string]: `${delay}s`,
-              ['--margin-right' as string]: `${marqueeWidth < containerWidth ? containerWidth - marqueeWidth : 0}px`,
-            }}
-            className={styles.marquee}
-          >
-            {children}
-          </div>
-          <div
-            style={{
-              ['--play' as string]: play ? 'running' : 'paused',
-              ['--direction' as string]: direction === 'left' ? 'normal' : 'reverse',
-              ['--duration' as string]: `${duration}s`,
-              ['--delay' as string]: `${delay}s`,
-              ['--margin-right' as string]: `${marqueeWidth < containerWidth ? containerWidth - marqueeWidth : 0}px`,
-            }}
-            className={styles.marquee}
-          >
-            {children}
-          </div>
-        </div>
+          {element}
+          {element}
+        </Box>
       )}
     </>
   )