fixed lab hover effect

src/components/common/Hoverable/index.tsx

@@ -6,19 +6,23 @@ import { DivProps } from '~/utils/types';
 
 import styles from './styles.module.scss';
 
+type HoverableEffect = 'rise' | 'shine';
+
 interface HoverableProps extends DivProps {
   icon?: ReactNode;
+  effect?: HoverableEffect;
 }
 
 const Hoverable: FC<HoverableProps> = ({
   children,
   className,
   icon,
+  effect = 'rise',
   ...rest
 }) => (
   <div
     {...rest}
-    className={classNames(styles.hoverable, className, {
+    className={classNames(styles.hoverable, styles[effect], className, {
       [styles.with_icon]: !!icon,
     })}
   >

src/components/common/Hoverable/styles.module.scss

@@ -18,19 +18,46 @@
   &.with_icon::after {
     background: linear-gradient(325deg, $color_primary 20px, transparent 100px);
   }
+}
 
-  &:hover {
-    z-index: 10;
-    transition: all 100ms;
-    transform: scale(1.025) translateY(-2%);
-    box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px 5px;
+.hoverable.rise {
+  @media (hover: hover) {
+    &:hover {
+      z-index: 10;
+      transition: all 100ms;
+      transform: scale(1.025) translateY(-2%);
+      box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px 5px;
 
-    &::after {
-      opacity: 1;
+      &::after {
+        opacity: 1;
+      }
     }
   }
 }
 
+.hoverable.shine {
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      150deg,
+      #{transparentize(yellow, 0.75)},
+      transparent
+    );
+    z-index: 1;
+    border-radius: $radius;
+    opacity: 0;
+    pointer-events: none;
+    touch-action: none;
+    transition: all 250ms;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+}
+
 .icon {
   position: absolute;
   bottom: 4px;