more

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
 };

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'
 		}

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."