Revert "feat: Add animated code panel collapse"

This reverts commit 70a8d70214.
This commit is contained in:
Sahaj Jain
2025-04-11 23:49:44 +05:30
parent 4624181070
commit e97984d94a
+13 -29
View File
@@ -1,4 +1,4 @@
import React, { useState, useRef, useEffect } from "react";
import React, { useState } from "react";
import {
ResizablePanelGroup,
ResizablePanel,
@@ -10,7 +10,6 @@ import { ThemeStyles } from "@/types/theme";
import CodePanel from "./code-panel";
import { Sliders } from "lucide-react";
import { useEditorStore } from "@/store/editor-store";
import { motion, AnimatePresence } from "motion/react";
interface EditorProps {
config: EditorConfig;
@@ -26,11 +25,6 @@ const Editor: React.FC<EditorProps> = ({ config }) => {
const Controls = config.controls;
const Preview = config.preview;
const [isCodePanelOpen, setIsCodePanelOpen] = useState(true);
const isFirstMount = useRef(true);
useEffect(() => {
isFirstMount.current = false;
}, []);
const handleStyleChange = (newStyles: ThemeStyles) => {
setThemeState({ ...themeState, styles: newStyles });
@@ -68,28 +62,18 @@ const Editor: React.FC<EditorProps> = ({ config }) => {
</div>
</div>
</ResizablePanel>
<AnimatePresence>
{isCodePanelOpen && (
<>
<ResizableHandle />
<motion.div
initial={isFirstMount.current ? false : { width: 0, opacity: 0 }}
animate={{ width: "25%", opacity: 1 }}
exit={{ width: 0, opacity: 0 }}
transition={{ duration: 0.2, ease: "easeInOut" }}
className="overflow-hidden"
>
<ResizablePanel defaultSize={25} minSize={10}>
<CodePanel
config={config}
themeEditorState={themeState}
onCodePanelToggle={() => setIsCodePanelOpen(!isCodePanelOpen)}
/>
</ResizablePanel>
</motion.div>
</>
)}
</AnimatePresence>
{isCodePanelOpen && (
<>
<ResizableHandle />
<ResizablePanel defaultSize={25} minSize={10}>
<CodePanel
config={config}
themeEditorState={themeState}
onCodePanelToggle={() => setIsCodePanelOpen(!isCodePanelOpen)}
/>
</ResizablePanel>
</>
)}
</ResizablePanelGroup>
</div>