1 files changed, 64 insertions, 0 deletions
diff --git a/src/components/common/Panel.tsx b/src/components/common/Panel.tsx
new file mode 100644
index 0000000..bb66746
--- /dev/null
+++ b/src/components/common/Panel.tsx
@@ -0,0 +1,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>
+  );
+}