52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
'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 && 'bg-def-200 fixed inset-0 z-50 overflow-auto'
|
|
)}
|
|
>
|
|
{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>
|
|
);
|
|
};
|