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 { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Spinner } from '@/components/ui/spinner'; import { Spinner } from '@/components/ui/spinner';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils';
import useMediaStore from '@/stores/MediaStore'; import useMediaStore from '@/stores/MediaStore';
import { Edit3 } from 'lucide-react'; import { Edit3 } from 'lucide-react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -69,12 +70,17 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
</SheetHeader> </SheetHeader>
{/* Currently Selected Items */} {/* Currently Selected Items */}
<div className="pb-6"> <div className="pb-0">
<div className="flex justify-center gap-3"> <div className="flex justify-center gap-3">
{/* Selected Meme */} {/* Selected Meme */}
<div className="text-center"> <div className="text-center" onClick={() => setActiveTab('memes')}>
{selectedMeme ? ( {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" /> <img src={selectedMeme.gif_url} alt="Selected Meme" className="h-full w-full object-cover" />
</div> </div>
) : ( ) : (
@@ -86,9 +92,14 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
</div> </div>
{/* Selected Background */} {/* Selected Background */}
<div className="text-center"> <div className="text-center" onClick={() => setActiveTab('backgrounds')}>
{selectedBackground ? ( {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" /> <img src={selectedBackground.media_url} alt="Selected Background" className="h-full w-full object-cover" />
</div> </div>
) : ( ) : (
@@ -112,20 +123,33 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
{isFetchingBackgrounds && <Spinner className="h-4 w-4"></Spinner>} {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="w-full text-center">No backgrounds available.</div>}
{!isFetchingBackgrounds && backgrounds.length > 0 && ( {!isFetchingBackgrounds && backgrounds.length > 0 && (
<div className="grid grid-cols-2 gap-2"> <>
{backgrounds.map((item, index) => ( <div className="grid grid-cols-2 gap-2">
<Button {backgrounds.map((item, index) => (
key={item.ids} <Button
variant="ghost" key={item.ids}
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 ${ variant="ghost"
selectedBackground?.ids === item.ids ? 'ring-2 ring-blue-500' : '' 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)} }`}
> onClick={() => handleBackgroundSelect(item)}
<img src={item.media_url} alt="Background" width={150} height={150} className="h-full w-full object-cover" /> >
<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> </Button>
))} </div>
</div> </>
)} )}
</TabsContent> </TabsContent>
@@ -133,20 +157,27 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
{isFetchingMemes && <Spinner className="h-4 w-4"></Spinner>} {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="w-full text-center">No memes available.</div>}
{!isFetchingMemes && memes.length > 0 && ( {!isFetchingMemes && memes.length > 0 && (
<div className="grid grid-cols-2 gap-2 p-2"> <>
{memes.map((item, index) => ( <div className="grid grid-cols-2 gap-2 p-2">
<Button {memes.map((item, index) => (
key={item.ids} <Button
variant="ghost" key={item.ids}
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 ${ variant="ghost"
selectedMeme?.ids === item.ids ? 'ring-2 ring-blue-500' : '' 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)} }`}
> onClick={() => handleMemeSelect(item)}
<img src={item.gif_url} alt="Meme" width={150} height={150} className="h-full w-full object-cover" /> >
<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> </Button>
))} </div>
</div> </>
)} )}
</TabsContent> </TabsContent>
</Tabs> </Tabs>