Extract types, constants, helpers, and UI pieces (LoadingSkeleton, EmptyState, StatCard, ComplianceRing, Modal, TenantCard, CreateTenantModal, EditTenantModal, TenantDetailModal) into _components/ and _types.ts to bring page.tsx from 1663 LOC to 432 LOC (under the 500 hard cap). Behavior preserved. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { X } from 'lucide-react'
|
|
|
|
export function Modal({
|
|
open,
|
|
onClose,
|
|
title,
|
|
children,
|
|
maxWidth = 'max-w-lg',
|
|
}: {
|
|
open: boolean
|
|
onClose: () => void
|
|
title: string
|
|
children: React.ReactNode
|
|
maxWidth?: string
|
|
}) {
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
|
|
<div className={`relative bg-white rounded-2xl shadow-2xl w-full ${maxWidth} max-h-[90vh] overflow-y-auto`}>
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-200">
|
|
<h2 className="text-lg font-semibold text-slate-900">{title}</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
<div className="px-6 py-5">{children}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|