Floating Panel

1import { FloatingPanel, FloatingPanelTrigger, FloatingPanelContent, FloatingPanelDragTrigger } from "@/components/ui/floating-panel";
2
3<FloatingPanel />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import {
5  FloatingPanel as ArkFloatingPanel,
6  useFloatingPanelContext,
7} from "@ark-ui/react/floating-panel";
8import { Portal } from "@ark-ui/react/portal";
9import { Maximize, MaximizeIcon, MinimizeIcon, MinusIcon } from "lucide-react";
10import type React from "react";
11import { cn } from "@/lib/utils";
12import { Button, type ButtonProps } from "@/registry/react/components/button";
13import { ScrollArea } from "@/registry/react/components/scroll-area";
14
15export const useFloatingPanel = useFloatingPanelContext;
16
17export const FloatingPanel = (
18  props: React.ComponentProps<typeof ArkFloatingPanel.Root>
19) => {
20  const { lazyMount = true, unmountOnExit = true, ...rest } = props;
21
22  return (
23    <ArkFloatingPanel.Root
24      data-slot="floating-panel"
25      lazyMount={lazyMount}
26      unmountOnExit={unmountOnExit}
27      {...rest}
28    />