mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-11-17 02:45:59 +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",
|
"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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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:
|
||||||
|
|
|
@ -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))
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in a new issue