@insymetri/styleguide 0.1.18 → 0.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</script>
|
|
28
28
|
|
|
29
29
|
<span
|
|
30
|
-
class="inline-flex items-center gap-4 px-8
|
|
30
|
+
class="inline-flex items-center gap-4 px-8 h-24 bg-gray-100 border border-gray-200 rounded-full text-tiny text-secondary cursor-default"
|
|
31
31
|
>
|
|
32
32
|
<span class="flex items-center gap-4">
|
|
33
33
|
<span class="font-medium">{fieldLabel}</span>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import {icons, type IconName} from '../icons'
|
|
3
|
+
import IIIcon from '../IIIcon/IIIcon.svelte'
|
|
4
|
+
|
|
5
|
+
const iconNames = Object.keys(icons) as IconName[]
|
|
6
|
+
|
|
7
|
+
let search = $state('')
|
|
8
|
+
|
|
9
|
+
const filtered = $derived(
|
|
10
|
+
search ? iconNames.filter(name => name.toLowerCase().includes(search.toLowerCase())) : iconNames
|
|
11
|
+
)
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<div class="flex flex-col gap-24 p-24 text-body">
|
|
15
|
+
<section>
|
|
16
|
+
<h2 class="text-h2 mb-8">Icons</h2>
|
|
17
|
+
<p class="text-small text-secondary mb-16">
|
|
18
|
+
{iconNames.length} Phosphor Regular icons. Click a name to copy it.
|
|
19
|
+
</p>
|
|
20
|
+
<input
|
|
21
|
+
type="search"
|
|
22
|
+
placeholder="Search icons..."
|
|
23
|
+
bind:value={search}
|
|
24
|
+
class="py-5 px-12 text-small bg-surface border border-strong rounded-control w-full max-w-300 outline-none focus:border-primary"
|
|
25
|
+
style="margin-bottom: 32px;"
|
|
26
|
+
/>
|
|
27
|
+
<div
|
|
28
|
+
style="display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px;"
|
|
29
|
+
>
|
|
30
|
+
{#each filtered as name (name)}
|
|
31
|
+
<button
|
|
32
|
+
class="flex flex-col items-center gap-8 p-12 rounded-8 bg-surface-raised border border-subtle cursor-default transition-all duration-fast hover:shadow-card hover:border-strong"
|
|
33
|
+
onclick={() => navigator.clipboard.writeText(name)}
|
|
34
|
+
title="Copy '{name}'"
|
|
35
|
+
>
|
|
36
|
+
<IIIcon iconName={name} class="w-24 h-24 text-body" />
|
|
37
|
+
<span class="text-tiny text-secondary font-mono truncate w-full text-center">{name}</span>
|
|
38
|
+
</button>
|
|
39
|
+
{/each}
|
|
40
|
+
</div>
|
|
41
|
+
{#if filtered.length === 0}
|
|
42
|
+
<p class="text-small text-tertiary text-center py-32">No icons match "{search}"</p>
|
|
43
|
+
{/if}
|
|
44
|
+
</section>
|
|
45
|
+
</div>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Icons } from './Icons.svelte';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Icons } from './Icons.svelte';
|