1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
import {
Button,
Column,
type ColumnProps,
Heading,
Icon,
Row,
Tooltip,
TooltipTrigger,
} from '@umami/react-zen';
import { useState } from 'react';
import { useMessages } from '@/components/hooks';
import { Maximize, X } from '@/components/icons';
export interface PanelProps extends ColumnProps {
title?: string;
allowFullscreen?: boolean;
}
const fullscreenStyles = {
position: 'fixed',
width: '100%',
height: '100%',
top: 0,
left: 0,
border: 'none',
zIndex: 9999,
} as any;
export function Panel({ title, allowFullscreen, style, children, ...props }: PanelProps) {
const { formatMessage, labels } = useMessages();
const [isFullscreen, setIsFullscreen] = useState(false);
const handleFullscreen = () => {
setIsFullscreen(!isFullscreen);
};
return (
<Column
paddingY="6"
paddingX={{ xs: '3', md: '6' }}
border
borderRadius="3"
backgroundColor
position="relative"
gap
{...props}
style={{ ...style, ...(isFullscreen ? fullscreenStyles : {}) }}
>
{title && <Heading>{title}</Heading>}
{allowFullscreen && (
<Row justifyContent="flex-end" alignItems="center">
<TooltipTrigger delay={0} isDisabled={isFullscreen}>
<Button size="sm" variant="quiet" onPress={handleFullscreen}>
<Icon>{isFullscreen ? <X /> : <Maximize />}</Icon>
</Button>
<Tooltip>{formatMessage(labels.maximize)}</Tooltip>
</TooltipTrigger>
</Row>
)}
{children}
</Column>
);
}
|