Update
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import useMediaStore from '@/stores/MediaStore';
|
||||
import { Edit3 } from 'lucide-react';
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface EditSidebarProps {
|
||||
isOpen: boolean;
|
||||
@@ -10,25 +12,55 @@ interface EditSidebarProps {
|
||||
}
|
||||
|
||||
export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
|
||||
const { memes, backgrounds, isFetchingMemes, isFetchingBackgrounds, currentTab, setCurrentTab, fetchMemes, fetchBackgrounds } = useMediaStore();
|
||||
const {
|
||||
memes,
|
||||
backgrounds,
|
||||
isFetchingMemes,
|
||||
isFetchingBackgrounds,
|
||||
selectedMeme,
|
||||
selectedBackground,
|
||||
fetchMemes,
|
||||
fetchBackgrounds,
|
||||
selectMeme,
|
||||
selectBackground,
|
||||
clearSelectedMeme,
|
||||
clearSelectedBackground,
|
||||
} = useMediaStore();
|
||||
|
||||
// Fetch media based on currentTab when it changes and data isn't fetched yet
|
||||
// Track the current active tab
|
||||
const [activeTab, setActiveTab] = useState('backgrounds');
|
||||
|
||||
// Fetch data when sidebar opens for the current active tab
|
||||
useEffect(() => {
|
||||
if (currentTab === 'memes' && memes.length === 0 && !isFetchingMemes) {
|
||||
if (isOpen) {
|
||||
if (activeTab === 'memes' && memes.length === 0 && !isFetchingMemes) {
|
||||
fetchMemes();
|
||||
} else if (activeTab === 'backgrounds' && backgrounds.length === 0 && !isFetchingBackgrounds) {
|
||||
fetchBackgrounds();
|
||||
}
|
||||
}
|
||||
}, [isOpen, activeTab, memes.length, backgrounds.length, isFetchingMemes, isFetchingBackgrounds]);
|
||||
|
||||
const handleTabChange = (value: string) => {
|
||||
setActiveTab(value);
|
||||
if (value === 'memes' && memes.length === 0 && !isFetchingMemes) {
|
||||
fetchMemes();
|
||||
} else if (currentTab === 'backgrounds' && backgrounds.length === 0 && !isFetchingBackgrounds) {
|
||||
} else if (value === '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';
|
||||
const handleMemeSelect = (meme) => {
|
||||
selectMeme(meme);
|
||||
};
|
||||
|
||||
const handleBackgroundSelect = (background) => {
|
||||
selectBackground(background);
|
||||
};
|
||||
|
||||
return (
|
||||
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<SheetContent side="right" className="w-80 overflow-y-auto">
|
||||
<SheetContent side="right" className="w-80 overflow-y-auto px-2">
|
||||
<SheetHeader>
|
||||
<SheetTitle className="flex items-center gap-3">
|
||||
<Edit3 className="h-6 w-6" />
|
||||
@@ -36,64 +68,88 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
|
||||
</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>
|
||||
{/* Currently Selected Items */}
|
||||
<div className="pb-6">
|
||||
<div className="flex justify-center gap-3">
|
||||
{/* Selected Background */}
|
||||
<div className="text-center">
|
||||
{selectedBackground ? (
|
||||
<div className="aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100">
|
||||
<img src={selectedBackground.media_url} alt="Selected Background" className="h-full w-full object-cover" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex aspect-[9/16] h-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-2 text-center text-xs text-gray-500">
|
||||
No background
|
||||
</div>
|
||||
)}
|
||||
<p className="mb-1 text-xs text-gray-600">Background</p>
|
||||
</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>
|
||||
|
||||
{/* Selected Meme */}
|
||||
<div className="text-center">
|
||||
{selectedMeme ? (
|
||||
<div className="aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100">
|
||||
<img src={selectedMeme.gif_url} alt="Selected Meme" className="h-full w-full object-cover" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex aspect-[9/16] h-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-2 text-center text-xs text-gray-500">
|
||||
No meme
|
||||
</div>
|
||||
)}
|
||||
<p className="mb-1 text-xs text-gray-600">Meme Overlay</p>
|
||||
</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>
|
||||
|
||||
<Tabs value={activeTab} className="w-full" onValueChange={handleTabChange}>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="memes">Meme</TabsTrigger>
|
||||
|
||||
<TabsTrigger value="backgrounds">Background</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="backgrounds" className="">
|
||||
{isFetchingBackgrounds && <Spinner className="h-4 w-4"></Spinner>}
|
||||
{!isFetchingBackgrounds && backgrounds.length === 0 && <div className="w-full text-center">No backgrounds available.</div>}
|
||||
{!isFetchingBackgrounds && backgrounds.length > 0 && (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{backgrounds.map((item, index) => (
|
||||
<Button
|
||||
key={item.ids}
|
||||
variant="ghost"
|
||||
className={`aspect-[9/16] h-auto w-full overflow-hidden rounded-lg bg-gray-100 p-0 transition-all hover:bg-gray-100 hover:ring-2 hover:ring-blue-500 ${
|
||||
selectedBackground?.ids === item.ids ? 'ring-2 ring-blue-500' : ''
|
||||
}`}
|
||||
onClick={() => handleBackgroundSelect(item)}
|
||||
>
|
||||
<img src={item.media_url} alt="Background" width={150} height={150} className="h-full w-full object-cover" />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="memes" className="">
|
||||
{isFetchingMemes && <Spinner className="h-4 w-4"></Spinner>}
|
||||
{!isFetchingMemes && memes.length === 0 && <div className="w-full text-center">No memes available.</div>}
|
||||
{!isFetchingMemes && memes.length > 0 && (
|
||||
<div className="grid grid-cols-2 gap-2 p-2">
|
||||
{memes.map((item, index) => (
|
||||
<Button
|
||||
key={item.ids}
|
||||
variant="ghost"
|
||||
className={`aspect-[9/16] h-auto w-full overflow-hidden rounded-lg bg-gray-100 p-0 transition-all hover:bg-gray-100 hover:ring-2 hover:ring-blue-500 ${
|
||||
selectedMeme?.ids === item.ids ? 'ring-2 ring-blue-500' : ''
|
||||
}`}
|
||||
onClick={() => handleMemeSelect(item)}
|
||||
>
|
||||
<img src={item.gif_url} alt="Meme" width={150} height={150} className="h-full w-full object-cover" />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user