Benjamin Sutter
9a2476c58a
Add PageHeader, UserMenu, NotificationButton, OrganizationContextBadge, RightContextPanel, CompareTray, and ActivityTimeline; wire all into AppShell. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { useState } from 'react'
|
|
import { Badge, IconButton, Popover, Typography } from '@mui/material'
|
|
import { Bell } from 'lucide-react'
|
|
|
|
export function NotificationButton() {
|
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
|
|
|
function handleOpen(e: React.MouseEvent<HTMLElement>) {
|
|
setAnchorEl(e.currentTarget)
|
|
}
|
|
|
|
function handleClose() {
|
|
setAnchorEl(null)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<IconButton size="small" sx={{ color: '#64748b' }} onClick={handleOpen}>
|
|
<Badge badgeContent={0} color="error">
|
|
<Bell size={20} />
|
|
</Badge>
|
|
</IconButton>
|
|
|
|
<Popover
|
|
open={!!anchorEl}
|
|
anchorEl={anchorEl}
|
|
onClose={handleClose}
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
|
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
slotProps={{ paper: { sx: { width: 280, p: 2 } } }}
|
|
>
|
|
<Typography variant="subtitle2" sx={{ mb: 1 }}>Benachrichtigungen</Typography>
|
|
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
|
Keine neuen Benachrichtigungen
|
|
</Typography>
|
|
</Popover>
|
|
</>
|
|
)
|
|
}
|