Frame

1import { Frame, FramePanel, FrameHeader, FrameTitle } from "@/components/ui/frame";
2
3<Frame />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import type * as React from "react";
5import { cn } from "@/lib/utils";
6
7export const Frame = (props: React.ComponentProps<typeof ark.div>) => {
8  const { className, ...rest } = props;
9
10  return (
11    <ark.div
12      className={cn(
13        "relative",
14        "p-1",
15        "flex flex-col",
16        "bg-muted/72",
17        "rounded-2xl",
18        "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1",
19        className
20      )}
21      data-slot="frame"
22      {...rest}
23    />
24  );
25};
26
27export const FramePanel = (props: React.ComponentProps<typeof ark.div>) => {
28  const { className, ...rest } = props;