feat: resizeable

2026-07-03 14:07:11 +02:00 · 2024-10-29 23:12:10 +08:00
parent 6a382045ae
commit a23383fe4d
9 changed files with 423 additions and 55 deletions
@@ -10,6 +10,7 @@
  },
  "dependencies": {
    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-select": "^2.1.2",
@@ -0,0 +1,48 @@
+import { GripVertical } from "lucide-react";
+import { ResizableHandle } from "@/components/ui/resizable";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
+interface CustomHandleProps {
+  withHandle?: boolean;
+  className?: string;
+}
+
+const CustomHandle = ({ withHandle = true, className }: CustomHandleProps) => {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <ResizableHandle
+      className={cn(
+        "relative w-1.5 transition-all duration-150",
+        isActive ? "bg-indigo-500" : className,
+        "hover:bg-indigo-500 hover:w-1.5"
+      )}
+      onMouseDown={() => setIsActive(true)}
+      onMouseUp={() => setIsActive(false)}
+      onTouchStart={() => setIsActive(true)}
+      onTouchEnd={() => setIsActive(false)}
+    >
+      {withHandle && (
+        <div
+          className={cn(
+            "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+            "w-6 h-8 rounded-sm flex items-center justify-center",
+            isActive ? "bg-indigo-500" : "bg-transparent",
+            "hover:bg-indigo-500 group"
+          )}
+        >
+          <GripVertical
+            className={cn(
+              "w-4 h-4",
+              isActive ? "text-white" : "text-gray-400",
+              "group-hover:text-white"
+            )}
+          />
+        </div>
+      )}
+    </ResizableHandle>
+  );
+};
+
+export default CustomHandle;
@@ -135,7 +135,7 @@ const MenuButton = ({
  );
 };

-const TextColorButton = ({ editor, tooltip }) => {
+const TextColorButton = ({ editor }) => {
  const [activeColor, setActiveColor] = React.useState<string | null>(null);

  React.useEffect(() => {
@@ -411,7 +411,8 @@ const RichTextEditor = ({
          ]
        )
      }
-    }
+    },
+    immediatelyRender: false
  });

  if (!editor) {
@@ -2,14 +2,21 @@

 import { useRef, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import { Eye, Edit2, Menu } from "lucide-react";
 import { useResumeStore } from "@/store/useResumeStore";
 import { EditorHeader } from "@/components/editor/EditorHeader";
 import { SidePanel } from "@/components/editor/SidePanel";
 import { EditPanel } from "@/components/editor/EditPanel";
 import { PreviewPanel } from "@/components/editor/PreviewPanel";
 import { getThemeConfig } from "@/theme/themeConfig";
-import { Eye, Edit2, Menu } from "lucide-react";
 import { useScrollbarTheme } from "@/hooks/useScrollBarTheme";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+} from "@/components/ui/resizable";
+import { cn } from "@/lib/utils";
+import CustomHandle from "./compoents/CustomHandle";

 export default function Home() {
  const theme = useResumeStore((state) => state.theme);
@@ -19,8 +26,11 @@ export default function Home() {
  // 移动端状态管理
  const [showSidebar, setShowSidebar] = useState(false);
  const [isPreviewMode, setIsPreviewMode] = useState(false);
+
  useScrollbarTheme();

+  const [defaultLayout] = useState([15, 40, 50]);
+
  // 移动端切换按钮
  const MobileNav = () => (
    <div className={`fixed bottom-6 right-6 flex gap-2 md:hidden z-50`}>
@@ -75,15 +85,41 @@ export default function Home() {
    >
      <EditorHeader previewRef={previewRef} isMobile={true} />

-      {/* 桌面端布局 */}
-      <div className="hidden md:flex h-[calc(100vh-4rem)]">
-        <SidePanel />
-        <EditPanel />
-        <PreviewPanel />
+      <div className="hidden md:block h-[calc(100vh-64px)] overflow-hidden">
+        {/* 桌面端布局 */}
+        <ResizablePanelGroup
+          direction="horizontal"
+          className="h-full  rounded-lg border"
+        >
+          <ResizablePanel
+            defaultSize={defaultLayout[0]}
+            minSize={15}
+            maxSize={30}
+          >
+            <div className="h-full overflow-y-auto">
+              <SidePanel />
+            </div>
+          </ResizablePanel>
+          <CustomHandle />
+          <ResizablePanel
+            minSize={20}
+            maxSize={30}
+            defaultSize={defaultLayout[1]}
+          >
+            <div className="h-full overflow-y-auto">
+              <EditPanel />
+            </div>
+          </ResizablePanel>
+          <CustomHandle />
+          <ResizablePanel defaultSize={defaultLayout[2]}>
+            <div className="h-full overflow-y-auto">
+              <PreviewPanel />
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
      </div>
-
      {/* 移动端布局 */}
-      <div className="md:hidden h-[calc(100vh-4rem)] overflow-hidden">
+      <div className="md:hidden h-[calc(100vh-64px)] overflow-hidden">
        <AnimatePresence mode="wait">
          {isPreviewMode ? (
            <motion.div
@@ -164,7 +164,7 @@ export function EditPanel() {
  return (
    <motion.div
      className={cn(
-        "w-full md:w-[640px] h-full border-r overflow-y-auto",
+        "w-full  h-full border-r overflow-y-auto",
        theme === "dark"
          ? "bg-neutral-950 border-neutral-800"
          : "bg-gray-50 border-gray-100"
@@ -10,6 +10,28 @@ import {
 import { ChevronDown, GripVertical, Trash2 } from "lucide-react";
 import { useState } from "react";
 import Field from "../Field";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from "@/components/ui/alert-dialog";
+
+interface Project {
+  id: string;
+  name: string;
+  role: string;
+  date: string;
+  description: string;
+  technologies: string;
+  responsibilities: string;
+  achievements: string;
+}

 interface ProjectEditorProps {
  project: Project;
@@ -18,6 +40,85 @@ interface ProjectEditorProps {
  onCancel: () => void;
 }

+interface DeleteConfirmDialogProps {
+  projectName: string;
+  onDelete: () => void;
+}
+
+const DeleteConfirmDialog: React.FC<DeleteConfirmDialogProps> = ({
+  projectName,
+  onDelete
+}) => {
+  const theme = useResumeStore((state) => state.theme);
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn(
+            "text-sm",
+            theme === "dark"
+              ? "hover:bg-red-900/50 text-red-400"
+              : "hover:bg-red-50 text-red-600"
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Trash2 className="w-4 h-4" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent
+        className={cn(
+          theme === "dark" ? "bg-neutral-900 border-neutral-800" : "bg-white"
+        )}
+        onClick={(e) => e.stopPropagation()} // 添加这行
+      >
+        <AlertDialogHeader>
+          <AlertDialogTitle
+            className={cn(
+              theme === "dark" ? "text-neutral-200" : "text-gray-900"
+            )}
+          >
+            确认删除项目
+          </AlertDialogTitle>
+          <AlertDialogDescription
+            className={cn(
+              theme === "dark" ? "text-neutral-400" : "text-gray-500"
+            )}
+          >
+            您确定要删除项目 {projectName} 吗？此操作无法撤销。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel
+            className={cn(
+              theme === "dark"
+                ? "bg-neutral-800 hover:bg-neutral-700 text-neutral-200 border-neutral-700"
+                : ""
+            )}
+          >
+            取消
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e: { preventDefault: () => void }) => {
+              e.preventDefault();
+              onDelete();
+            }}
+            className={cn(
+              theme === "dark"
+                ? "bg-red-600 hover:bg-red-700 text-white"
+                : "bg-red-600 hover:bg-red-700 text-white"
+            )}
+          >
+            删除
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
 const ProjectEditor: React.FC<ProjectEditorProps> = ({
  project,
  onSave,
@@ -86,23 +187,11 @@ const ProjectEditor: React.FC<ProjectEditorProps> = ({
  );
 };

-// ProjectEditor 组件用于编辑单个项目
-interface Project {
-  id: string;
-  name: string;
-  role: string;
-  date: string;
-  description: string;
-  technologies: string;
-  responsibilities: string;
-  achievements: string;
-}
-
 const ProjectItem = ({ project }: { project: Project }) => {
  const dragControls = useDragControls();
  const [expandedId, setExpandedId] = useState<string | null>(null);
-
  const { theme, updateProjects, deleteProject } = useResumeStore();
+
  return (
    <Reorder.Item
      id={project.id}
@@ -178,22 +267,13 @@ const ProjectItem = ({ project }: { project: Project }) => {
            </h3>
          </div>
          <div className="flex items-center gap-2 ml-4 shrink-0">
-            <Button
-              variant="ghost"
-              size="sm"
-              className={cn(
-                "text-sm",
-                theme === "dark"
-                  ? "hover:bg-red-900/50 text-red-400"
-                  : "hover:bg-red-50 text-red-600"
-              )}
-              onClick={(e) => {
-                e.stopPropagation();
+            <DeleteConfirmDialog
+              projectName={project.name}
+              onDelete={() => {
                deleteProject(project.id);
+                setExpandedId(null);
              }}
-            >
-              <Trash2 className="w-4 h-4" />
-            </Button>
+            />
            <motion.div
              initial={false}
              animate={{
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
@@ -1,11 +1,11 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"

-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"

 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
@@ -17,40 +17,40 @@ const buttonVariants = cva(
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
-      }
+        icon: "h-10 w-10",
+      },
    },
    defaultVariants: {
      variant: "default",
-      size: "default"
-    }
+      size: "default",
+    },
  }
-);
+)

 export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+  asChild?: boolean
 }

 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
+    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
-    );
+    )
  }
-);
-Button.displayName = "Button";
+)
+Button.displayName = "Button"

-export { Button, buttonVariants };
+export { Button, buttonVariants }
@@ -95,6 +95,9 @@ importers:
      '@radix-ui/react-accordion':
        specifier: ^1.2.1
        version: 1.2.1(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-alert-dialog':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)
      '@radix-ui/react-label':
        specifier: ^2.1.0
        version: 2.1.0(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)
@@ -1473,6 +1476,31 @@ packages:
      react-dom: 18.3.1(react@18.3.1)
    dev: false

+  /@radix-ui/react-alert-dialog@1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-eGSlLzPhKO+TErxkiGcCZGuvbVMnLA1MTnyBksGOeGRGkxHiiJUujsjmNTdWTm4iHVSRaUao9/4Ur671auMghQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.2)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.2)(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.2)(react@18.3.1)
+      '@types/react': 18.3.2
+      '@types/react-dom': 18.3.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
  /@radix-ui/react-arrow@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1):
    resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==}
    peerDependencies:
@@ -1596,6 +1624,39 @@ packages:
      react: 18.3.1
    dev: false

+  /@radix-ui/react-dialog@1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.2)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.2)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.2)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.2)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.2)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.2)(react@18.3.1)
+      '@types/react': 18.3.2
+      '@types/react-dom': 18.3.0
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.0(@types/react@18.3.2)(react@18.3.1)
+    dev: false
+
  /@radix-ui/react-direction@1.1.0(@types/react@18.3.2)(react@18.3.1):
    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
    peerDependencies: