Update

2025-05-28 19:20:07 +08:00
parent 21526508b1
commit 7fcbd5f05d
19 changed files with 463 additions and 61 deletions
--- a/resources/js/modules/editor/editor.tsx
+++ b/resources/js/modules/editor/editor.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react"
+
+import EditSidebar from "./partials/edit-sidebar"
+import EditorCanvas from "./partials/editor-canvas"
+
+import EditorHeader from "./partials/editor-header"
+import EditorControls from "./partials/editor-controls"
+
+const Editor = () => {
+    const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false)
+    const maxWidth = 350;
+
+  const handleEditClick = () => {
+    setIsEditSidebarOpen(!isEditSidebarOpen)
+  }
+
+  const handleCloseSidebar = () => {
+    setIsEditSidebarOpen(false)
+  }
+
+
+
+  return (
+    <div className="max-w-sm mx-auto min-h-screen flex flex-col relative space-y-4 py-6">
+      <EditSidebar isOpen={isEditSidebarOpen} onClose={handleCloseSidebar} />
+
+      <EditorHeader className="max-width-[350px]" />
+      <EditorCanvas maxWidth={maxWidth} />
+      <EditorControls className="max-width-[350px]" onEditClick={handleEditClick} isEditActive={isEditSidebarOpen} />
+    </div>
+  )
+}
+
+
+export default Editor;
--- a/resources/js/modules/editor/partials/edit-sidebar.tsx
+++ b/resources/js/modules/editor/partials/edit-sidebar.tsx
@@ -0,0 +1,131 @@
+import { Edit3, Plus, Coins } from "lucide-react"
+
+interface EditSidebarProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed left-0 top-0 h-full w-80 bg-white shadow-lg z-50 overflow-y-auto">
+      <div className="p-4">
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-6">
+          <Edit3 className="h-6 w-6" />
+          <h2 className="text-xl font-semibold">Edit Media</h2>
+        </div>
+
+        {/* Background and Meme Selection */}
+        <div className="grid grid-cols-2 gap-4 mb-6">
+          <div className="border-2 border-gray-300 rounded-lg p-3 text-center">
+            <div className="w-full h-16 bg-blue-600 rounded mb-2 overflow-hidden">
+              <img
+                src="/placeholder.svg?height=64&width=120"
+                alt="Gaming background"
+                width={120}
+                height={64}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <span className="text-sm font-medium">Background</span>
+          </div>
+          <div className="border-2 border-gray-300 rounded-lg p-3 text-center">
+            <div className="w-full h-16 bg-gray-200 rounded mb-2 overflow-hidden">
+              <img
+                src="/placeholder.svg?height=64&width=120"
+                alt="Meme character"
+                width={120}
+                height={64}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <span className="text-sm font-medium">Meme</span>
+          </div>
+        </div>
+
+        {/* AI Background Search */}
+        <div className="mb-6">
+          <h3 className="text-lg font-medium mb-4">Search for backgrounds using AI</h3>
+
+          <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center mb-4">
+            <div className="w-12 h-12 border-2 border-gray-400 rounded-full flex items-center justify-center mx-auto mb-3">
+              <Plus className="h-6 w-6" />
+            </div>
+            <p className="text-sm font-medium mb-2">Generate a background with AI</p>
+            <div className="flex items-center justify-center gap-1">
+              <span className="text-lg font-bold">1</span>
+              <div className="w-5 h-5 bg-yellow-400 rounded-full flex items-center justify-center">
+                <Coins className="h-3 w-3 text-yellow-800" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Meme Templates Grid */}
+        <div className="grid grid-cols-2 gap-3">
+          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
+            <img
+              src="/placeholder.svg?height=150&width=150"
+              alt="Creepy face meme"
+              width={150}
+              height={150}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden relative">
+            <img
+              src="/placeholder.svg?height=150&width=150"
+              alt="Confused person meme"
+              width={150}
+              height={150}
+              className="w-full h-full object-cover"
+            />
+            <div className="absolute top-2 right-2 text-black font-bold text-sm">???</div>
+            <div className="absolute bottom-2 left-2 text-black font-bold text-sm">???</div>
+          </div>
+          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
+            <img
+              src="/placeholder.svg?height=150&width=150"
+              alt="Woody meme"
+              width={150}
+              height={150}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
+            <img
+              src="/placeholder.svg?height=150&width=150"
+              alt="Doge meme"
+              width={150}
+              height={150}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <div className="aspect-square bg-blue-900 rounded-lg overflow-hidden relative">
+            <img
+              src="/placeholder.svg?height=150&width=150"
+              alt="Stock market meme"
+              width={150}
+              height={150}
+              className="w-full h-full object-cover"
+            />
+            <div className="absolute inset-0 bg-blue-900/50 flex items-center justify-center">
+              <span className="text-white text-xs">📈 28%</span>
+            </div>
+          </div>
+          <div className="aspect-square bg-yellow-100 rounded-lg overflow-hidden">
+            <img
+              src="/placeholder.svg?height=150&width=150"
+              alt="Room meme"
+              width={150}
+              height={150}
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/resources/js/modules/editor/partials/editor-canvas.tsx
+++ b/resources/js/modules/editor/partials/editor-canvas.tsx
@@ -0,0 +1,80 @@
+import React, { useState, useEffect, useLayoutEffect } from 'react';
+
+const useResponsiveCanvas = (maxWidth = 350) => {
+    const [scale, setScale] = useState(0.5);
+
+    const calculateScale = () => {
+        const viewportWidth = window.innerWidth;
+        const padding = 0; // 16px padding on each side
+        const availableWidth = viewportWidth - padding;
+
+        const constrainedWidth = Math.min(availableWidth, maxWidth);
+        const newScale = constrainedWidth / 720;
+
+        // Don't scale above 100% and ensure minimum scale for very small screens
+        setScale(Math.max(0.3, Math.min(newScale, 1)));
+    };
+
+    useLayoutEffect(() => {
+        calculateScale();
+    }, []);
+
+    useEffect(() => {
+        const handleResize = () => calculateScale();
+
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('orientationchange', handleResize);
+        };
+    }, []);
+
+    return scale;
+};
+
+const EditorCanvas = ({maxWidth = 350}) => {
+    const scale = useResponsiveCanvas(maxWidth);
+    const canvasWidth = 720;
+    const canvasHeight = 1280;
+    const displayWidth = canvasWidth * scale;
+    const displayHeight = canvasHeight * scale;
+
+    const convertCoordinates = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        return {
+            x: (e.clientX - rect.left) / scale,
+            y: (e.clientY - rect.top) / scale
+        };
+    };
+
+    return (
+        <div className="mx-auto p-4">
+            <div
+                style={{
+                    width: `${displayWidth}px`,
+                    height: `${displayHeight}px`,
+                }}
+            >
+                <div
+                    className="rounded-3xl bg-white shadow-sm origin-top-left"
+                    style={{
+                        width: `${canvasWidth}px`,
+                        height: `${canvasHeight}px`,
+                        transform: `scale(${scale})`,
+                    }}
+                    onClick={(e) => {
+                        const { x, y } = convertCoordinates(e);
+                        // Handle your canvas interactions here
+                        // x, y are the actual canvas coordinates (0-720, 0-1280)
+                    }}
+                >
+                    {/* Your canvas content goes here */}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EditorCanvas;
--- a/resources/js/modules/editor/partials/editor-controls.tsx
+++ b/resources/js/modules/editor/partials/editor-controls.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { Play, Type, Edit3, Download } from "lucide-react"
+
+const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive = false }) => {
+  return (
+    <div className={cn("flex items-center justify-center gap-2", className)}>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
+      >
+        <Play className="h-8 w-8 " />
+      </Button>
+
+      <div className="w-12 h-12 rounded-full bg-white shadow-sm border border-gray-100 flex items-center justify-center">
+        <span className="text-md font-medium ">9:16</span>
+      </div>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
+      >
+        <Type className="h-8 w-8 " />
+      </Button>
+
+      <Button
+        id="edit"
+        variant={isEditActive ? "default" : "ghost"}
+        size="icon"
+        className="w-12 h-12 rounded-full shadow-sm border"
+        onClick={onEditClick}
+      >
+        <Edit3 className={`h-8 w-8 ${isEditActive ? "text-white" : ""}`} />
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
+      >
+        <Download className="h-8 w-8 " />
+      </Button>
+    </div>
+  )
+}
+
+
+export default EditorControls;
--- a/resources/js/modules/editor/partials/editor-header.tsx
+++ b/resources/js/modules/editor/partials/editor-header.tsx
@@ -0,0 +1,26 @@
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import CoinIcon from "@/reusables/coin-icon"
+import { Menu, Coins } from "lucide-react"
+
+const EditorHeader = (
+    {className = ''}
+) => {
+  return (
+      <div className={cn("bg-white rounded-3xl p-4 flex items-center justify-between shadow-sm", className)}>
+      <Button variant="outline" size="icon" className="rounded">
+        <Menu className="h-8 w-8" />
+      </Button>
+
+        <h1 className="text-xl font-display tracking-wide ml-3">MEMEAIGEN</h1>
+
+        <Button variant="outline" className="rounded-full inline-flex gap-1">
+        <span className="text-sm font-semibold">100</span>
+        <CoinIcon className="w-8 h-8" />
+        </Button>
+
+    </div>
+  )
+}
+
+export default EditorHeader;