105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
/*
|
|
* Copyright (C) 2026 Fluxer Contributors
|
|
*
|
|
* This file is part of Fluxer.
|
|
*
|
|
* Fluxer is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Fluxer is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
/** @jsxRuntime automatic */
|
|
/** @jsxImportSource hono/jsx */
|
|
|
|
import type {PropsWithChildren, ReactNode} from 'hono/jsx';
|
|
|
|
export interface FormModalProps {
|
|
id: string;
|
|
title: string;
|
|
action: string;
|
|
method?: 'post' | 'get';
|
|
children: ReactNode;
|
|
submitText?: string;
|
|
cancelText?: string;
|
|
size?: 'small' | 'medium' | 'large';
|
|
footer?: ReactNode;
|
|
}
|
|
|
|
const sizeClasses = {
|
|
small: 'max-w-md',
|
|
medium: 'max-w-lg',
|
|
large: 'max-w-2xl',
|
|
};
|
|
|
|
export function FormModal({
|
|
id,
|
|
title,
|
|
action,
|
|
method = 'post',
|
|
children,
|
|
submitText = 'Submit',
|
|
cancelText = 'Cancel',
|
|
size = 'medium',
|
|
footer,
|
|
}: PropsWithChildren<FormModalProps>) {
|
|
const modalClass = sizeClasses[size];
|
|
const closeScript = `document.getElementById('${id}').classList.add('hidden')`;
|
|
|
|
return (
|
|
<div id={id} class="fixed inset-0 z-50 hidden overflow-y-auto">
|
|
<div class="flex min-h-screen items-center justify-center p-4">
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" onclick={closeScript} aria-hidden="true" />
|
|
|
|
<div class={`relative rounded-lg bg-white shadow-xl ${modalClass} w-full`}>
|
|
<div class="flex items-center justify-between border-neutral-200 border-b p-4">
|
|
<h2 class="font-semibold text-lg text-neutral-900">{title}</h2>
|
|
<button
|
|
type="button"
|
|
class="p-1 text-neutral-400 transition-colors hover:text-neutral-600"
|
|
onclick={closeScript}
|
|
aria-label="Close"
|
|
>
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form action={action} method={method}>
|
|
<div class="p-4">{children}</div>
|
|
|
|
<div class="flex items-center justify-end gap-3 rounded-b-lg border-neutral-200 border-t bg-neutral-50 p-4">
|
|
{footer || (
|
|
<>
|
|
<button
|
|
type="button"
|
|
class="rounded border border-neutral-300 bg-white px-4 py-2 font-medium text-neutral-700 text-sm transition-colors hover:bg-neutral-50"
|
|
onclick={closeScript}
|
|
>
|
|
{cancelText}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="rounded bg-neutral-900 px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-neutral-800"
|
|
>
|
|
{submitText}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|