Lucas Berger
982438dc10
Mechanical reformat — no logic changes. 398 files changed, 19125 insertions(+), 16457 deletions(-). Prettier 3.8.4 with .prettierrc (singleQuote:true, semi:true, tabWidth:2, trailingComma:all, printWidth:100). Isolated per D-13-08 for reviewability.
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
/**
|
|
* EmptyState — shown when a calendar fetch succeeds but returns zero events.
|
|
*
|
|
* UI-SPEC §EmptyState:
|
|
* - Centered in the calendar viewport
|
|
* - Icon: lucide-react CalendarDays (32px, --color-text-muted)
|
|
* - Heading: "Nothing here"
|
|
* - Body: "No events in this period. Try a different date or switch views."
|
|
*
|
|
* Only rendered when fetch succeeded AND zero events in the visible window.
|
|
*/
|
|
|
|
import { CalendarDays } from 'lucide-react';
|
|
|
|
export function EmptyState() {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: 'var(--space-12)',
|
|
gap: 'var(--space-4)',
|
|
fontFamily: 'var(--font-family-base)',
|
|
textAlign: 'center',
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<CalendarDays size={32} style={{ color: 'var(--color-text-muted)' }} aria-hidden="true" />
|
|
<div>
|
|
<h2
|
|
style={{
|
|
margin: '0 0 var(--space-2)',
|
|
fontSize: 'var(--text-heading-size)',
|
|
fontWeight: 'var(--text-heading-weight)',
|
|
lineHeight: 'var(--text-heading-line-height)',
|
|
color: 'var(--color-text-primary)',
|
|
}}
|
|
>
|
|
Nothing here
|
|
</h2>
|
|
<p
|
|
style={{
|
|
margin: 0,
|
|
fontSize: 'var(--text-body-size)',
|
|
fontWeight: 'var(--text-body-weight)',
|
|
lineHeight: 'var(--text-body-line-height)',
|
|
color: 'var(--color-text-muted)',
|
|
maxWidth: '280px',
|
|
}}
|
|
>
|
|
No events in this period. Try a different date or switch views.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|