From cd7e45b4389af433793bf9783d413440e8626c98 Mon Sep 17 00:00:00 2001
From: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>
Date: Thu, 3 Oct 2024 17:26:01 +0200
Subject: [PATCH] more

---
 src/lib/assets/icons/index.ts          |  4 ++++
 src/lib/assets/icons/shield-globe.svg  |  7 ++++++
 src/lib/assets/icons/user-plus.svg     |  3 +++
 src/lib/components/ui/snippet/index.ts |  2 ++
 src/routes/+page.svelte                | 32 +++++++++++++++++++++++++-
 5 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/assets/icons/shield-globe.svg
 create mode 100644 src/lib/assets/icons/user-plus.svg

diff --git a/src/lib/assets/icons/index.ts b/src/lib/assets/icons/index.ts
index 3d3ee0e..5364f6f 100644
--- a/src/lib/assets/icons/index.ts
+++ b/src/lib/assets/icons/index.ts
@@ -66,6 +66,7 @@ import Paperclip from './paperclip.svg?component';
 import PencilEdit from './pencil-edit.svg?component';
 import Router from './router.svg?component';
 import SettingsSliders from './settings-sliders.svg?component';
+import ShieldGlobe from './shield-globe.svg?component';
 import Shield from './shield.svg?component';
 import Star from './star.svg?component';
 import Status from './status.svg?component';
@@ -74,6 +75,7 @@ import Tabs from './tabs.svg?component';
 import ThemeSwitchDark from './theme-switch-dark.svg?component';
 import ThemeSwitchLight from './theme-switch-light.svg?component';
 import ThemeSwitchSystem from './theme-switch-system.svg?component';
+import UserPlus from './user-plus.svg?component';
 import Warning from './warning.svg?component';
 
 export const Icons = {
@@ -145,6 +147,7 @@ export const Icons = {
 	PencilEdit,
 	Router,
 	SettingsSliders,
+	ShieldGlobe,
 	Shield,
 	Star,
 	Status,
@@ -153,5 +156,6 @@ export const Icons = {
 	ThemeSwitchDark,
 	ThemeSwitchLight,
 	ThemeSwitchSystem,
+	UserPlus,
 	Warning
 };
diff --git a/src/lib/assets/icons/shield-globe.svg b/src/lib/assets/icons/shield-globe.svg
new file mode 100644
index 0000000..5680812
--- /dev/null
+++ b/src/lib/assets/icons/shield-globe.svg
@@ -0,0 +1,7 @@
+<svg height="16" stroke-linejoin="round" color="currentColor" viewBox="0 0 16 16" width="16">
+    <path d="M11.25 4.25V3.5C9.35033 2.86678 6 2.58921 6 0C6 2.58921 2.64967 2.86678 0.75 3.5V9.52717C0.75 11.2011 1.67915 12.7367 3.16197 13.5134L4.5 14.2143" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" fill="transparent"></path>
+    <circle cx="11.5" cy="11.5" r="3.875" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="transparent"></circle>
+    <path d="M8 11.5H15.25" stroke="currentColor" stroke-linejoin="bevel"></path>
+    <path d="M10.75 15V15C10.0964 12.7124 10.0964 10.2876 10.75 8V8" stroke="currentColor" stroke-linejoin="bevel"></path>
+    <path d="M12.25 15V15C12.9036 12.7124 12.9036 10.2876 12.25 8V8" stroke="currentColor" stroke-linejoin="bevel"></path>
+</svg>
\ No newline at end of file
diff --git a/src/lib/assets/icons/user-plus.svg b/src/lib/assets/icons/user-plus.svg
new file mode 100644
index 0000000..b625bf5
--- /dev/null
+++ b/src/lib/assets/icons/user-plus.svg
@@ -0,0 +1,3 @@
+<svg height="16" stroke-linejoin="round" color="currentColor" viewBox="0 0 16 16" width="16">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.75 0C3.95507 0 2.5 1.45507 2.5 3.25V3.75C2.5 5.54493 3.95507 7 5.75 7H6.25C8.04493 7 9.5 5.54493 9.5 3.75V3.25C9.5 1.45507 8.04493 0 6.25 0H5.75ZM4 3.25C4 2.2835 4.7835 1.5 5.75 1.5H6.25C7.2165 1.5 8 2.2835 8 3.25V3.75C8 4.7165 7.2165 5.5 6.25 5.5H5.75C4.7835 5.5 4 4.7165 4 3.75V3.25ZM12.25 7.25V9H13.75V7.25H15.5V5.75H13.75V4H12.25V5.75H10.5V7.25H12.25ZM1.5 13.1709V14.5H10.5V13.1709C9.68042 11.5377 8.00692 10.5 6.17055 10.5H5.82945C3.99308 10.5 2.31958 11.5377 1.5 13.1709ZM0.0690305 12.6857C1.10604 10.4388 3.35483 9 5.82945 9H6.17055C8.64517 9 10.894 10.4388 11.931 12.6857L12 12.8353V13V15.25V16H11.25H0.75H0V15.25V13V12.8353L0.0690305 12.6857Z" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/lib/components/ui/snippet/index.ts b/src/lib/components/ui/snippet/index.ts
index 781c453..4c39897 100644
--- a/src/lib/components/ui/snippet/index.ts
+++ b/src/lib/components/ui/snippet/index.ts
@@ -7,6 +7,7 @@ export const snippet_variants = tv({
 		variant: {
 			default: 'border-gray-alpha-400',
 			success: 'bg-blue-100 text-blue-900',
+			secondary: 'bg-gray-100 text-gray-900',
 			error: 'bg-red-100 text-red-900',
 			warning: 'bg-amber-100 text-amber-900'
 		}
@@ -19,6 +20,7 @@ export const copy_button_variants = tv({
 		variant: {
 			default: 'text-gray-1000',
 			success: 'text-blue-900',
+			secondary: 'text-gray-900',
 			error: 'text-red-900',
 			warning: 'text-amber-900'
 		}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ebf9b48..3784f56 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { Icons } from '$lib/assets/icons';
 	import PageWrapper from '$lib/components/shared/page-wrapper.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Snippet } from '$lib/components/ui/snippet';
 	import IntroductionLink from './introduction-link.svelte';
 
 	const preview_icons = [
@@ -81,7 +84,34 @@
 			title="Components"
 			description="Building blocks for Svelte applications."
 			href="/avatar"
-		></IntroductionLink>
+		>
+			<div class="pointer-events-none flex flex-wrap gap-4">
+				<Snippet
+					text="pnpm create svelte@latest"
+					class="md:[246px] w-[214px] text-gray-900 [&_button]:text-gray-900"
+				/>
+				<Button affix={Icons.UserPlus} variant="secondary" class="text-gray-900">
+					Collaborate
+				</Button>
+				<Button
+					svg_only
+					aria-label="Shield"
+					variant="secondary"
+					shape="square"
+					size="md"
+					class="text-gray-900"
+				>
+					<Icons.ShieldGlobe />
+				</Button>
+				<!-- TODO: Add a switch (not really a switch) here. -->
+				<Input
+					aria-labelledby="Not a real input!"
+					placeholder="Value"
+					affix="Label"
+					suffix_styling={false}
+				/>
+			</div>
+		</IntroductionLink>
 		<IntroductionLink
 			title="Colors"
 			description="A high contrast, accessible color system."