39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
type SortOption = 'newest' | 'oldest' | 'title'
|
|
|
|
interface SortDropdownProps {
|
|
sortBy: SortOption
|
|
onSortChange: (value: SortOption) => void
|
|
}
|
|
|
|
export function SortDropdown({ sortBy, onSortChange }: SortDropdownProps) {
|
|
return (
|
|
<select
|
|
value={sortBy}
|
|
onChange={e => onSortChange(e.target.value as SortOption)}
|
|
className="border-2 border-slate-700 bg-zinc-900 dark:bg-zinc-900 text-zinc-100 dark:text-zinc-100 font-mono px-6 py-3 uppercase text-sm cyber-focus-pink transition-all hover:border-cyan-400 cursor-pointer"
|
|
>
|
|
<option
|
|
value="newest"
|
|
className="bg-zinc-900 text-zinc-100"
|
|
style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
|
|
>
|
|
NEWEST FIRST
|
|
</option>
|
|
<option
|
|
value="oldest"
|
|
className="bg-zinc-900 text-zinc-100"
|
|
style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
|
|
>
|
|
OLDEST FIRST
|
|
</option>
|
|
<option
|
|
value="title"
|
|
className="bg-zinc-900 text-zinc-100"
|
|
style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
|
|
>
|
|
BY TITLE
|
|
</option>
|
|
</select>
|
|
)
|
|
}
|