Right Dock

pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/right-dock.json

import { forwardRef } from "react";

import type { ReactNode } from "react";

import { cn } from "../../lib/utils";

export type RightDockProps = React.ComponentPropsWithoutRef<"aside"> & {
  footer?: ReactNode;
  header?: ReactNode;
  title?: ReactNode;
};

const RightDock = forwardRef<HTMLElement, RightDockProps>(
  ({ children, className, footer, header, title, ...props }, ref) => (
    <aside
      className={cn(
        "flex h-full min-w-[18rem] max-w-[24rem] shrink-0 flex-col border-l border-border bg-background",
        className,
      )}
      ref={ref}
      {...props}
    >
      {header || title ? (
        <div className="border-b border-border/60 px-4 py-3">
          {title ? (
            <div className="text-sm font-medium text-foreground">{title}</div>
          ) : null}
          {header ? <div className="mt-2">{header}</div> : null}
        </div>
      ) : null}
      <div className="flex-1 overflow-auto p-4">{children}</div>
      {footer ? (
        <div className="border-t border-border/60 p-4">{footer}</div>
      ) : null}
    </aside>
  ),
);

RightDock.displayName = "RightDock";

export { RightDock };