Overhaul (#83)
* WIP Layout Refactor * New Connection Dialog * WIP form overhaul * Fix remaining config pages
This commit is contained in:
Sacha Weatherstone
@@ -1,48 +0,0 @@
|
||||
import { IconButton } from "@components/form/IconButton.js";
|
||||
import { Dialog as DialogUI } from "@headlessui/react";
|
||||
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import { ThemeController } from "@components/generic/ThemeController.js";
|
||||
import { Blur } from "@components/generic/Blur.js";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export interface DialogProps {
|
||||
title: string;
|
||||
description: string;
|
||||
isOpen: boolean;
|
||||
close: () => void;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const Dialog = ({
|
||||
title,
|
||||
description,
|
||||
isOpen,
|
||||
close,
|
||||
children
|
||||
}: DialogProps): JSX.Element => {
|
||||
return (
|
||||
<DialogUI open={isOpen} onClose={close}>
|
||||
<ThemeController>
|
||||
<Blur />
|
||||
<div className="fixed inset-0 flex items-center justify-center p-4">
|
||||
<DialogUI.Panel>
|
||||
<div className="flex bg-backgroundPrimary px-4 py-5 sm:px-6">
|
||||
<div>
|
||||
<h1 className="text-lg font-bold text-textPrimary">{title}</h1>
|
||||
<h5 className="text-sm text-textSecondary">{description}</h5>
|
||||
</div>
|
||||
<IconButton
|
||||
onClick={close}
|
||||
className="my-auto ml-auto"
|
||||
size="sm"
|
||||
icon={<XMarkIcon className="h-4" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-backgroundSecondary p-4">{children}</div>
|
||||
</DialogUI.Panel>
|
||||
</div>
|
||||
</ThemeController>
|
||||
</DialogUI>
|
||||
);
|
||||
};
|
||||
@@ -1,97 +0,0 @@
|
||||
import { Fragment } from "react";
|
||||
import { Mono } from "@components/generic/Mono";
|
||||
import { Tab } from "@headlessui/react";
|
||||
|
||||
export interface TabType {
|
||||
label: string;
|
||||
icon?: JSX.Element;
|
||||
element: () => JSX.Element;
|
||||
disabled?: boolean;
|
||||
disabledMessage?: string;
|
||||
disabledLink?: string;
|
||||
}
|
||||
|
||||
export interface TabbedCOntentAction {
|
||||
icon: JSX.Element;
|
||||
action: () => void;
|
||||
}
|
||||
|
||||
export interface TabbedContentProps {
|
||||
tabs: TabType[];
|
||||
actions?: TabbedCOntentAction[];
|
||||
}
|
||||
|
||||
export const TabbedContent = ({
|
||||
tabs,
|
||||
actions
|
||||
}: TabbedContentProps): JSX.Element => {
|
||||
return (
|
||||
<Tab.Group as="div" className="flex flex-grow flex-col">
|
||||
<Tab.List className="flex bg-backgroundPrimary">
|
||||
{tabs.map((entry, index) => (
|
||||
<Tab key={index} disabled={entry.disabled}>
|
||||
{({ selected }) => (
|
||||
<div
|
||||
className={`flex h-10 gap-3 truncate border-b-4 px-3 text-sm font-medium ${
|
||||
selected
|
||||
? "border-accent text-textPrimary"
|
||||
: "border-backgroundPrimary text-textSecondary hover:text-textPrimary"
|
||||
} ${
|
||||
entry.disabled
|
||||
? "cursor-not-allowed hover:text-textSecondary"
|
||||
: "cursor-pointer bg-backgroundPrimary hover:brightness-hover active:brightness-press"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{entry.icon && (
|
||||
<div className="text-slate-500 m-auto">{entry.icon}</div>
|
||||
)}
|
||||
<span className="m-auto">{entry.label}</span>
|
||||
</div>
|
||||
)}
|
||||
</Tab>
|
||||
))}
|
||||
<div className="ml-auto flex">
|
||||
{actions?.map((action, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="my-auto cursor-pointer bg-backgroundPrimary p-3 text-textSecondary hover:brightness-hover active:brightness-press"
|
||||
onClick={action.action}
|
||||
>
|
||||
{action.icon}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Tab.List>
|
||||
<Tab.Panels as={Fragment}>
|
||||
{tabs.map((entry, index) => (
|
||||
<Tab.Panel key={index} className="m-2 flex flex-grow">
|
||||
{!entry.disabled ? (
|
||||
<entry.element />
|
||||
) : (
|
||||
<div>
|
||||
<Mono>
|
||||
{entry.disabledMessage || "This tab is disabled"}.{" "}
|
||||
{entry.disabledLink && (
|
||||
<>
|
||||
Click{" "}
|
||||
<a
|
||||
className="underline"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href={entry.disabledLink}
|
||||
>
|
||||
here
|
||||
</a>{" "}
|
||||
for more information.
|
||||
</>
|
||||
)}
|
||||
</Mono>
|
||||
</div>
|
||||
)}
|
||||
</Tab.Panel>
|
||||
))}
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
);
|
||||
};
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ChevronUpIcon } from "@heroicons/react/24/outline";
|
||||
import { ChevronUpIcon } from "lucide-react";
|
||||
|
||||
export interface TableProps {
|
||||
headings: Heading[];
|
||||
@@ -28,7 +28,9 @@ export const Table = ({ headings, rows }: TableProps): JSX.Element => {
|
||||
>
|
||||
<div className="flex gap-2">
|
||||
{heading.title}
|
||||
{heading.sortable && <ChevronUpIcon className="my-auto h-3" />}
|
||||
{heading.sortable && (
|
||||
<ChevronUpIcon size={16} className="my-auto" />
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
import { Fragment } from "react";
|
||||
import { Mono } from "@components/generic/Mono";
|
||||
import { Tab } from "@headlessui/react";
|
||||
|
||||
export interface TabType {
|
||||
label: string;
|
||||
element: () => JSX.Element;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface TabbedContentProps {
|
||||
tabs: TabType[];
|
||||
}
|
||||
|
||||
export const VerticalTabbedContent = ({
|
||||
tabs
|
||||
}: TabbedContentProps): JSX.Element => {
|
||||
return (
|
||||
<Tab.Group as="div" className="flex w-full gap-3">
|
||||
<Tab.List className="flex w-44 flex-col">
|
||||
{tabs.map((tab, index) => (
|
||||
<Tab key={index} as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<div
|
||||
className={`flex cursor-pointer items-center border-l-4 p-4 text-sm font-medium ${
|
||||
selected
|
||||
? "border-accent bg-accentMuted bg-opacity-10 text-textPrimary"
|
||||
: "border-backgroundPrimary text-textSecondary"
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
<span className="ml-auto rounded-full bg-accent px-3 text-textPrimary">
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
<Tab.Panels as={Fragment}>
|
||||
{tabs.map((tab, index) => (
|
||||
<Tab.Panel key={index} as={Fragment}>
|
||||
<tab.element />
|
||||
</Tab.Panel>
|
||||
))}
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user