Preview Rail

1"use client";
2// beui.dev/components/motion/preview-rail
3 
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { useId, useState, type ReactNode } from "react";
6import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
7import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
8import { cn } from "@/lib/utils";
9 
10export interface PreviewRailItem {
11  id: string;
12  label: string;
13  ariaLabel?: string;
14  description?: ReactNode;
15  href?: string;
16  target?: "_blank" | "_self" | "_parent" | "_top";
17  rel?: string;
18}
19 
20export interface PreviewRailProps {
21  items: PreviewRailItem[];
22  label?: string;
23  orientation?: "vertical" | "horizontal";
24  activeId?: string;
25  defaultActiveId?: string;
26  onActiveChange?: (id: string) => void;
27  onItemSelect?: (item: PreviewRailItem) => void;
28  renderPreview?: (item: PreviewRailItem) => ReactNode;
29  showPreview?: boolean;
30  previewSide?: "before" | "after";
31  highlightActive?: boolean;
32  itemSize?: number;
33  children?: ReactNode;
34  className?: string;
35  railClassName?: string;
36  previewContainerClassName?: string;
37  previewClassName?: string;
38}
39 
40function DefaultPreview({ item }: { item: PreviewRailItem }) {
41  return (
42    <div
43      data-slot="preview-rail-card"
44      className="rounded-2xl border border-border bg-card p-4 shadow-sm"
45    >
46      <p
47        data-slot="preview-rail-title"
48        className="font-medium text-card-foreground"
49      >
50        {item.label}
51      </p>
52      {item.description ? (
53        <div
54          data-slot="preview-rail-description"
55          className="mt-1 text-sm leading-6 text-muted-foreground"
56        >
57          {item.description}
58        </div>
59      ) : null}
60    </div>
61  );
62}
63 
64export function PreviewRail({
65  items,
66  label = "Section navigation",
67  orientation = "vertical",
68  activeId,
69  defaultActiveId,
70  onActiveChange,
71  onItemSelect,
72  renderPreview,
73  showPreview = true,
74  previewSide = "after",
75  highlightActive = false,
76  itemSize = 24,
77  children,
78  className,
79  railClassName,
80  previewContainerClassName,
81  previewClassName,
82}: PreviewRailProps) {
83  const uid = useId();
84  const reduce = useReducedMotion();
85  const canHover = useHoverCapable();
86  const [internalActiveId, setInternalActiveId] = useState(
87    defaultActiveId ?? items[0]?.id ?? "",
88  );
89  const [hoveredId, setHoveredId] = useState<string | null>(null);
90  const [focusedId, setFocusedId] = useState<string | null>(null);
91 
92  const requestedActiveId = activeId ?? internalActiveId;
93// … truncated