Add Code component

src/components/Code.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import IconClipboardCopy from 'virtual:icons/heroicons-outline/clipboard-copy'
+	import IconCheck from 'virtual:icons/heroicons-outline/check'
+
+	export let text: string
+
+	let copied = false
+</script>
+
+<button
+	class="code"
+	class:copied
+	title="Copy code to clipboard"
+	on:click={async () => {
+		await navigator.clipboard.writeText(text)
+		copied = true
+	}}>
+	{text}
+	{#if copied}
+		<IconCheck />
+	{:else}
+		<IconClipboardCopy />
+	{/if}
+</button>
+
+<style lang="postcss">
+	.code {
+		display: flex;
+		gap: 0.5rem;
+		font-family: var(--mono-font);
+		padding: 0.25rem 0.5rem;
+		background-color: var(--color-code-bg);
+		width: min-content;
+		border-radius: var(--rounded-sm);
+		user-select: text;
+
+		&.copied {
+			cursor: default;
+		}
+
+		&:hover:not(.copied) {
+			filter: brightness(0.9);
+		}
+	}
+</style>