mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-12-22 18:29:48 +01:00
add cn helper
This commit is contained in:
parent
dea0fc0a31
commit
5accb120d9
5 changed files with 42 additions and 4 deletions
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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))
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in a new issue