This commit is contained in:
ct
2025-06-13 11:35:18 +08:00
parent 7ffa3d9ca0
commit 53690753c6
42 changed files with 4638 additions and 991 deletions

View File

@@ -1,6 +1,7 @@
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Spinner } from '@/components/ui/spinner';
import useMediaStore from '@/stores/MediaStore';
import { Coins, Edit3, Plus } from 'lucide-react';
import { Edit3 } from 'lucide-react';
import { useEffect } from 'react';
interface EditSidebarProps {
@@ -18,7 +19,7 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
} else if (currentTab === 'backgrounds' && backgrounds.length === 0 && !isFetchingBackgrounds) {
fetchBackgrounds();
}
}, [currentTab, memes.length, backgrounds.length, isFetchingMemes, isFetchingBackgrounds, fetchMemes, fetchBackgrounds]);
}, [currentTab]);
// Determine display states
const isFetching = currentTab === 'memes' ? isFetchingMemes : isFetchingBackgrounds;
@@ -74,26 +75,9 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
</div>
</div>
{/* 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" />
</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>
{/* Media Grid */}
{isFetching && <div>Loading {mediaType}...</div>}
{!isFetching && media.length === 0 && <div>No {mediaType} available</div>}
{isFetching && <Spinner className="h-4 w-4"></Spinner>}
{!isFetching && media.length === 0 && <div className="w-full text-center">No {mediaType} available.</div>}
{!isFetching && media.length > 0 && (
<div className="grid grid-cols-2 gap-3">
{media.map((item, index) => (