feat: begin support for components and dark mode

app/components/Action.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx'
+import { type HTMLProps } from 'react'
+
+type Properties = HTMLProps<HTMLButtonElement> & {
+	readonly isDestructive?: boolean;
+	readonly isDisabled?: boolean;
+}
+
+export default function Action(properties: Properties) {
+	return (
+		<button
+			{...properties}
+			type='button'
+			className={clsx(
+				properties.className,
+				properties.isDisabled && 'opacity-50 cursor-not-allowed',
+				properties.isDestructive
+					? 'text-red-700 dark:text-red-500'
+					: 'text-blue-700 dark:text-blue-400'
+			)}
+		>
+			{properties.children}
+		</button>
+	)
+}

app/components/Card.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx'
+import { type HTMLProps } from 'react'
+
+type Properties = HTMLProps<HTMLDivElement>
+
+export default function Card(properties: Properties) {
+	return (
+		<div
+			{...properties}
+			className={clsx(
+				'p-4 md:p-6 border dark:border-zinc-700 rounded-lg',
+				properties.className
+			)}
+		>
+			{properties.children}
+		</div>
+	)
+}

app/components/Code.tsx

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react'
+
+export default function Code({ children }: { readonly children: ReactNode }) {
+	return (
+		<code className='bg-gray-100 dark:bg-zinc-700 p-0.5 rounded-md'>
+			{children}
+		</code>
+	)
+}

app/components/Input.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx'
+import { type DetailedHTMLProps, type InputHTMLAttributes } from 'react'
+
+type Properties = {
+	readonly isEmbedded?: boolean;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+
+export default function Input(properties: Properties) {
+	return (
+		<input
+			{...properties}
+			className={clsx(
+				'block w-full dark:text-gray-300',
+				'border-gray-300 dark:border-zinc-700',
+				'focus:outline-none focus:ring',
+				'focus:ring-blue-500 dark:focus:ring-blue-300',
+				properties.isEmbedded ? 'bg-transparent' : 'dark:bg-zinc-800',
+				properties.isEmbedded ? 'p-0' : 'px-2.5 py-1.5',
+				properties.isEmbedded ? 'border-none' : 'border',
+				properties.isEmbedded ? 'focus:ring-0' : 'focus:ring-1',
+				properties.isEmbedded ? 'rounded-none' : 'rounded-lg',
+				properties.className
+			)}
+		/>
+	)
+}

app/components/TableList.tsx

@@ -0,0 +1,37 @@
+import clsx from 'clsx'
+import { type HTMLProps } from 'react'
+
+function TableList(properties: HTMLProps<HTMLDivElement>) {
+	return (
+		<div
+			{...properties}
+			className={clsx(
+				'border border-gray-300 rounded-lg overflow-clip',
+				'dark:border-zinc-700 dark:text-gray-300',
+				// 'dark:bg-zinc-800',
+				properties.className
+			)}
+		>
+			{properties.children}
+		</div>
+	)
+}
+
+function Item(properties: HTMLProps<HTMLDivElement>) {
+	return (
+		<div
+			{...properties}
+			className={clsx(
+
+				'flex items-center justify-between px-3 py-2',
+				'border-b border-gray-200 last:border-b-0',
+				'dark:border-zinc-800',
+				properties.className
+			)}
+		>
+			{properties.children}
+		</div>
+	)
+}
+
+export default Object.assign(TableList, { Item })