feat: begin support for components and dark mode

app/routes/_data.dns._index/domains.tsx

@@ -15,11 +15,15 @@ import {
 	verticalListSortingStrategy
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { Bars3Icon } from '@heroicons/react/24/outline'
+import { Bars3Icon, LockClosedIcon } from '@heroicons/react/24/outline'
 import { useFetcher } from '@remix-run/react'
 import clsx from 'clsx'
 import { useEffect, useState } from 'react'
 
+import Action from '~/components/Action'
+import Input from '~/components/Input'
+import TableList from '~/components/TableList'
+
 type Properties = {
 	readonly baseDomain?: string;
 	readonly searchDomains: string[];
@@ -72,17 +76,12 @@ export default function Domains({ baseDomain, searchDomains }: Properties) {
 					}
 				}}
 			>
-				<div className='border border-gray-200 rounded-lg bg-gray-50 overflow-clip'>
+				<TableList>
 					{baseDomain ? (
-						<div
-							key='magic-dns-sd'
-							className={clsx(
-								'flex items-center justify-between px-3 py-2',
-								'border-b border-gray-200 last:border-b-0'
-							)}
-						>
+						<TableList.Item key='magic-dns-sd'>
 							<p className='font-mono text-sm'>{baseDomain}</p>
-						</div>
+							<LockClosedIcon className='h-4 w-4'/>
+						</TableList.Item>
 					) : undefined}
 					<SortableContext
 						items={localDomains}
@@ -101,30 +100,20 @@ export default function Domains({ baseDomain, searchDomains }: Properties) {
 							/> : undefined}
 						</DragOverlay>
 					</SortableContext>
-					<div
-						key='add-sd'
-						className={clsx(
-							'flex items-center justify-between px-3 py-2',
-							'border-b border-gray-200 last:border-b-0',
-							'bg-white dark:bg-gray-800'
-						)}
-					>
-						<input
+					<TableList.Item key='add-sd'>
+						<Input
+							isEmbedded
 							type='text'
-							className='w-full focus:ring-none focus:outline-none font-mono text-sm'
+							className='font-mono text-sm'
 							placeholder='Search Domain'
 							value={newDomain}
 							onChange={event => {
 								setNewDomain(event.target.value)
 							}}
 						/>
-						<button
-							type='button'
-							className={clsx(
-								'text-sm text-blue-700',
-								newDomain.length === 0 ? 'opacity-50 cursor-not-allowed' : ''
-							)}
-							disabled={newDomain.length === 0}
+						<Action
+							className='text-sm'
+							isDisabled={newDomain.length === 0}
 							onClick={() => {
 								fetcher.submit({
 								// eslint-disable-next-line @typescript-eslint/naming-convention
@@ -138,9 +127,9 @@ export default function Domains({ baseDomain, searchDomains }: Properties) {
 							}}
 						>
 							Add
-						</button>
-					</div>
-				</div>
+						</Action>
+					</TableList.Item>
+				</TableList>
 			</DndContext>
 		</div>
 	)
@@ -188,9 +177,9 @@ function Domain({ domain, id, localDomains, isDrag }: DomainProperties) {
 				{domain}
 			</p>
 			{isDrag ? undefined : (
-				<button
-					type='button'
-					className='text-sm text-red-700'
+				<Action
+					isDestructive
+					className='text-sm'
 					onClick={() => {
 						fetcher.submit({
 						// eslint-disable-next-line @typescript-eslint/naming-convention
@@ -202,7 +191,7 @@ function Domain({ domain, id, localDomains, isDrag }: DomainProperties) {
 					}}
 				>
 					Remove
-				</button>
+				</Action>
 			)}
 		</div>
 	)

app/routes/_data.dns._index/rename.tsx

@@ -2,9 +2,11 @@
 /* eslint-disable unicorn/no-keyword-prefix */
 import { Dialog } from '@headlessui/react'
 import { useFetcher } from '@remix-run/react'
-import clsx from 'clsx'
 import { useState } from 'react'
 
+import Code from '~/components/Code'
+import Input from '~/components/Input'
+
 type Properties = {
 	readonly name: string;
 }
@@ -21,18 +23,17 @@ export default function Modal({ name }: Properties) {
 				This is the base domain name of your Tailnet.
 				Devices are accessible at
 				{' '}
-				<code className='bg-gray-100 dark:bg-zinc-700 p-0.5 rounded-md'>
+				<Code>
 					[device].[user].{name}
-				</code>
+				</Code>
 				{' '}
 				when Magic DNS is enabled.
 			</p>
-			<input
+			<Input
 				readOnly
-				className={clsx(
-					'my-4 px-3 py-2 border rounded-lg focus:ring-none w-2/3 font-mono text-sm',
-					'dark:bg-zinc-800 dark:text-white dark:border-zinc-700'
-				)}
+				className='font-mono text-sm my-4'
+				// 'my-4 px-3 py-2 border rounded-lg focus:ring-none w-2/3 font-mono text-sm',
+				// 'dark:bg-zinc-800 dark:text-white dark:border-zinc-700'
 				type='text'
 				value={name}
 				onFocus={event => {
@@ -65,9 +66,9 @@ export default function Modal({ name }: Properties) {
 							of unexpected behavior and may break existing devices
 							in your tailnet.
 						</Dialog.Description>
-						<input
+						<Input
 							type='text'
-							className='border rounded-lg p-2 w-full mt-4 dark:bg-zinc-700 dark:text-white dark:border-zinc-700'
+							className='font-mono mt-4'
 							value={newName}
 							onChange={event => {
 								setNewName(event.target.value)

app/routes/_data.dns._index/route.tsx

@@ -4,6 +4,10 @@ import { json, useFetcher, useLoaderData } from '@remix-run/react'
 import clsx from 'clsx'
 import { useState } from 'react'
 
+import Action from '~/components/Action'
+import Code from '~/components/Code'
+import Input from '~/components/Input'
+import TableList from '~/components/TableList'
 import { getConfig, patchConfig } from '~/utils/config'
 import { restartHeadscale } from '~/utils/docker'
 
@@ -85,49 +89,42 @@ export default function Page() {
 							</Switch>
 						</div>
 					</div>
-					<div className='border border-gray-200 rounded-lg bg-gray-50 overflow-clip'>
+					<TableList>
 						{data.nameservers.map((ns, index) => (
-							<div
-								// eslint-disable-next-line react/no-array-index-key
-								key={index}
-								className={clsx(
-									'flex items-center justify-between px-3 py-2',
-									'border-b border-gray-200 last:border-b-0'
-								)}
-							>
+							// eslint-disable-next-line react/no-array-index-key
+							<TableList.Item key={index}>
 								<p className='font-mono text-sm'>{ns}</p>
-								<button
-									type='button'
-									className='text-sm text-red-700'
+								<Action
+									isDestructive
+									className='text-sm'
+									onClick={() => {
+										fetcher.submit({
+											// eslint-disable-next-line @typescript-eslint/naming-convention
+											'dns_config.nameservers': data.nameservers.filter((_, index_) => index_ !== index)
+										}, {
+											method: 'PATCH',
+											encType: 'application/json'
+										})
+									}}
 								>
 									Remove
-								</button>
-							</div>
+								</Action>
+							</TableList.Item>
 						))}
-						<div
-							key='add-ns'
-							className={clsx(
-								'flex items-center justify-between px-3 py-2',
-								'border-b border-gray-200 last:border-b-0',
-								'bg-white dark:bg-gray-800'
-							)}
-						>
-							<input
+						<TableList.Item>
+							<Input
+								isEmbedded
 								type='text'
-								className='w-full focus:ring-none focus:outline-none font-mono text-sm'
+								className='font-mono text-sm'
 								placeholder='Nameserver'
 								value={ns}
 								onChange={event => {
 									setNs(event.target.value)
 								}}
 							/>
-							<button
-								type='button'
-								className={clsx(
-									'text-sm text-blue-700',
-									ns.length === 0 ? 'opacity-50 cursor-not-allowed' : ''
-								)}
-								disabled={ns.length === 0}
+							<Action
+								className='text-sm'
+								isDisabled={ns.length === 0}
 								onClick={() => {
 									fetcher.submit({
 										// eslint-disable-next-line @typescript-eslint/naming-convention
@@ -141,9 +138,9 @@ export default function Page() {
 								}}
 							>
 								Add
-							</button>
-						</div>
-					</div>
+							</Action>
+						</TableList.Item>
+					</TableList>
 					{/* TODO: Split DNS and Custom A Records */}
 				</div>
 			</div>
@@ -159,9 +156,9 @@ export default function Page() {
 					Automaticall register domain names for each device
 					on the tailnet. Devices will be accessible at
 					{' '}
-					<code className='bg-gray-100 p-1 rounded-md'>
+					<Code>
 						[device].[user].{data.baseDomain}
-					</code>
+					</Code>
 					{' '}
 					when Magic DNS is enabled.
 				</p>

app/routes/_data.machines.$id.tsx

@@ -2,6 +2,7 @@ import { type LoaderFunctionArgs } from '@remix-run/node'
 import { Link, useLoaderData } from '@remix-run/react'
 
 import Attribute from '~/components/Attribute'
+import Card from '~/components/Card'
 import StatusCircle from '~/components/StatusCircle'
 import { type Machine } from '~/types'
 import { pull } from '~/utils/headscale'
@@ -41,7 +42,7 @@ export default function Page() {
 				</h1>
 				<StatusCircle isOnline={data.online} className='w-4 h-4'/>
 			</span>
-			<div className='p-4 md:p-6 border dark:border-zinc-700 rounded-lg'>
+			<Card>
 				<Attribute name='Creator' value={data.user.name}/>
 				<Attribute name='Node ID' value={data.id}/>
 				<Attribute name='Node Name' value={data.givenName}/>
@@ -68,7 +69,7 @@ export default function Page() {
 					name='Domain'
 					value={`${data.givenName}.${data.user.name}.ts.net`}
 				/>
-			</div>
+			</Card>
 		</div>
 	)
 }

app/routes/_data.users._index.tsx

@@ -5,6 +5,7 @@ import { useLoaderData } from '@remix-run/react'
 import { toast } from 'react-hot-toast/headless'
 
 import Attribute from '~/components/Attribute'
+import Card from '~/components/Card'
 import StatusCircle from '~/components/StatusCircle'
 import { type Machine, type User } from '~/types'
 import { pull } from '~/utils/headscale'
@@ -44,7 +45,7 @@ export default function Page() {
 	return (
 		<div className='grid grid-cols-2 gap-4 auto-rows-min'>
 			{data.map(user => (
-				<div key={user.id} className='border rounded-lg p-4'>
+				<Card key={user.id}>
 					<div className='flex items-center gap-4'>
 						<UserIcon className='w-6 h-6'/>
 						<span className='text-lg font-mono'>
@@ -59,7 +60,7 @@ export default function Page() {
 							</div>
 						))}
 					</div>
-				</div>
+				</Card>
 			))}
 		</div>
 	)

app/routes/login.tsx

@@ -2,6 +2,7 @@ import { type ActionFunctionArgs, json, type LoaderFunctionArgs, redirect } from
 import { Form, Link, useActionData, useLoaderData } from '@remix-run/react'
 import { useMemo } from 'react'
 
+import Code from '~/components/Code'
 import { pull } from '~/utils/headscale'
 import { startOidc } from '~/utils/oidc'
 import { commitSession, getSession } from '~/utils/sessions'
@@ -82,9 +83,9 @@ export default function Page() {
 							Enter an API key to authenticate with Headplane. You can generate
 							one by running
 							{' '}
-							<code className='bg-gray-100 p-1 rounded-md'>
+							<Code>
 								headscale apikeys create
-							</code>
+							</Code>
 							{' '}
 							in your terminal.
 						</p>