This commit is contained in:
ct
2025-06-14 11:25:13 +08:00
parent 8a732b3c31
commit 639fe165aa
11 changed files with 2144 additions and 798 deletions

View File

@@ -28,7 +28,7 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
} = useMediaStore();
// Track the current active tab
const [activeTab, setActiveTab] = useState('backgrounds');
const [activeTab, setActiveTab] = useState('memes');
// Fetch data when sidebar opens for the current active tab
useEffect(() => {
@@ -71,20 +71,6 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
{/* 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>
{/* Selected Meme */}
<div className="text-center">
{selectedMeme ? (
@@ -98,6 +84,20 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
)}
<p className="mb-1 text-xs text-gray-600">Meme Overlay</p>
</div>
{/* 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>
</div>