refactor: use classic for conditional classes

apps/website/src/components/atoms/AboutGridPhoto.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { cx } from 'classix'
     import Image from './Image.svelte'
 
     export let id: string
@@ -8,11 +9,11 @@
     let hovering = false
     let timer: ReturnType<typeof setTimeout> | number = null
 
-    $: classes = [
+    $: classes = cx(
         hovering ? 'is-hovered' : undefined,
         disabled ? 'is-disabled' : undefined,
         $$props.class
-    ].join(' ').trim()
+    )
 
     // Hovering functions
     const handleMouseEnter = () => {

apps/website/src/components/atoms/Button.svelte

@@ -3,6 +3,7 @@
 </style>
 
 <script lang="ts">
+    import { cx } from 'classix'
     import SplitText from '$components/SplitText.svelte'
 
     export let tag = 'a'
@@ -15,13 +16,13 @@
     export let slotPosition = 'before'
 
     const className = 'button'
-    const classes = [
+    $: classes = cx(
         className,
         effect ? effect : undefined,
         ...[color, size].map(variant => variant && `${className}--${variant}`),
         Object.keys($$slots).length !== 0 ? `has-icon-${slotPosition}` : undefined,
         $$props.class
-    ].join(' ').trim()
+    )
 
     // Define external links
     $: isExternal = /^(http|https):\/\//i.test(url)

apps/website/src/components/atoms/ButtonCircle.svelte

@@ -3,6 +3,8 @@
 </style>
 
 <script lang="ts">
+    import { cx } from 'classix'
+
     export let tag = 'button'
     export let url: string = undefined
     export let color: string = undefined
@@ -13,12 +15,12 @@
     export let label: string = undefined
 
     const className = 'button-circle'
-    const classes = [
+    $: classes = cx(
         className,
         ...[color, size].map(variant => variant && `${className}--${variant}`),
         clone ? 'has-clone' : null,
         $$props.class
-    ].join(' ').trim()
+    )
 </script>
 
 {#if tag === 'a'}

apps/website/src/components/atoms/Icon.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+    import { cx } from 'classix'
+
     export let icon: string
     export let label: string = undefined
 
-    const classes = [$$props.class].join(' ').trim()
+    $: classes = cx($$props.class)
 </script>
 
 <svg class={classes} aria-label={label} width="32" height="32">

apps/website/src/components/atoms/IconEarth.svelte

@@ -7,9 +7,14 @@
 </style>
 
 <script lang="ts">
+    import { cx } from 'classix'
+
     export let animate = false
 
-    const classes = ['icon-earth', $$props.class].join(' ').trim()
+    $: classes = cx(
+        'icon-earth',
+        $$props.class,
+    )
 </script>
 
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"

apps/website/src/components/atoms/ScrollingTitle.svelte

@@ -8,6 +8,7 @@
 </style>
 
 <script lang="ts">
+    import cx from 'classix'
     import { map } from 'utils/math'
     import reveal from '$animations/reveal'
 
@@ -39,11 +40,11 @@
         parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
     }
 
-    const classes = [
+    $: classes = cx(
         'scrolling-title',
         'title-huge',
         $$props.class
-    ].join(' ').trim()
+    )
 
     const revealOptions = animate ? {
         children: '.char',