feat: code component (#51)

src/docs/constants.ts

@@ -5,6 +5,7 @@ import {
 	mdiCardOutline,
 	mdiCheckboxMarked,
 	mdiCloseCircle,
+	mdiCodeBraces,
 	mdiDotsCircle,
 	mdiFormatHeaderPound,
 	mdiFormTextbox,
@@ -70,6 +71,7 @@ export const componentGroups = [
 	{
 		title: 'Text',
 		components: [
+			{ name: 'Code', icon: mdiCodeBraces },
 			{ name: 'Text', icon: mdiFormatHeaderPound },
 			{ name: 'Heading', icon: mdiFormTextbox },
 			{ name: 'Link', icon: mdiLink },

src/lib/components/Code/Code.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Color, Size } from '$lib/types.js';
+	import type { Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		color?: Color;
+		size?: Size;
+		variant?: 'filled';
+		children: Snippet;
+	};
+
+	const { size = 'medium', variant, color = 'secondary', children }: Props = $props();
+
+	const styles = tv({
+		base: 'font-monospace',
+		variants: {
+			textColor: {
+				primary: 'text-primary',
+				secondary: 'text-dark',
+				success: 'text-success',
+				danger: 'text-danger',
+				warning: 'text-warning',
+				info: 'text-info',
+			},
+
+			filled: {
+				true: 'rounded px-2 py-1',
+				false: '',
+			},
+
+			filledColor: {
+				false: '',
+				primary: 'bg-primary text-light',
+				secondary: 'bg-dark text-light',
+				success: 'bg-success text-light',
+				danger: 'bg-danger text-light',
+				warning: 'bg-warning text-light',
+				info: 'bg-info text-dark',
+			},
+
+			size: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+		},
+	});
+</script>
+
+<code
+	class={styles({
+		filled: variant === 'filled',
+		filledColor: variant === 'filled' && color,
+		textColor: color,
+		size,
+	})}>{@render children()}</code
+>

src/lib/index.ts

@@ -10,6 +10,7 @@ export { default as CardFooter } from '$lib/components/Card/CardFooter.svelte';
 export { default as CardHeader } from '$lib/components/Card/CardHeader.svelte';
 export { default as CardTitle } from '$lib/components/Card/CardTitle.svelte';
 export { default as CloseButton } from '$lib/components/CloseButton/CloseButton.svelte';
+export { default as Code } from '$lib/components/Code/Code.svelte';
 export { default as Checkbox } from '$lib/components/Form/Checkbox.svelte';
 export { default as Field } from '$lib/components/Form/Field.svelte';
 export { default as HelperText } from '$lib/components/Form/HelperText.svelte';

src/routes/components/code/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import ExampleLayout from '$docs/components/ExampleLayout.svelte';
+	import ColorExample from './ColorExample.svelte';
+	import colorExample from './ColorExample.svelte?raw';
+	import FilledExample from './FilledExample.svelte';
+	import filledExample from './FilledExample.svelte?raw';
+	import SizeExample from './SizeExample.svelte';
+	import sizeExample from './SizeExample.svelte?raw';
+
+	const examples = [
+		{ title: 'Size', code: sizeExample, component: SizeExample },
+		{ title: 'Color', code: colorExample, component: ColorExample },
+		{ title: 'Filled', code: filledExample, component: FilledExample },
+	];
+</script>
+
+<ExampleLayout name="Code" {examples} />

src/routes/components/code/ColorExample.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Code, Stack } from '@immich/ui';
+</script>
+
+<Stack>
+	<Code color="primary">console.log('hello world!')</Code>
+	<Code color="secondary">console.log('hello world!')</Code>
+	<Code color="success">console.log('hello world!')</Code>
+	<Code color="info">console.log('hello world!')</Code>
+	<Code color="warning">console.log('hello world!')</Code>
+	<Code color="danger">console.log('hello world!')</Code>
+</Stack>

src/routes/components/code/FilledExample.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Code, Stack } from '@immich/ui';
+</script>
+
+<Stack>
+	<Code variant="filled" color="primary">console.log('hello world!')</Code>
+	<Code variant="filled" color="secondary">console.log('hello world!')</Code>
+	<Code variant="filled" color="success">console.log('hello world!')</Code>
+	<Code variant="filled" color="info">console.log('hello world!')</Code>
+	<Code variant="filled" color="warning">console.log('hello world!')</Code>
+	<Code variant="filled" color="danger">console.log('hello world!')</Code>
+</Stack>

src/routes/components/code/SizeExample.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Code, Stack } from '@immich/ui';
+</script>
+
+<Stack>
+	<Code size="tiny">console.log('hello world!')</Code>
+	<Code size="small">console.log('hello world!')</Code>
+	<Code size="medium">console.log('hello world!')</Code>
+	<Code size="large">console.log('hello world!')</Code>
+	<Code size="giant">console.log('hello world!')</Code>
+</Stack>