133 lines
3.7 KiB
TypeScript
133 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
|
|
export type SortOption =
|
|
| "title-asc"
|
|
| "title-desc"
|
|
| "rating-desc"
|
|
| "rating-asc"
|
|
| "date-newest"
|
|
| "date-oldest"
|
|
| "status";
|
|
|
|
interface SortOptionsProps {
|
|
currentSort: SortOption;
|
|
onSortChange: (sort: SortOption) => void;
|
|
}
|
|
|
|
export function SortOptions({ currentSort, onSortChange }: SortOptionsProps) {
|
|
const getSortLabel = () => {
|
|
switch (currentSort) {
|
|
case "title-asc":
|
|
return "Title (A-Z)";
|
|
case "title-desc":
|
|
return "Title (Z-A)";
|
|
case "rating-desc":
|
|
return "Rating (High to Low)";
|
|
case "rating-asc":
|
|
return "Rating (Low to High)";
|
|
case "date-newest":
|
|
return "Newest First";
|
|
case "date-oldest":
|
|
return "Oldest First";
|
|
case "status":
|
|
return "Status";
|
|
default:
|
|
return "Sort by";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="sm" className="gap-2 bg-transparent">
|
|
<ArrowUpDown className="h-4 w-4" />
|
|
{getSortLabel()}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="w-56">
|
|
<DropdownMenuLabel>Sort by</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
|
|
<DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
|
|
Title
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
onClick={() => onSortChange("title-asc")}
|
|
className="cursor-pointer"
|
|
>
|
|
<ArrowUp className="mr-2 h-4 w-4" />
|
|
Title (A-Z)
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => onSortChange("title-desc")}
|
|
className="cursor-pointer"
|
|
>
|
|
<ArrowDown className="mr-2 h-4 w-4" />
|
|
Title (Z-A)
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
|
|
Rating
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
onClick={() => onSortChange("rating-desc")}
|
|
className="cursor-pointer"
|
|
>
|
|
<ArrowDown className="mr-2 h-4 w-4" />
|
|
Rating (High to Low)
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => onSortChange("rating-asc")}
|
|
className="cursor-pointer"
|
|
>
|
|
<ArrowUp className="mr-2 h-4 w-4" />
|
|
Rating (Low to High)
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
|
|
Publication Date
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
onClick={() => onSortChange("date-newest")}
|
|
className="cursor-pointer"
|
|
>
|
|
<ArrowDown className="mr-2 h-4 w-4" />
|
|
Newest First
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => onSortChange("date-oldest")}
|
|
className="cursor-pointer"
|
|
>
|
|
<ArrowUp className="mr-2 h-4 w-4" />
|
|
Oldest First
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
|
|
Status
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
onClick={() => onSortChange("status")}
|
|
className="cursor-pointer"
|
|
>
|
|
<ArrowUpDown className="mr-2 h-4 w-4" />
|
|
Ongoing First
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|