From 5accb120d9d6a6c42579eaa4ad2b277ae7ad1650 Mon Sep 17 00:00:00 2001
From: VDawg <vdawg@tuta.io>
Date: Mon, 6 May 2024 22:45:53 +0300
Subject: [PATCH] add cn helper

---
 package.json                              |  1 +
 pnpm-lock.yaml                            | 20 ++++++++++++++++++++
 src/lib/Helper.mjs                        | 10 ++++++++++
 src/lib/components/3dCard/CardBody.svelte | 11 +++++++++--
 src/lib/components/Button.svelte          |  4 ++--
 5 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 6982820..1595138 100755
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
 		"rxjs": "^7.8.1",
 		"shiki": "^1.1.6",
 		"svelte-inview": "^4.0.2",
+		"tailwind-merge": "^2.3.0",
 		"ts-pattern": "^5.0.8"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3c3057..8689f68 100755
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ dependencies:
   svelte-inview:
     specifier: ^4.0.2
     version: 4.0.2(svelte@4.2.11)
+  tailwind-merge:
+    specifier: ^2.3.0
+    version: 2.3.0
   ts-pattern:
     specifier: ^5.0.8
     version: 5.0.8
@@ -137,6 +140,13 @@ packages:
     resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==}
     dev: true
 
+  /@babel/runtime@7.24.5:
+    resolution: {integrity: sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.1
+    dev: false
+
   /@esbuild/aix-ppc64@0.19.12:
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
     engines: {node: '>=12'}
@@ -1656,6 +1666,10 @@ packages:
     dependencies:
       picomatch: 2.3.1
 
+  /regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+    dev: false
+
   /rehype-slug@6.0.0:
     resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
     dependencies:
@@ -1960,6 +1974,12 @@ packages:
       magic-string: 0.30.5
       periscopic: 3.1.0
 
+  /tailwind-merge@2.3.0:
+    resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==}
+    dependencies:
+      '@babel/runtime': 7.24.5
+    dev: false
+
   /tailwindcss-animate@1.0.7(tailwindcss@3.4.1):
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
diff --git a/src/lib/Helper.mjs b/src/lib/Helper.mjs
index 2a36f1e..3341819 100755
--- a/src/lib/Helper.mjs
+++ b/src/lib/Helper.mjs
@@ -17,6 +17,8 @@ import {
 import { inview } from 'svelte-inview'
 import { pick } from 'remeda'
 import { writable } from 'svelte/store'
+import { twMerge } from 'tailwind-merge'
+import clsx from 'clsx'
 
 /**
  * Fade: The initial opacity from 0 to 1.
@@ -236,3 +238,11 @@ export function isIntersecting(rect1, rect2) {
 		rect2.coordinates[1] + rect2.size < rect1.coordinates[1]
 	)
 }
+
+/**
+ * Merge Tailwind classes
+ * @param {import('clsx').ClassValue} classes
+ */
+export function cn(...classes) {
+	return twMerge(clsx(classes))
+}
diff --git a/src/lib/components/3dCard/CardBody.svelte b/src/lib/components/3dCard/CardBody.svelte
index 93a78ab..9de269a 100644
--- a/src/lib/components/3dCard/CardBody.svelte
+++ b/src/lib/components/3dCard/CardBody.svelte
@@ -1,5 +1,12 @@
+<script lang="ts">
+	import { cn } from '$lib/Helper.mjs'
+</script>
+
 <div
-  class={`h-96 w-96 [transform-style:preserve-3d]  [&>*]:[transform-style:preserve-3d] ${$$restProps.class}`}
+	class={cn(
+		`h-96 w-96 [transform-style:preserve-3d]  [&>*]:[transform-style:preserve-3d] `,
+		$$restProps?.class
+	)}
 >
-  <slot />
+	<slot />
 </div>
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index b870b5f..2740024 100755
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,12 +1,12 @@
 <script>
-	import clsx from 'clsx'
+	import { cn } from '$lib/Helper.mjs'
 
 	/** @type { 'md'|'lg'|'xl'}*/
 	export let size = 'md'
 	/** @type { 'primary'|'outline'|'fancyOutline' }*/
 	export let type = 'primary'
 
-	$: classes = clsx(
+	$: classes = cn(
 		'animate  rounded text-sm font-bold hover:scale-[1.01] active:scale-100',
 		'primary' == type && 'bg-slate-200 text-black',
 		'outline' == type && 'bg-transparent text-white outline outline-2 outline-slate-200',