add fullscreen mode to realtime

apps/dashboard/src/components/fullscreen-toggle.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { cn } from '@/utils/cn';
+import { FullscreenIcon } from 'lucide-react';
+import { parseAsBoolean, useQueryState } from 'nuqs';
+
+import { Tooltiper } from './ui/tooltip';
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const useFullscreen = () =>
+  useQueryState(
+    'fullscreen',
+    parseAsBoolean.withDefault(false).withOptions({
+      history: 'push',
+      clearOnDefault: true,
+    })
+  );
+
+export const Fullscreen = (props: Props) => {
+  const [isFullscreen] = useFullscreen();
+  return (
+    <div
+      className={cn(
+        isFullscreen && 'fixed inset-0 z-50 overflow-auto bg-slate-100'
+      )}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export const FullscreenToggle = () => {
+  const [, setIsFullscreen] = useFullscreen();
+  return (
+    <Tooltiper content="Toggle fullscreen" asChild>
+      <button
+        className="flex items-center gap-2"
+        onClick={() => {
+          setIsFullscreen((p) => !p);
+        }}
+      >
+        <FullscreenIcon />
+        Realtime
+      </button>
+    </Tooltiper>
+  );
+};