add cn helper

This commit is contained in:
VDawg 2024-05-06 22:45:53 +03:00
parent dea0fc0a31
commit 5accb120d9
5 changed files with 42 additions and 4 deletions

View file

@ -59,6 +59,7 @@
"rxjs": "^7.8.1", "rxjs": "^7.8.1",
"shiki": "^1.1.6", "shiki": "^1.1.6",
"svelte-inview": "^4.0.2", "svelte-inview": "^4.0.2",
"tailwind-merge": "^2.3.0",
"ts-pattern": "^5.0.8" "ts-pattern": "^5.0.8"
} }
} }

View file

@ -47,6 +47,9 @@ dependencies:
svelte-inview: svelte-inview:
specifier: ^4.0.2 specifier: ^4.0.2
version: 4.0.2(svelte@4.2.11) version: 4.0.2(svelte@4.2.11)
tailwind-merge:
specifier: ^2.3.0
version: 2.3.0
ts-pattern: ts-pattern:
specifier: ^5.0.8 specifier: ^5.0.8
version: 5.0.8 version: 5.0.8
@ -137,6 +140,13 @@ packages:
resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==} resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==}
dev: true 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: /@esbuild/aix-ppc64@0.19.12:
resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==} resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
engines: {node: '>=12'} engines: {node: '>=12'}
@ -1656,6 +1666,10 @@ packages:
dependencies: dependencies:
picomatch: 2.3.1 picomatch: 2.3.1
/regenerator-runtime@0.14.1:
resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
dev: false
/rehype-slug@6.0.0: /rehype-slug@6.0.0:
resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==} resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
dependencies: dependencies:
@ -1960,6 +1974,12 @@ packages:
magic-string: 0.30.5 magic-string: 0.30.5
periscopic: 3.1.0 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): /tailwindcss-animate@1.0.7(tailwindcss@3.4.1):
resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
peerDependencies: peerDependencies:

View file

@ -17,6 +17,8 @@ import {
import { inview } from 'svelte-inview' import { inview } from 'svelte-inview'
import { pick } from 'remeda' import { pick } from 'remeda'
import { writable } from 'svelte/store' import { writable } from 'svelte/store'
import { twMerge } from 'tailwind-merge'
import clsx from 'clsx'
/** /**
* Fade: The initial opacity from 0 to 1. * 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] rect2.coordinates[1] + rect2.size < rect1.coordinates[1]
) )
} }
/**
* Merge Tailwind classes
* @param {import('clsx').ClassValue} classes
*/
export function cn(...classes) {
return twMerge(clsx(classes))
}

View file

@ -1,5 +1,12 @@
<script lang="ts">
import { cn } from '$lib/Helper.mjs'
</script>
<div <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> </div>

View file

@ -1,12 +1,12 @@
<script> <script>
import clsx from 'clsx' import { cn } from '$lib/Helper.mjs'
/** @type { 'md'|'lg'|'xl'}*/ /** @type { 'md'|'lg'|'xl'}*/
export let size = 'md' export let size = 'md'
/** @type { 'primary'|'outline'|'fancyOutline' }*/ /** @type { 'primary'|'outline'|'fancyOutline' }*/
export let type = 'primary' export let type = 'primary'
$: classes = clsx( $: classes = cn(
'animate rounded text-sm font-bold hover:scale-[1.01] active:scale-100', 'animate rounded text-sm font-bold hover:scale-[1.01] active:scale-100',
'primary' == type && 'bg-slate-200 text-black', 'primary' == type && 'bg-slate-200 text-black',
'outline' == type && 'bg-transparent text-white outline outline-2 outline-slate-200', 'outline' == type && 'bg-transparent text-white outline outline-2 outline-slate-200',