From 6fe929f840b0dc92db4117ab7d6e79ec557ef1a3 Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Thu, 14 Nov 2024 16:36:36 +0100
Subject: [PATCH] Use cva for SkeletonShimmer class variants

---
 components/SkeletonShimmer/index.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/components/SkeletonShimmer/index.tsx b/components/SkeletonShimmer/index.tsx
index e4bc5364b..bcc1c03ed 100644
--- a/components/SkeletonShimmer/index.tsx
+++ b/components/SkeletonShimmer/index.tsx
@@ -1,5 +1,19 @@
+import { cva } from "class-variance-authority"
+
 import styles from "./skeleton.module.css"
 
+const variants = cva(styles.shimmer, {
+  variants: {
+    contrast: {
+      light: styles.light,
+      dark: styles.dark,
+    },
+  },
+  defaultVariants: {
+    contrast: "light",
+  },
+})
+
 export default function SkeletonShimmer({
   height,
   width,
@@ -11,7 +25,7 @@ export default function SkeletonShimmer({
 }) {
   return (
     <div
-      className={`${styles.shimmer} ${styles[contrast]}`}
+      className={variants({ contrast })}
       style={{
         height: height,
         width: width,