feat: draggable error section

Author: brettkolodny

src/Preview.tsx

@@ -1,11 +1,29 @@
 import { Button } from "@/components/Button";
-import { ResizablePanel } from "@/components/Resizable";
+import {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+} from "@/components/Resizable";
 import { ActivityIcon, ExternalLinkIcon } from "lucide-react";
-import type { FC } from "react";
+import { useRef, useState, type FC } from "react";
+import type { ImperativePanelHandle } from "react-resizable-panels";
 
 export const Preview: FC = () => {
+	const errorPanelRef = useRef<ImperativePanelHandle>(null);
+	const onCollapseError = () => {
+		errorPanelRef.current?.collapse();
+	};
+	const [overlayOpacity, setOverlayOpacity] = useState(() => 50);
+
 	return (
-		<ResizablePanel className="flex flex-col items-start gap-6 p-8">
+		<ResizablePanel className="relative flex flex-col items-start gap-6 p-8">
+			<div
+				className="pointer-events-none absolute top-0 left-0 h-full w-full bg-black"
+				style={{ opacity: overlayOpacity / 100 }}
+			>
+				{/* OVERLAY */}
+			</div>
+
 			<div className="flex w-full items-center justify-between">
 				<p className="font-semibold text-3xl text-content-primary">
 					Parameters
@@ -16,7 +34,11 @@ export const Preview: FC = () => {
 			<div className="flex h-full w-full items-center justify-center rounded-xl border p-4">
 				<div className="flex flex-col items-center justify-center gap-3">
 					<div className="flex items-center justify-center rounded-[6px] bg-highlight-sky p-2">
-						<ActivityIcon className="text-content-invert" width={24} height={24} />
+						<ActivityIcon
+							className="text-content-invert"
+							width={24}
+							height={24}
+						/>
 					</div>
 
 					<div className="flex flex-col items-center gap-2">
@@ -33,14 +55,37 @@ export const Preview: FC = () => {
 							href="#todo"
 							className="flex items-center gap-0.5 text-content-link text-sm"
 						>
-							Read the docs{" "}
+							Read the docs
 							<span className="inline">
 								<ExternalLinkIcon width={16} />
 							</span>
 						</a>
 					</div>
 				</div>
 			</div>
+
+			<ResizablePanelGroup
+				direction="vertical"
+				className="pointer-events-none absolute top-0 left-0"
+			>
+				<ResizablePanel aria-hidden className="pointer-events-none">
+					{/* EMPTY */}
+				</ResizablePanel>
+				<ResizableHandle
+					onClick={onCollapseError}
+					className="flex h-4 min-h-4 w-full items-center justify-center rounded-t-xl bg-[#AA5253]"
+					withHandle={true}
+				/>
+				<ResizablePanel
+					ref={errorPanelRef}
+					className="bg-surface-secondary"
+					collapsible={true}
+					collapsedSize={0}
+					onResize={(size) => {
+						setOverlayOpacity(() => size);
+					}}
+				></ResizablePanel>
+			</ResizablePanelGroup>
 		</ResizablePanel>
 	);
 };

src/components/Resizable.tsx

@@ -33,8 +33,8 @@ const ResizableHandle = ({
     {...props}
   >
     {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm">
+        <GripVertical className="h-3 w-3" />
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>