From b5658750a9d748cecfd941542901651f94189cd1 Mon Sep 17 00:00:00 2001 From: Aarnav Tale Date: Fri, 29 Mar 2024 15:41:10 -0400 Subject: [PATCH] feat: begin support for components and dark mode --- app/components/Action.tsx | 25 +++++++++ app/components/Card.tsx | 18 +++++++ app/components/Code.tsx | 9 ++++ app/components/Input.tsx | 26 ++++++++++ app/components/TableList.tsx | 37 +++++++++++++ app/root.tsx | 7 +-- app/routes/_data.dns._index/domains.tsx | 57 +++++++++----------- app/routes/_data.dns._index/rename.tsx | 21 ++++---- app/routes/_data.dns._index/route.tsx | 69 ++++++++++++------------- app/routes/_data.machines.$id.tsx | 5 +- app/routes/_data.users._index.tsx | 5 +- app/routes/login.tsx | 5 +- 12 files changed, 195 insertions(+), 89 deletions(-) create mode 100644 app/components/Action.tsx create mode 100644 app/components/Card.tsx create mode 100644 app/components/Code.tsx create mode 100644 app/components/Input.tsx create mode 100644 app/components/TableList.tsx diff --git a/app/components/Action.tsx b/app/components/Action.tsx new file mode 100644 index 0000000..218302c --- /dev/null +++ b/app/components/Action.tsx @@ -0,0 +1,25 @@ +import clsx from 'clsx' +import { type HTMLProps } from 'react' + +type Properties = HTMLProps & { + readonly isDestructive?: boolean; + readonly isDisabled?: boolean; +} + +export default function Action(properties: Properties) { + return ( + + ) +} diff --git a/app/components/Card.tsx b/app/components/Card.tsx new file mode 100644 index 0000000..080ac49 --- /dev/null +++ b/app/components/Card.tsx @@ -0,0 +1,18 @@ +import clsx from 'clsx' +import { type HTMLProps } from 'react' + +type Properties = HTMLProps + +export default function Card(properties: Properties) { + return ( +
+ {properties.children} +
+ ) +} diff --git a/app/components/Code.tsx b/app/components/Code.tsx new file mode 100644 index 0000000..80275bf --- /dev/null +++ b/app/components/Code.tsx @@ -0,0 +1,9 @@ +import { type ReactNode } from 'react' + +export default function Code({ children }: { readonly children: ReactNode }) { + return ( + + {children} + + ) +} diff --git a/app/components/Input.tsx b/app/components/Input.tsx new file mode 100644 index 0000000..21e26d1 --- /dev/null +++ b/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, HTMLInputElement> + +export default function Input(properties: Properties) { + return ( + + ) +} diff --git a/app/components/TableList.tsx b/app/components/TableList.tsx new file mode 100644 index 0000000..c6f4d55 --- /dev/null +++ b/app/components/TableList.tsx @@ -0,0 +1,37 @@ +import clsx from 'clsx' +import { type HTMLProps } from 'react' + +function TableList(properties: HTMLProps) { + return ( +
+ {properties.children} +
+ ) +} + +function Item(properties: HTMLProps) { + return ( +
+ {properties.children} +
+ ) +} + +export default Object.assign(TableList, { Item }) diff --git a/app/root.tsx b/app/root.tsx index fdabc2e..5fc53a3 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -11,6 +11,7 @@ import { } from '@remix-run/react' import clsx from 'clsx' +import Code from '~/components/Code' import Toaster from '~/components/Toaster' import stylesheet from '~/tailwind.css?url' import { getContext } from '~/utils/config' @@ -56,7 +57,7 @@ export function Layout({ children }: { readonly children: React.ReactNode }) { - + {children} @@ -87,9 +88,9 @@ export function ErrorBoundary() { <>

Error

- + {message} - +

If you are the administrator of this site, please check your logs for information.

diff --git a/app/routes/_data.dns._index/domains.tsx b/app/routes/_data.dns._index/domains.tsx index 1ada78d..a0a0146 100644 --- a/app/routes/_data.dns._index/domains.tsx +++ b/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) { } }} > -
+ {baseDomain ? ( -
+

{baseDomain}

-
+ + ) : undefined} : undefined} -
- + { setNewDomain(event.target.value) }} /> - -
-
+ + + ) @@ -188,9 +177,9 @@ function Domain({ domain, id, localDomains, isDrag }: DomainProperties) { {domain}

{isDrag ? undefined : ( - + )} ) diff --git a/app/routes/_data.dns._index/rename.tsx b/app/routes/_data.dns._index/rename.tsx index 9352e7c..cf79efb 100644 --- a/app/routes/_data.dns._index/rename.tsx +++ b/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 {' '} - + [device].[user].{name} - + {' '} when Magic DNS is enabled.

- { @@ -65,9 +66,9 @@ export default function Modal({ name }: Properties) { of unexpected behavior and may break existing devices in your tailnet. - { setNewName(event.target.value) diff --git a/app/routes/_data.dns._index/route.tsx b/app/routes/_data.dns._index/route.tsx index 3db80c8..94a6ead 100644 --- a/app/routes/_data.dns._index/route.tsx +++ b/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() { -
+ {data.nameservers.map((ns, index) => ( -
+ // eslint-disable-next-line react/no-array-index-key +

{ns}

- -
+ + ))} -
- + { setNs(event.target.value) }} /> - -
-
+ + + {/* TODO: Split DNS and Custom A Records */} @@ -159,9 +156,9 @@ export default function Page() { Automaticall register domain names for each device on the tailnet. Devices will be accessible at {' '} - + [device].[user].{data.baseDomain} - + {' '} when Magic DNS is enabled.

diff --git a/app/routes/_data.machines.$id.tsx b/app/routes/_data.machines.$id.tsx index 13dc219..ade2c91 100644 --- a/app/routes/_data.machines.$id.tsx +++ b/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() { -
+ @@ -68,7 +69,7 @@ export default function Page() { name='Domain' value={`${data.givenName}.${data.user.name}.ts.net`} /> -
+ ) } diff --git a/app/routes/_data.users._index.tsx b/app/routes/_data.users._index.tsx index 7850898..8f77f2e 100644 --- a/app/routes/_data.users._index.tsx +++ b/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 (
{data.map(user => ( -
+
@@ -59,7 +60,7 @@ export default function Page() {
))}
-
+ ))} ) diff --git a/app/routes/login.tsx b/app/routes/login.tsx index c57cab8..5ac5919 100644 --- a/app/routes/login.tsx +++ b/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 {' '} - + headscale apikeys create - + {' '} in your terminal.