29 lines
1.3 KiB
TypeScript
29 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useRef } from 'react';
|
|
|
|
export function CommunityDialog({ title, busy, onClose, children }: {
|
|
title: string; busy: boolean; onClose: () => void; children: React.ReactNode;
|
|
}) {
|
|
const ref = useRef<HTMLDialogElement>(null);
|
|
useEffect(() => {
|
|
const dialog = ref.current;
|
|
dialog?.showModal();
|
|
return () => dialog?.close();
|
|
}, []);
|
|
return (
|
|
<dialog ref={ref} aria-label={title} onCancel={(event) => {
|
|
event.preventDefault();
|
|
if (!busy) onClose();
|
|
}} className="w-[calc(100%_-_2rem)] max-w-lg rounded-2xl border border-brand-border bg-brand-card p-6 text-on-surface backdrop:bg-black/80">
|
|
<h2 className="font-headline text-xl font-bold mb-4">{title}</h2>
|
|
{children}
|
|
<button type="button" disabled={busy} onClick={onClose}
|
|
className="mt-4 px-4 py-2 rounded-lg border border-brand-border disabled:opacity-50">Cancel</button>
|
|
</dialog>
|
|
);
|
|
}
|
|
|
|
export const communityInput = 'w-full rounded-lg border border-brand-border bg-brand-bg px-3 py-2 text-on-surface focus:outline-none focus:border-brand-cyan';
|
|
export const communityButton = 'rounded-lg border border-brand-border px-4 py-2 text-sm hover:border-brand-cyan focus-visible:outline focus-visible:outline-brand-cyan disabled:opacity-50 disabled:cursor-not-allowed';
|