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>
77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
// fakemui/react/components/email/data-display/EmailHeader.tsx
|
|
import React, { forwardRef } from 'react'
|
|
import { Box, BoxProps, Typography } from '..'
|
|
import { useAccessible } from '../../../src/utils/useAccessible'
|
|
import { StarButton } from '../atoms'
|
|
|
|
export interface EmailHeaderProps extends BoxProps {
|
|
from: string
|
|
to: string[]
|
|
cc?: string[]
|
|
subject: string
|
|
receivedAt: number
|
|
isStarred?: boolean
|
|
onToggleStar?: (starred: boolean) => void
|
|
testId?: string
|
|
}
|
|
|
|
export const EmailHeader = forwardRef<HTMLDivElement, EmailHeaderProps>(
|
|
(
|
|
{
|
|
from,
|
|
to,
|
|
cc,
|
|
subject,
|
|
receivedAt,
|
|
isStarred = false,
|
|
onToggleStar,
|
|
testId: customTestId,
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const accessible = useAccessible({
|
|
feature: 'email',
|
|
component: 'email-header',
|
|
identifier: customTestId || subject
|
|
})
|
|
|
|
return (
|
|
<Box
|
|
ref={ref}
|
|
className="email-header"
|
|
{...accessible}
|
|
{...props}
|
|
>
|
|
<div className="header-top">
|
|
<Typography variant="h5" className="subject">
|
|
{subject}
|
|
</Typography>
|
|
<StarButton
|
|
isStarred={isStarred}
|
|
onToggleStar={onToggleStar}
|
|
/>
|
|
</div>
|
|
<div className="header-details">
|
|
<Typography variant="body2" className="from">
|
|
From: <strong>{from}</strong>
|
|
</Typography>
|
|
<Typography variant="body2" className="to">
|
|
To: <strong>{to.join(', ')}</strong>
|
|
</Typography>
|
|
{cc && cc.length > 0 && (
|
|
<Typography variant="body2" className="cc">
|
|
Cc: <strong>{cc.join(', ')}</strong>
|
|
</Typography>
|
|
)}
|
|
<Typography variant="caption" className="date">
|
|
{new Date(receivedAt).toLocaleString()}
|
|
</Typography>
|
|
</div>
|
|
</Box>
|
|
)
|
|
}
|
|
)
|
|
|
|
EmailHeader.displayName = 'EmailHeader'
|