UI Drawer

1"use client";
2 
3import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
4 
5export type DrawerState = "opened" | "closed";
6 
7export interface DrawerProps {
8  state?: DrawerState;
9  style?: DrawerStyle;
10  title?: string;
11  description?: string;
12  actionLabel?: string;
13  cancelLabel?: string;
14  theme?: Partial<RemocnTheme>;
15  className?: string;
16}
17 
18const DRAWER_HEIGHT = 320;
19const MAX_OVERLAY_ALPHA = 0.5;
20 
21export interface DrawerStyle {
22  overlayOpacity: number;
23  panelOpacity: number;
24  panelTranslateY: number;
25}
26 
27export interface DrawerStyleContext {
28  popoverBg: string;
29  popoverFg: string;
30  mutedFg: string;
31  border: string;
32  radius: number;
33  actionBg: string;
34  actionFg: string;
35  cancelFg: string;
36}
37 
38export function drawerStyleContext(theme: RemocnTheme): DrawerStyleContext {
39  return {
40    popoverBg: theme.popover,
41    popoverFg: theme.popoverForeground,
42    mutedFg: theme.mutedForeground,
43    border: theme.border,
44    radius: theme.radius,
45    actionBg: theme.primary,
46    actionFg: theme.primaryForeground,
47    cancelFg: theme.foreground,
48  };
49}
50 
51export function drawerStyle(
52  state: DrawerState,
53  _ctx: DrawerStyleContext,
54): DrawerStyle {
55  switch (state) {
56    case "opened":
57      return {
58        overlayOpacity: 1,
59        panelOpacity: 1,
60        panelTranslateY: 0,
61      };
62    default:
63      return {
64        overlayOpacity: 0,
65        panelOpacity: 0,
66        panelTranslateY: DRAWER_HEIGHT,
67      };
68  }
69}
70 
71export function Drawer({
72  state = "closed",
73  style,
74  title = "Edit profile",
75  description = "Make changes to your profile here. Click save when you're done.",
76  actionLabel = "Save changes",
77  cancelLabel = "Cancel",
78  theme: themeOverride,
79  className,
80}: DrawerProps) {
81  const theme = useRemocnTheme(themeOverride, "light");
82 
83  const ctx = drawerStyleContext(theme);
84  const v = style ?? drawerStyle(state, ctx);
85 
86  const buttonBase: React.CSSProperties = {
87    height: 40,
88    padding: "0 20px",
89    fontSize: 15,
90    fontWeight: 500,
91    letterSpacing: "-0.01em",
92    borderRadius: ctx.radius,
93    display: "inline-flex",
94    alignItems: "center",
95    justifyContent: "center",
96    cursor: "pointer",
97  };
98 
99  return (
100    <div
101      style={{
102        position: "absolute",
103        inset: 0,
104        fontFamily:
105          "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
106      }}
107    >
108      {}
109      <div
110        style={{
111          position: "absolute",
112          inset: 0,
113// … truncated