Added example to ui

measuredco · Nov 11, 2024 · c0d8607 · c0d8607
1 parent 5c1e30b
commit c0d8607
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/apps/demo/app/custom-ui/[...puckPath]/client.tsx b/apps/demo/app/custom-ui/[...puckPath]/client.tsx
@@ -10,7 +10,7 @@ import { Drawer } from "@/core/components/Drawer";
 import { ChevronUp, ChevronDown, Globe, Lock, Unlock } from "lucide-react";
 
 const CustomHeader = ({ onPublish }: { onPublish: (data: Data) => void }) => {
-  const { appState, dispatch, isInteractive } = usePuck();
+  const { appState, dispatch, isInteractive, setIsInteractive } = usePuck();
 
   return (
     <header
@@ -29,7 +29,7 @@ const CustomHeader = ({ onPublish }: { onPublish: (data: Data) => void }) => {
       <span style={{ fontWeight: 600 }}>Custom UI example </span>
       <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
         <div style={{ gap: 8, display: 'flex' }}>
-          <Button>
+          <Button onClick={() => setIsInteractive(!isInteractive)}>
             Switch to {isInteractive ? 'editing' : 'interactive'} mode
           </Button>
           <Button

diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx
@@ -108,8 +108,6 @@ export const DraggableComponent = ({
     item: selectedItem,
   });
 
-  console.log(getClassName({ "contents": true, isInteractive: true }))
-
   return (
     <El
       key={id}
@@ -135,7 +133,7 @@ export const DraggableComponent = ({
           style={{
             ...style,
             ...provided.draggableProps.style,
-            cursor: isInteractive || isModifierHeld || isDragDisabled ? "pointer" : "grab",
+            cursor: isInteractive || isModifierHeld || isDragDisabled ? "default" : "grab",
           }}
           onMouseOver={onMouseOver}
           onMouseOut={onMouseOut}
@@ -179,8 +177,7 @@ export const DraggableComponent = ({
               </div>
             </div>
           )}
-          {/* style={{ ...(isInteractive && { cursor: 'default', background: 'transparent' }) }}  */}
-          {/* style={{ ...(isInteractive && { pointerEvents: 'auto' }) }} */}
+
           <div className={getClassName("overlay")} />
           <div className={getClassName("contents")} > {children}</div>
         </div>