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-14 12:14:43 +08:00
parent 639fe165aa
commit b3810f5ca4
1 changed files with 62 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@ 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 { cn } from '@/lib/utils';
import useMediaStore from '@/stores/MediaStore';
import { Edit3 } from 'lucide-react';
import { useEffect, useState } from 'react';
@@ -69,12 +70,17 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
</SheetHeader>
{/* Currently Selected Items */}
<div className="pb-6">
<div className="pb-0">
<div className="flex justify-center gap-3">
{/* Selected Meme */}
<div className="text-center">
<div className="text-center" onClick={() => setActiveTab('memes')}>
{selectedMeme ? (
<div className="aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100">
<div
className={cn(
'aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100',
activeTab === 'memes' ? 'ring-2 ring-blue-500' : '',
)}
>
<img src={selectedMeme.gif_url} alt="Selected Meme" className="h-full w-full object-cover" />
</div>
) : (
@@ -86,9 +92,14 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
</div>
{/* Selected Background */}
<div className="text-center">
<div className="text-center" onClick={() => setActiveTab('backgrounds')}>
{selectedBackground ? (
<div className="aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100">
<div
className={cn(
'aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100',
activeTab === 'backgrounds' ? 'ring-2 ring-blue-500' : '',
)}
>
<img src={selectedBackground.media_url} alt="Selected Background" className="h-full w-full object-cover" />
</div>
) : (
@@ -112,20 +123,33 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
{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" />
<>
<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>
<div className="fixed bottom-5 mx-auto flex w-75 justify-center gap-2">
<Button className="rounded-full px-5" onClick={fetchBackgrounds}>
Refresh List{' '}
</Button>
))}
</div>
</div>
</>
)}
</TabsContent>
@@ -133,20 +157,27 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
{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" />
<>
<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>
<div className="fixed bottom-5 mx-auto flex w-75 justify-center gap-2">
<Button className="rounded-full px-5 shadow-lg" onClick={fetchMemes}>
Refresh List{' '}
</Button>
))}
</div>
</div>
</>
)}
</TabsContent>
</Tabs>