101 lines
4.8 KiB
TypeScript
101 lines
4.8 KiB
TypeScript
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
|
import { Spinner } from '@/components/ui/spinner';
|
|
import useMediaStore from '@/stores/MediaStore';
|
|
import { Edit3 } from 'lucide-react';
|
|
import { useEffect } from 'react';
|
|
|
|
interface EditSidebarProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
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]);
|
|
|
|
// 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">
|
|
<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={`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"
|
|
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={`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"
|
|
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>
|
|
|
|
{/* Media Grid */}
|
|
{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) => (
|
|
<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>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|