3a86539537
- Added a new copy module to handle translations for models-related components. - Integrated translation functionality into ProviderPickerDialog, ProvidersSection, RequestContentDialog, UsageBarChart, and UsageHistorySection. - Updated messages for various UI elements to support multiple languages. - Refactored usage history functions to accept locale for date formatting. - Enhanced user experience by providing localized strings for success/error messages and UI labels.
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
type DialogSurfaceProps = {
|
|
open: boolean;
|
|
title: string;
|
|
subtitle?: string;
|
|
closeLabel?: string;
|
|
widthClassName?: string;
|
|
onClose: () => void;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export default function DialogSurface({
|
|
open,
|
|
title,
|
|
subtitle,
|
|
closeLabel = 'Close dialog',
|
|
widthClassName = 'max-w-[560px]',
|
|
onClose,
|
|
children,
|
|
}: DialogSurfaceProps) {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 px-4 py-6 backdrop-blur-[2px]"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className={[
|
|
'w-full rounded-[20px] bg-[#F4F3EB] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]',
|
|
widthClassName,
|
|
].join(' ')}
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<div className="flex items-start justify-between border-b border-black/6 px-6 py-5 dark:border-white/6">
|
|
<div className="min-w-0">
|
|
<h2
|
|
className="text-[20px] font-normal tracking-tight text-[#171717] dark:text-[#f3f4f6]"
|
|
style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
|
|
>
|
|
{title}
|
|
</h2>
|
|
{subtitle ? (
|
|
<p className="mt-1 text-[13px] text-[#99A0AE] dark:text-gray-500">
|
|
{subtitle}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
className="mt-0.5 rounded-full p-1 text-[#99A0AE] transition-colors hover:text-[#171717] dark:hover:text-[#f3f4f6]"
|
|
onClick={onClose}
|
|
aria-label={closeLabel}
|
|
>
|
|
<svg viewBox="0 0 24 24" className="h-5 w-5 fill-none stroke-current" strokeWidth="1.8">
|
|
<path d="M6 6L18 18M18 6L6 18" strokeLinecap="round" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="px-6 pb-6 pt-5">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|