mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
johndoe6345789
89f83a7476
- Email components (Phase 2 COMPLETE): * Fixed 18 broken imports: @metabuilder/fakemui/hooks → ../../../src/utils/useAccessible * Renamed email-wip/ → email/ (production-ready) * Enabled exports in react/components/index.ts * All 22 email components now production-ready (1244 lines) - Cleanup: * Removed wip/ directory (duplicate of src/utils/accessibility) * Preserved 15 Python/PyQt6 implementation files (full implementations, not stubs) * Moved 7 markdown files to fakemui/docs/ (better organization) - Documentation: * Updated CLAUDE.md: Phase 2 email complete, added deletion safety gotcha * Created plan: txt/FAKEMUI_REORGANIZATION_PLAN_2026-02-01.txt Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
// fakemui/react/components/email/layout/MailboxLayout.tsx
|
|
import React, { forwardRef } from 'react'
|
|
import { Box, BoxProps, AppBar, Toolbar } from '..'
|
|
import { useAccessible } from '../../../src/utils/useAccessible'
|
|
|
|
export interface MailboxLayoutProps extends BoxProps {
|
|
sidebar: React.ReactNode
|
|
main: React.ReactNode
|
|
detail?: React.ReactNode
|
|
header?: React.ReactNode
|
|
testId?: string
|
|
}
|
|
|
|
export const MailboxLayout = forwardRef<HTMLDivElement, MailboxLayoutProps>(
|
|
({ sidebar, main, detail, header, testId: customTestId, ...props }, ref) => {
|
|
const accessible = useAccessible({
|
|
feature: 'email',
|
|
component: 'mailbox-layout',
|
|
identifier: customTestId || 'mailbox'
|
|
})
|
|
|
|
return (
|
|
<Box
|
|
ref={ref}
|
|
className="mailbox-layout"
|
|
{...accessible}
|
|
{...props}
|
|
>
|
|
{header && (
|
|
<AppBar position="static" className="mailbox-header">
|
|
<Toolbar>{header}</Toolbar>
|
|
</AppBar>
|
|
)}
|
|
<Box className="mailbox-content">
|
|
<aside className="mailbox-sidebar">{sidebar}</aside>
|
|
<main className="mailbox-main">{main}</main>
|
|
{detail && <article className="mailbox-detail">{detail}</article>}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
)
|
|
|
|
MailboxLayout.displayName = 'MailboxLayout'
|