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-06-13 09:44:18 +08:00
parent 8d6e86ebb3
commit 2fd4d42aec
54 changed files with 9917 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,7 @@
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import useMediaStore from '@/stores/MediaStore';
import { Coins, Edit3, Plus } from 'lucide-react';
import { useEffect } from 'react';
interface EditSidebarProps {
isOpen: boolean;
@@ -7,6 +9,22 @@ interface EditSidebarProps {
}
export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
const { memes, backgrounds, isFetchingMemes, isFetchingBackgrounds, currentTab, setCurrentTab, fetchMemes, fetchBackgrounds } = useMediaStore();
// Fetch media based on currentTab when it changes and data isn't fetched yet
useEffect(() => {
if (currentTab === 'memes' && memes.length === 0 && !isFetchingMemes) {
fetchMemes();
} else if (currentTab === 'backgrounds' && backgrounds.length === 0 && !isFetchingBackgrounds) {
fetchBackgrounds();
}
}, [currentTab, memes.length, backgrounds.length, isFetchingMemes, isFetchingBackgrounds, fetchMemes, fetchBackgrounds]);
// Determine display states
const isFetching = currentTab === 'memes' ? isFetchingMemes : isFetchingBackgrounds;
const media = currentTab === 'memes' ? memes : backgrounds;
const mediaType = currentTab === 'memes' ? 'memes' : 'backgrounds';
return (
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
<SheetContent side="right" className="w-80 overflow-y-auto">
@@ -20,7 +38,12 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
<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={`cursor-pointer rounded-lg border-2 p-3 text-center ${
currentTab === 'backgrounds' ? 'border-blue-500' : 'border-gray-300'
}`}
onClick={() => setCurrentTab('backgrounds')}
>
<div className="mb-2 h-16 w-full overflow-hidden rounded bg-blue-600">
<img
src="/placeholder.svg?height=64&width=120"
@@ -32,7 +55,12 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
</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={`cursor-pointer rounded-lg border-2 p-3 text-center ${
currentTab === 'memes' ? 'border-blue-500' : 'border-gray-300'
}`}
onClick={() => setCurrentTab('memes')}
>
<div className="mb-2 h-16 w-full overflow-hidden rounded bg-gray-200">
<img
src="/placeholder.svg?height=64&width=120"
@@ -49,7 +77,6 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
{/* AI Background Search */}
<div>
<h3 className="mb-4 text-lg font-medium">Search for backgrounds using AI</h3>
<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" />
@@ -64,68 +91,24 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
</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"
/>
{/* Media Grid */}
{isFetching && <div>Loading {mediaType}...</div>}
{!isFetching && media.length === 0 && <div>No {mediaType} available</div>}
{!isFetching && media.length > 0 && (
<div className="grid grid-cols-2 gap-3">
{media.map((item, index) => (
<div key={index} className="aspect-square overflow-hidden rounded-lg bg-gray-100">
<img
src={item.imageUrl}
alt={currentTab === 'memes' ? 'Meme' : 'Background'}
width={150}
height={150}
className="h-full w-full object-cover"
/>
</div>
))}
</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>
</SheetContent>
</Sheet>