charlestehio/memefast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
ct
2025-05-28 22:34:44 +08:00
parent e0a6adf1bf
commit 9b0b1c7bdd
2 changed files with 117 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
resources/js/modules/editor/partials/edit-sidebar.tsx
View File

@@ -1,4 +1,10 @@
import { Edit3, Plus, Coins } from "lucide-react" import { Edit3, Plus, Coins } from "lucide-react"
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet"
interface EditSidebarProps { interface EditSidebarProps {
isOpen: boolean isOpen: boolean
@@ -6,126 +12,127 @@ interface EditSidebarProps {
} }
export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) { export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
if (!isOpen) return null
return ( return (
<div className="fixed left-0 top-0 h-full w-80 bg-white shadow-lg z-50 overflow-y-auto"> <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
<div className="p-4"> <SheetContent side="right" className="w-80 overflow-y-auto">
{/* Header */} <SheetHeader>
<div className="flex items-center gap-3 mb-6"> <SheetTitle className="flex items-center gap-3">
<Edit3 className="h-6 w-6" /> <Edit3 className="h-6 w-6" />
<h2 className="text-xl font-semibold">Edit Media</h2> Edit Media
</div> </SheetTitle>
</SheetHeader>
{/* Background and Meme Selection */} <div className="space-y-6">
<div className="grid grid-cols-2 gap-4 mb-6"> {/* Background and Meme Selection */}
<div className="border-2 border-gray-300 rounded-lg p-3 text-center"> <div className="grid grid-cols-2 gap-4">
<div className="w-full h-16 bg-blue-600 rounded mb-2 overflow-hidden"> <div className="border-2 border-gray-300 rounded-lg p-3 text-center">
<img <div className="w-full h-16 bg-blue-600 rounded mb-2 overflow-hidden">
src="/placeholder.svg?height=64&width=120" <img
alt="Gaming background" src="/placeholder.svg?height=64&width=120"
width={120} alt="Gaming background"
height={64} width={120}
className="w-full h-full object-cover" 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>
<span className="text-sm font-medium">Background</span>
</div> </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 */} {/* AI Background Search */}
<div className="mb-6"> <div>
<h3 className="text-lg font-medium mb-4">Search for backgrounds using AI</h3> <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="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"> <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" /> <Plus className="h-6 w-6" />
</div> </div>
<p className="text-sm font-medium mb-2">Generate a background with AI</p> <p className="text-sm font-medium mb-2">Generate a background with AI</p>
<div className="flex items-center justify-center gap-1"> <div className="flex items-center justify-center gap-1">
<span className="text-lg font-bold">1</span> <span className="text-lg font-bold">1</span>
<div className="w-5 h-5 bg-yellow-400 rounded-full flex items-center justify-center"> <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" /> <Coins className="h-3 w-3 text-yellow-800" />
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
{/* Meme Templates Grid */} {/* Meme Templates Grid */}
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden"> <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
<img <img
src="/placeholder.svg?height=150&width=150" src="/placeholder.svg?height=150&width=150"
alt="Creepy face meme" alt="Creepy face meme"
width={150} width={150}
height={150} height={150}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> </div>
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden relative"> <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden relative">
<img <img
src="/placeholder.svg?height=150&width=150" src="/placeholder.svg?height=150&width=150"
alt="Confused person meme" alt="Confused person meme"
width={150} width={150}
height={150} height={150}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
<div className="absolute top-2 right-2 text-black font-bold text-sm">???</div> <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 className="absolute bottom-2 left-2 text-black font-bold text-sm">???</div>
</div> </div>
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden"> <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
<img <img
src="/placeholder.svg?height=150&width=150" src="/placeholder.svg?height=150&width=150"
alt="Woody meme" alt="Woody meme"
width={150} width={150}
height={150} height={150}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> </div>
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden"> <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
<img <img
src="/placeholder.svg?height=150&width=150" src="/placeholder.svg?height=150&width=150"
alt="Doge meme" alt="Doge meme"
width={150} width={150}
height={150} height={150}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> </div>
<div className="aspect-square bg-blue-900 rounded-lg overflow-hidden relative"> <div className="aspect-square bg-blue-900 rounded-lg overflow-hidden relative">
<img <img
src="/placeholder.svg?height=150&width=150" src="/placeholder.svg?height=150&width=150"
alt="Stock market meme" alt="Stock market meme"
width={150} width={150}
height={150} height={150}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
<div className="absolute inset-0 bg-blue-900/50 flex items-center justify-center"> <div className="absolute inset-0 bg-blue-900/50 flex items-center justify-center">
<span className="text-white text-xs">📈 28%</span> <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>
<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> </SheetContent>
</div> </Sheet>
) )
} }

4
resources/js/modules/editor/partials/editor-controls.tsx
View File

@@ -15,13 +15,13 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
<Play className="h-8 w-8 " /> <Play className="h-8 w-8 " />
</Button> </Button>
<Button {/* <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="w-12 h-12 rounded-full shadow-sm border " className="w-12 h-12 rounded-full shadow-sm border "
> >
<span className="text-sm font-medium ">9:16</span> <span className="text-sm font-medium ">9:16</span>
</Button> </Button> */}
<Button <Button