LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 12:57:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix some missing prettier

Browse Source
This commit is contained in:
ernstmul
2024-10-14 17:30:26 +02:00
parent f42bb77236
commit bdb08eceb9
62 changed files with 777 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/lib/components/ui/Button.svelte
View File

@@ -1,51 +1,51 @@
<script lang="ts">
import { classNames } from '$lib/utils/classnames';
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
import { cva, type VariantProps } from 'cva';
import InlineTag from './InlineTag.svelte';
import { classNames } from '$lib/utils/classnames';
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
import { cva, type VariantProps } from 'cva';
import InlineTag from './InlineTag.svelte';
const button = cva(
[
'flex w-fit justify-center px-[0.875rem] h-10 transition-all text-center no-underline select-none min-w-10 bg-origin-border text-white font-medium items-center gap-2 rounded-lg border border-transparent button duration-200'
],
{
variants: {
variant: {
primary: [
'bg-[linear-gradient(135deg,_var(--color-accent)_0%,_var(--color-accent)_61%,_var(--color-secondary-100)_100%)]',
'hover:shadow-[0_0_2rem_var(--color-accent-200)] active:not:disabled:shadow-[0_0_2rem_var(--color-accent-200)]'
],
secondary: [
'bg-[#fd366e0a] relative',
'hover:shadow-[0_-6px_10px_0px_rgba(253,54,110,0.08)_inset]'
],
text: [
'bg-transparent border-transparent text-white',
'hover:backdrop-blur-md hover:bg-[linear-gradient(135deg,_rgba(255,_255,_255,_0.06)_0%,_rgba(255,_255,_255,_0.10)_54.74%,_rgba(255,_255,_255,_0.06)_100%)]'
]
const button = cva(
[
'flex w-fit justify-center px-[0.875rem] h-10 transition-all text-center no-underline select-none min-w-10 bg-origin-border text-white font-medium items-center gap-2 rounded-lg border border-transparent button duration-200'
],
{
variants: {
variant: {
primary: [
'bg-[linear-gradient(135deg,_var(--color-accent)_0%,_var(--color-accent)_61%,_var(--color-secondary-100)_100%)]',
'hover:shadow-[0_0_2rem_var(--color-accent-200)] active:not:disabled:shadow-[0_0_2rem_var(--color-accent-200)]'
],
secondary: [
'bg-[#fd366e0a] relative',
'hover:shadow-[0_-6px_10px_0px_rgba(253,54,110,0.08)_inset]'
],
text: [
'bg-transparent border-transparent text-white',
'hover:backdrop-blur-md hover:bg-[linear-gradient(135deg,_rgba(255,_255,_255,_0.06)_0%,_rgba(255,_255,_255,_0.10)_54.74%,_rgba(255,_255,_255,_0.06)_100%)]'
]
}
}
}
}
);
);
type ButtonProps =
| (HTMLButtonAttributes & { href?: undefined })
| (HTMLAnchorAttributes & { href: string });
type ButtonProps =
| (HTMLButtonAttributes & { href?: undefined })
| (HTMLAnchorAttributes & { href: string });
type $$Props = ButtonProps & VariantProps<typeof button>;
type $$Props = ButtonProps & VariantProps<typeof button>;
export let href: $$Props['href'] = undefined;
export let variant: $$Props['variant'] = 'primary';
const { class: classes, ...props } = $$restProps;
export let href: $$Props['href'] = undefined;
export let variant: $$Props['variant'] = 'primary';
const { class: classes, ...props } = $$restProps;
const buttonClasses = classNames(button({ variant }), classes, {
secondary: variant === 'secondary',
'leading-tight': $$slots.icon
});
const buttonClasses = classNames(button({ variant }), classes, {
secondary: variant === 'secondary',
'leading-tight': $$slots.icon
});
</script>
{#if href}
<a {...props} href={href} class={buttonClasses}>
<a {...props} {href} class={buttonClasses}>
{#if $$slots.icon}
<slot name="icon" />
{/if}