Update
This commit is contained in:
@@ -1,138 +1,133 @@
|
||||
import { Edit3, Plus, Coins } from "lucide-react"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet"
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
||||
import { Coins, Edit3, Plus } from 'lucide-react';
|
||||
|
||||
interface EditSidebarProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
|
||||
return (
|
||||
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<SheetContent side="right" className="w-80 overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle className="flex items-center gap-3">
|
||||
<Edit3 className="h-6 w-6" />
|
||||
Edit Media
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
return (
|
||||
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<SheetContent side="right" className="w-80 overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle className="flex items-center gap-3">
|
||||
<Edit3 className="h-6 w-6" />
|
||||
Edit Media
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Background and Meme Selection */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<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>
|
||||
<div className="space-y-6">
|
||||
{/* Background and Meme Selection */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="rounded-lg border-2 border-gray-300 p-3 text-center">
|
||||
<div className="mb-2 h-16 w-full overflow-hidden rounded bg-blue-600">
|
||||
<img
|
||||
src="/placeholder.svg?height=64&width=120"
|
||||
alt="Gaming background"
|
||||
width={120}
|
||||
height={64}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium">Background</span>
|
||||
</div>
|
||||
<div className="rounded-lg border-2 border-gray-300 p-3 text-center">
|
||||
<div className="mb-2 h-16 w-full overflow-hidden rounded bg-gray-200">
|
||||
<img
|
||||
src="/placeholder.svg?height=64&width=120"
|
||||
alt="Meme character"
|
||||
width={120}
|
||||
height={64}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium">Meme</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Background Search */}
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">Search for backgrounds using AI</h3>
|
||||
{/* AI Background Search */}
|
||||
<div>
|
||||
<h3 className="mb-4 text-lg font-medium">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 className="mb-4 rounded-lg border-2 border-dashed border-gray-300 p-6 text-center">
|
||||
<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full border-2 border-gray-400">
|
||||
<Plus className="h-6 w-6" />
|
||||
</div>
|
||||
<p className="mb-2 text-sm font-medium">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="flex h-5 w-5 items-center justify-center rounded-full bg-yellow-400">
|
||||
<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 overflow-hidden rounded-lg bg-gray-100">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Creepy face meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative aspect-square overflow-hidden rounded-lg bg-gray-100">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Confused person meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="absolute top-2 right-2 text-sm font-bold text-black">???</div>
|
||||
<div className="absolute bottom-2 left-2 text-sm font-bold text-black">???</div>
|
||||
</div>
|
||||
<div className="aspect-square overflow-hidden rounded-lg bg-gray-100">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Woody meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="aspect-square overflow-hidden rounded-lg bg-gray-100">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Doge meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative aspect-square overflow-hidden rounded-lg bg-blue-900">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Stock market meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-blue-900/50">
|
||||
<span className="text-xs text-white">📈 28%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="aspect-square overflow-hidden rounded-lg bg-yellow-100">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Room meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user