refactor: use classic for conditional classes

This commit is contained in:
2023-06-11 20:23:18 +02:00
parent 4dce8354f7
commit 1360b095be
12 changed files with 43 additions and 16 deletions

View File

@@ -6,6 +6,7 @@
import { getContext } from 'svelte'
import { spring } from 'svelte/motion'
import dayjs from 'dayjs'
import { cx } from 'classix'
import { lerp } from 'utils/math'
import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
import { seenLocations } from '$utils/stores'
@@ -110,7 +111,7 @@
<div class="location__photos">
{#each location.photos as { image }, index}
{#if image}
{@const classes = ['location__photo', index === photoIndex ? 'is-visible' : null].join(' ').trim()}
{@const classes = cx('location__photo', index === photoIndex && 'is-visible')}
<Image
class={classes}
id={image.id}

View File

@@ -3,6 +3,7 @@
</style>
<script lang="ts">
import { cx } from 'classix'
import Image from '$components/atoms/Image.svelte'
export let street: string
@@ -13,11 +14,11 @@
export let size: string = undefined
const className = 'postcard'
$: classes = [
$: classes = cx(
className,
...[size].map(variant => variant && `${className}--${variant}`),
$$props.class
].join(' ').trim()
)
</script>
<div class={classes}>

View File

@@ -5,6 +5,7 @@
<script lang="ts">
import { goto } from '$app/navigation'
import { getContext, tick } from 'svelte'
import { cx } from 'classix'
import { shopCurrentProductSlug } from '$utils/stores/shop'
import { smoothScroll } from '$utils/stores'
@@ -12,11 +13,11 @@
const { shopLocations }: any = getContext('shop')
const classes = [
const classes = cx(
'shop-locationswitcher',
isOver && 'is-over',
$$props.class
].join(' ').trim()
)
// Quick location change