canvas (3/3)

3 files changed, 46 insertions, 44 deletions

diff --git a/apps/web/components/canvas/draggableComponent.tsx b/apps/web/components/canvas/draggableComponent.tsx
index 8c39c732..cc31246e 100644
--- a/apps/web/components/canvas/draggableComponent.tsx
+++ b/apps/web/components/canvas/draggableComponent.tsx
@@ -1,25 +1,19 @@
 import Image from "next/image";
 import { useRef, useState } from "react";
-
-interface DraggableComponentsProps {
-  content: string;
-  extraInfo?: string;
-  iconAlt: string;
-}
+import {motion} from "framer-motion"
 
 export default function DraggableComponentsContainer({
   content,
 }: {
-  content: DraggableComponentsProps[];
+  content: {context:string}[] | undefined;
 }) {
+  if (content === undefined) return null;
   return (
     <div className="flex flex-col gap-10">
       {content.map((i) => {
         return (
           <DraggableComponents
-            content={i.content}
-            iconAlt={i.iconAlt}
-            extraInfo={i.extraInfo}
+            content={i.context}
           />
         );
       })}
@@ -29,9 +23,7 @@ export default function DraggableComponentsContainer({
 
 function DraggableComponents({
   content,
-  extraInfo,
-  iconAlt,
-}: DraggableComponentsProps) {
+}: {content: string}) {
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -49,19 +41,21 @@ function DraggableComponents({
   };
 
   return (
-    <div
+    <motion.div
+      initial={{opacity: 0, y: 5}}
+      animate={{opacity: 1, y: 0}}
       ref={containerRef}
       onDragEnd={handleDragEnd}
       onDragStart={handleDragStart}
       draggable
-      className={`flex gap-4 px-1 rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
+      className={`flex gap-4 px-3 overflow-hidden rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
     >
       <div className="flex flex-col gap-2">
         <div>
           <h1 className="line-clamp-3">{content}</h1>
         </div>
-        <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p>
+        {/* <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p> */}
       </div>
-    </div>
+    </motion.div>
   );
 }
diff --git a/apps/web/components/canvas/resizableLayout.tsx b/apps/web/components/canvas/resizableLayout.tsx
index 5ba6780b..5f88de55 100644
--- a/apps/web/components/canvas/resizableLayout.tsx
+++ b/apps/web/components/canvas/resizableLayout.tsx
@@ -13,12 +13,18 @@ interface RectContextType {
   setFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
   visible: boolean;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  id: string
+  id: string;
 }
 
 const RectContext = createContext<RectContextType | undefined>(undefined);
 
-export const RectProvider = ({ id, children }: {id: string, children: React.ReactNode}) => {
+export const RectProvider = ({
+  id,
+  children,
+}: {
+  id: string;
+  children: React.ReactNode;
+}) => {
   const [fullScreen, setFullScreen] = useState(false);
   const [visible, setVisible] = useState(true);
 
@@ -36,12 +42,11 @@ export const RectProvider = ({ id, children }: {id: string, children: React.Reac
 export const useRect = () => {
   const context = useContext(RectContext);
   if (context === undefined) {
-    throw new Error('useRect must be used within a RectProvider');
+    throw new Error("useRect must be used within a RectProvider");
   }
   return context;
 };
 
-
 export function ResizaleLayout() {
   const { setVisible, fullScreen, setFullScreen } = useRect();
 
@@ -82,7 +87,7 @@ export function ResizaleLayout() {
 }
 
 function DragIconContainer() {
-  const { fullScreen} = useRect();
+  const { fullScreen } = useRect();
   return (
     <div
       className={`rounded-lg bg-[#2F363B] ${!fullScreen && "px-1"} transition-all py-2`}
@@ -93,7 +98,7 @@ function DragIconContainer() {
 }
 
 function CanvasContainer() {
-  const { fullScreen} = useRect();
+  const { fullScreen } = useRect();
   return (
     <div
       className={`absolute overflow-hidden transition-all inset-0 ${fullScreen ? "h-screen " : "h-[calc(100vh-3rem)] rounded-2xl"} w-full`}
@@ -104,7 +109,7 @@ function CanvasContainer() {
 }
 
 function SidePanelContainer() {
-  const { fullScreen, visible} = useRect();
+  const { fullScreen, visible } = useRect();
   return (
     <div
       className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen" : "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}
@@ -123,35 +128,35 @@ function SidePanelContainer() {
 }
 
 function SidePanel() {
-  const [value, setValue] = useState("");
-  // const [dragAsText, setDragAsText] = useState(false);
+  const [content, setContent] = useState<{context: string}[]>()
   return (
     <>
       <div className="px-3 py-5">
-        <input
-          placeholder="search..."
-          onChange={(e) => {
-            setValue(e.target.value);
+        <form
+          action={async (FormData) => {
+            const search = FormData.get("search");
+            console.log(search)
+            const res = await fetch("/api/canvasai", {
+              method: "POST",
+              body: JSON.stringify({ query: search }),
+            });
+            const t = await res.json()
+            console.log(t.response.response);
+            setContent(t.response.response)
           }}
-          value={value}
-          // rows={1}
-          className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
-        />
-      </div>
-      <div className="flex items-center justify-end px-3 py-4">
-        {/* <Switch
-          className="bg-[#151515] data-[state=unchecked]:bg-red-400 data-[state=checked]:bg-blue-400"
-          onCheckedChange={(e) => setDragAsText(e)}
-          id="drag-text-mode"
-        /> */}
-        <Label htmlFor="drag-text-mode">Drag as Text</Label>
+        >
+          <input
+            placeholder="search..."
+            name="search"
+            className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52"
+          />
+        </form>
       </div>
       <DraggableComponentsContainer content={content} />
     </>
   );
 }
 
-
 const content = [
   {
     content:
diff --git a/apps/web/components/canvas/savesnap.tsx b/apps/web/components/canvas/savesnap.tsx
index 45fc7e9d..52654bd1 100644
--- a/apps/web/components/canvas/savesnap.tsx
+++ b/apps/web/components/canvas/savesnap.tsx
@@ -10,7 +10,10 @@ export function SaveStatus({id}: {id:string}) {
   const debouncedSave = useCallback(
     debounce(async () => {
       const snapshot = getSnapshot(editor.store)
-      SaveCanvas({id, data: JSON.stringify(snapshot)})
+      const bounds = editor.getViewportPageBounds()
+      console.log(bounds)
+
+      SaveCanvas({id, data: JSON.stringify({snapshot, bounds})})
       
       setSave("saved!");
     }, 3000),