docs(icon): added documentation and examples

N00nDay · Oct 20, 2022 · 834a2b8 · 834a2b8
1 parent d2f7155
commit 834a2b8
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 0 deletions.
diff --git a/src/routes/icon/+page.svelte b/src/routes/icon/+page.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Col, Card, Icon } from '../../lib';
+	import { copyToClipboard } from '../../lib/utils';
+	import { example, props } from './examples';
+	import { PropsTable, CodeBlock } from '../../docs';
+
+	const icons = [
+		'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>',
+		'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" /></svg>',
+		'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" /></svg>',
+		'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg>',
+		'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>',
+		'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" /></svg>'
+	];
+
+	function copy(index: number, icon: string) {
+		const el = document.getElementById(`icon-copy-${index}`);
+		copyToClipboard(`'${icon}'`);
+		if (el) {
+			el.classList.add('flex');
+			el.classList.remove('hidden');
+
+			setTimeout(() => {
+				el.classList.add('hidden');
+				el.classList.remove('flex');
+			}, 2000);
+		}
+	}
+</script>
+
+{#each icons as icon, i}
+	<Col class="col-4">
+		<Card hoverable on:click={() => copy(i, icon)} class="relative">
+			<Card.Content class="flex items-center justify-center h-24">
+				<Icon data={icon} />
+			</Card.Content>
+
+			<div
+				id={'icon-copy-' + i}
+				class="hidden absolute transition-all rounded-md z-10 inset-0 h-full w-full text-light-content dark:text-dark-content font-bold bg-dark-background dark:bg-light-background bg-opacity-10 dark:bg-opacity-10 backdrop-blur-sm items-center justify-center"
+			>
+				Copied!
+			</div>
+		</Card>
+	</Col>
+{/each}
+
+<Col class="col-24">
+	<Card>
+		<Card.Content>
+			<CodeBlock language="svelte" code={example} />
+		</Card.Content>
+	</Card>
+</Col>
+
+<Col class="col-24">
+	<PropsTable component="Icon" {props} />
+</Col>
diff --git a/src/routes/icon/+page.ts b/src/routes/icon/+page.ts
@@ -0,0 +1,7 @@
+export function load() {
+	return {
+		title: 'STWUI - Icon',
+		description: 'Svelte TailwindCSS Icon component',
+		header: 'Icon'
+	};
+}
diff --git a/src/routes/icon/examples.ts b/src/routes/icon/examples.ts
@@ -0,0 +1,61 @@
+import type { Prop } from '../../docs';
+
+export const props: Prop[] = [
+	{
+		id: '1',
+		prop: 'data',
+		type: '<a href="/types#IconData" class="link">string (IconData)</a>',
+		default: ''
+	},
+	{
+		id: '2',
+		prop: 'viewBox',
+		type: 'string',
+		default: '0 0 24 24'
+	},
+	{
+		id: '3',
+		prop: 'size',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '4',
+		prop: 'width',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '5',
+		prop: 'height',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '6',
+		prop: 'color',
+		type: 'string',
+		default: 'currentColor'
+	},
+	{
+		id: '7',
+		prop: 'stroke',
+		type: 'string | undefined',
+		default: ''
+	},
+	{
+		id: '8',
+		prop: 'fill',
+		type: 'string',
+		default: 'currentColor'
+	}
+];
+
+export const example = `
+<script lang="ts">
+	import { Icon } from 'stwui';
+
+	const icon = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>';
+</script>
+
+<Icon data={icon} />`;