84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import { Heart, Sparkles } from 'lucide-react'
|
|
import type { GenSpaceSortDir, GenSpaceSortKey, GenSpaceTypeFilter } from '../../lib/genspace-gallery'
|
|
import { GenSpaceGallerySizeMenu, type GallerySize } from './GenSpaceGallerySizeMenu'
|
|
import { GenSpaceSortMenu } from './GenSpaceSortMenu'
|
|
import { GenSpaceTypeFilter as TypeFilter } from './GenSpaceTypeFilter'
|
|
|
|
export function GenSpaceGalleryToolbar({
|
|
showBrowseLoras,
|
|
onBrowseLoras,
|
|
typeFilter,
|
|
onTypeFilterChange,
|
|
sortKey,
|
|
sortDir,
|
|
onSortKeyChange,
|
|
onToggleSortDir,
|
|
showFavorites,
|
|
favoriteCount,
|
|
onToggleFavorites,
|
|
gallerySize,
|
|
onGallerySizeChange,
|
|
}: {
|
|
showBrowseLoras: boolean
|
|
onBrowseLoras: () => void
|
|
typeFilter: GenSpaceTypeFilter
|
|
onTypeFilterChange: (value: GenSpaceTypeFilter) => void
|
|
sortKey: GenSpaceSortKey
|
|
sortDir: GenSpaceSortDir
|
|
onSortKeyChange: (key: GenSpaceSortKey) => void
|
|
onToggleSortDir: () => void
|
|
showFavorites: boolean
|
|
favoriteCount: number
|
|
onToggleFavorites: () => void
|
|
gallerySize: GallerySize
|
|
onGallerySizeChange: (size: GallerySize) => void
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between pb-2 gap-2">
|
|
<div className="flex items-center gap-2">
|
|
{showBrowseLoras && (
|
|
<button
|
|
type="button"
|
|
onClick={onBrowseLoras}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium text-zinc-400 hover:text-white hover:bg-zinc-800 transition-colors"
|
|
>
|
|
<Sparkles className="h-4 w-4" /> Browse LoRAs
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<TypeFilter value={typeFilter} onChange={onTypeFilterChange} />
|
|
<GenSpaceSortMenu
|
|
sortKey={sortKey}
|
|
sortDir={sortDir}
|
|
onSortKeyChange={onSortKeyChange}
|
|
onToggleSortDir={onToggleSortDir}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={onToggleFavorites}
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
|
showFavorites
|
|
? 'bg-red-500/20 text-red-400 border border-red-500/30'
|
|
: 'text-zinc-400 hover:text-white hover:bg-zinc-800'
|
|
}`}
|
|
>
|
|
<Heart className={`h-4 w-4 ${showFavorites ? 'fill-current' : ''}`} />
|
|
Favorites
|
|
{favoriteCount > 0 && (
|
|
<span className={`text-xs px-1.5 py-0.5 rounded-full ${
|
|
showFavorites ? 'bg-red-500/30 text-red-300' : 'bg-zinc-800 text-zinc-500'
|
|
}`}>
|
|
{favoriteCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
<GenSpaceGallerySizeMenu
|
|
gallerySize={gallerySize}
|
|
onGallerySizeChange={onGallerySizeChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|