From 5832fff98cbf4868bed957afbc9d79975224e9d5 Mon Sep 17 00:00:00 2001 From: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com> Date: Tue, 13 Aug 2024 23:42:15 +0200 Subject: [PATCH] component: Switch --- src/lib/assets/icons/index.ts | 4 ++ src/lib/assets/icons/lock-closed-small.svg | 3 + src/lib/assets/icons/lock-open-small.svg | 3 + src/lib/components/ui/switch/index.ts | 38 +++++++++++ src/lib/components/ui/switch/switch.svelte | 75 +++++++++++++++++++++ src/lib/config/sitemap.ts | 2 +- src/routes/switch/+page.svelte | 39 ++++++++++- src/routes/switch/+page.ts | 21 ++++++ src/routes/switch/default.svelte | 8 +++ src/routes/switch/disabled.svelte | 8 +++ src/routes/switch/sizes.svelte | 10 +++ src/routes/switch/subtle-with-icon.svelte | 38 +++++++++++ src/routes/switch/with-label.svelte | 78 ++++++++++++++++++++++ 13 files changed, 325 insertions(+), 2 deletions(-) create mode 100644 src/lib/assets/icons/lock-closed-small.svg create mode 100644 src/lib/assets/icons/lock-open-small.svg create mode 100644 src/lib/components/ui/switch/index.ts create mode 100644 src/lib/components/ui/switch/switch.svelte create mode 100644 src/routes/switch/+page.ts create mode 100644 src/routes/switch/default.svelte create mode 100644 src/routes/switch/disabled.svelte create mode 100644 src/routes/switch/sizes.svelte create mode 100644 src/routes/switch/subtle-with-icon.svelte create mode 100644 src/routes/switch/with-label.svelte diff --git a/src/lib/assets/icons/index.ts b/src/lib/assets/icons/index.ts index b74bfa9..4b7cb57 100644 --- a/src/lib/assets/icons/index.ts +++ b/src/lib/assets/icons/index.ts @@ -38,6 +38,8 @@ import Information from './information.svg?component'; import Key from './key.svg?component'; import Link from './link.svg?component'; import LoaderCircle from './loader-circle.svg?component'; +import LockClosedSmall from './lock-closed-small.svg?component'; +import LockOpenSmall from './lock-open-small.svg?component'; import LogoBitbucketColor from './logo-bitbucket-color.svg?component'; import LogoGeist from './logo-geist.svg?component'; import LogoGithub from './logo-github.svg?component'; @@ -106,6 +108,8 @@ export const Icons = { Key, Link, LoaderCircle, + LockClosedSmall, + LockOpenSmall, LogoBitbucketColor, LogoGeist, LogoGithub, diff --git a/src/lib/assets/icons/lock-closed-small.svg b/src/lib/assets/icons/lock-closed-small.svg new file mode 100644 index 0000000..2544342 --- /dev/null +++ b/src/lib/assets/icons/lock-closed-small.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/lib/assets/icons/lock-open-small.svg b/src/lib/assets/icons/lock-open-small.svg new file mode 100644 index 0000000..c5c1371 --- /dev/null +++ b/src/lib/assets/icons/lock-open-small.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/lib/components/ui/switch/index.ts b/src/lib/components/ui/switch/index.ts new file mode 100644 index 0000000..90660c4 --- /dev/null +++ b/src/lib/components/ui/switch/index.ts @@ -0,0 +1,38 @@ +import type { Icons } from '$lib/assets/icons'; +import { Switch as SwitchPrimitive } from 'bits-ui'; +import { tv, type VariantProps } from 'tailwind-variants'; +import Root from './switch.svelte'; + +export const switch_variants = tv({ + base: 'group inline-flex shrink-0 cursor-pointer items-center rounded-full border border-gray-alpha-400 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-color focus-visible:ring-offset-2 focus-visible:ring-offset-background-200 disabled:cursor-not-allowed data-[state=unchecked]:bg-gray-100 disabled:data-[state=unchecked]:bg-background-100', + variants: { + variant: { + default: + 'data-[state=checked]:bg-blue-700 disabled:data-[state=checked]:border-accents-2 disabled:data-[state=checked]:bg-accents-1', + subtle: 'data-[state=checked]:bg-gray-100 disabled:data-[state=checked]:bg-background-100' + }, + size: { + md: 'h-[14px] w-[28px]', + lg: 'h-[24px] w-[40px]' + } + }, + defaultVariants: { + variant: 'default', + size: 'md' + } +}); + +type Variant = VariantProps['variant']; +type Size = VariantProps['size']; + +export type Props = SwitchPrimitive.Props & { + variant?: Variant; + size?: Size; + icon?: { + checked: typeof Icons.Accessibility; + unchecked: typeof Icons.Accessibility; + }; + direction?: 'switch-first' | 'switch-last'; +}; + +export { Root, Root as Switch }; diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte new file mode 100644 index 0000000..80d2115 --- /dev/null +++ b/src/lib/components/ui/switch/switch.svelte @@ -0,0 +1,75 @@ + + + diff --git a/src/lib/config/sitemap.ts b/src/lib/config/sitemap.ts index 35c0e98..4c7edb6 100644 --- a/src/lib/config/sitemap.ts +++ b/src/lib/config/sitemap.ts @@ -230,7 +230,7 @@ export const aside_items: Aside = { { title: 'Switch', href: '/switch', - status: 'soon' + status: 'new' }, { title: 'Table', diff --git a/src/routes/switch/+page.svelte b/src/routes/switch/+page.svelte index e47f202..4b3dced 100644 --- a/src/routes/switch/+page.svelte +++ b/src/routes/switch/+page.svelte @@ -1 +1,38 @@ -

switch

+ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/switch/+page.ts b/src/routes/switch/+page.ts new file mode 100644 index 0000000..5c655a1 --- /dev/null +++ b/src/routes/switch/+page.ts @@ -0,0 +1,21 @@ +import type { MetaTagsProps } from 'svelte-meta-tags'; + +export function load() { + const title = 'Switch'; + const description = 'Displays a boolean value.'; + + const pageMetaTags = Object.freeze({ + title, + description, + openGraph: { + title, + description + } + }) satisfies MetaTagsProps; + + return { + pageMetaTags, + title, + description + }; +} diff --git a/src/routes/switch/default.svelte b/src/routes/switch/default.svelte new file mode 100644 index 0000000..725f08c --- /dev/null +++ b/src/routes/switch/default.svelte @@ -0,0 +1,8 @@ + + +
+ + +
diff --git a/src/routes/switch/disabled.svelte b/src/routes/switch/disabled.svelte new file mode 100644 index 0000000..059a65a --- /dev/null +++ b/src/routes/switch/disabled.svelte @@ -0,0 +1,8 @@ + + +
+ + +
diff --git a/src/routes/switch/sizes.svelte b/src/routes/switch/sizes.svelte new file mode 100644 index 0000000..f762018 --- /dev/null +++ b/src/routes/switch/sizes.svelte @@ -0,0 +1,10 @@ + + +
+ + +
diff --git a/src/routes/switch/subtle-with-icon.svelte b/src/routes/switch/subtle-with-icon.svelte new file mode 100644 index 0000000..d243386 --- /dev/null +++ b/src/routes/switch/subtle-with-icon.svelte @@ -0,0 +1,38 @@ + + +
+ + + + + +
diff --git a/src/routes/switch/with-label.svelte b/src/routes/switch/with-label.svelte new file mode 100644 index 0000000..15619eb --- /dev/null +++ b/src/routes/switch/with-label.svelte @@ -0,0 +1,78 @@ + + +
+ Enable Firewall + Enable Firewall + + Enable Firewall + Enable Firewall + + Enable Firewall + + Enable Firewall + + + + Enable Firewall + + + Enable Firewall + + + + Enable Firewall + + + Enable Firewall + + + + Enable Firewall + + + Enable Firewall + + + + Enable Firewall + + + Enable Firewall + +