feat: add machine info page

app/components/Attribute.tsx

@@ -0,0 +1,39 @@
+import { ClipboardIcon } from '@heroicons/react/24/outline'
+import toast from 'react-hot-toast/headless'
+
+type Properties = {
+	readonly name: string;
+	readonly value: string;
+	readonly isCopyable?: boolean;
+}
+
+export default function Attribute({ name, value, isCopyable }: Properties) {
+	const canCopy = isCopyable ?? false
+	return (
+		<dl className='flex gap-1 text-sm'>
+			<dt className='w-1/4 shrink-0 min-w-0 truncate text-gray-700 dark:text-gray-300'>
+				{name}
+			</dt>
+
+			{(canCopy ?? false) ? (
+				<button
+					type='button'
+					className='focus:outline-none flex items-center gap-x-1 truncate hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md'
+					onClick={async () => {
+						await navigator.clipboard.writeText(value)
+						toast(`Copied ${name}`)
+					}}
+				>
+					<dd className='min-w-0 truncate px-2 py-1'>
+						{value}
+					</dd>
+					<ClipboardIcon className='text-gray-600 dark:text-gray-200 pr-2 w-max h-4'/>
+				</button>
+			) : (
+				<dd className='min-w-0 truncate px-2 py-1'>
+					{value}
+				</dd>
+			)}
+		</dl>
+	)
+}

app/components/StatusCircle.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx'
+import { type HTMLProps } from 'react'
+
+type Properties = HTMLProps<SVGElement> & {
+	readonly isOnline: boolean;
+}
+
+// eslint-disable-next-line unicorn/no-keyword-prefix
+export default function StatusCircle({ isOnline, className }: Properties) {
+	return (
+		<svg
+			className={clsx(
+				className,
+				isOnline
+					? 'text-green-700 dark:text-green-400'
+					: 'text-gray-300 dark:text-gray-500'
+			)}
+			viewBox='0 0 24 24'
+			fill='currentColor'
+		>
+			<circle cx='12' cy='12' r='8'/>
+		</svg>
+	)
+}