feat: begin support for components and dark mode
This commit is contained in:
Aarnav Tale
parent
abb957c573
commit
b5658750a9
25
app/components/Action.tsx
Normal file
25
app/components/Action.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
18
app/components/Card.tsx
Normal file
18
app/components/Card.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
9
app/components/Code.tsx
Normal file
9
app/components/Code.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
26
app/components/Input.tsx
Normal file
26
app/components/Input.tsx
Normal file
@ -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
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
37
app/components/TableList.tsx
Normal file
37
app/components/TableList.tsx
Normal file
@ -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 })
|
||||
@ -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 }) {
|
||||
<Meta/>
|
||||
<Links/>
|
||||
</head>
|
||||
<body className='overscroll-none'>
|
||||
<body className='overscroll-none dark:bg-zinc-900 dark:text-white'>
|
||||
{children}
|
||||
<Toaster/>
|
||||
<ScrollRestoration/>
|
||||
@ -87,9 +88,9 @@ export function ErrorBoundary() {
|
||||
<>
|
||||
<ExclamationTriangleIcon className='text-red-500 w-14 h-14'/>
|
||||
<h1 className='text-2xl font-bold'>Error</h1>
|
||||
<code className='bg-gray-100 p-1 rounded-md'>
|
||||
<Code>
|
||||
{message}
|
||||
</code>
|
||||
</Code>
|
||||
<p className='opacity-50 text-sm mt-4'>
|
||||
If you are the administrator of this site, please check your logs for information.
|
||||
</p>
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user