diff options
| author | Maze Winther <mazewinther@gmail.com> | 2025-08-16 18:54:18 +0200 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2025-08-16 18:54:18 +0200 |
| commit | 77d8c6c77423b065e69043a7fd67584190b7c21f (patch) | |
| tree | 65f1d74e23d482eca0608008bf3b0626c59db248 /apps/web/src/app | |
| parent | c0709293dab81aef7efca4679582febd953bd265 (diff) | |
| download | opencut-77d8c6c77423b065e69043a7fd67584190b7c21f.tar.gz | |
style: sort button in /projects
Diffstat (limited to 'apps/web/src/app')
| -rw-r--r-- | apps/web/src/app/projects/page.tsx | 88 |
1 files changed, 71 insertions, 17 deletions
diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx index 4276ecc7..3d66a3c5 100644 --- a/apps/web/src/app/projects/page.tsx +++ b/apps/web/src/app/projects/page.tsx @@ -5,6 +5,7 @@ import { ChevronLeft, Loader2, MoreHorizontal, + ArrowDown01, Plus, Search, Trash2, @@ -29,12 +30,11 @@ import { } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; import { Skeleton } from "@/components/ui/skeleton"; import { useProjectStore } from "@/stores/project-store"; import { useTimelineStore } from "@/stores/timeline-store"; @@ -228,17 +228,71 @@ export default function ProjectsPage() { onChange={(e) => setSearchQuery(e.target.value)} /> </div> - <Select value={sortOption} onValueChange={setSortOption}> - <SelectTrigger className="w-[180px]"> - <SelectValue placeholder="Sort by" /> - </SelectTrigger> - <SelectContent> - <SelectItem value="createdAt-desc">Newest to Oldest</SelectItem> - <SelectItem value="createdAt-asc">Oldest to Newest</SelectItem> - <SelectItem value="name-asc">Name (A-Z)</SelectItem> - <SelectItem value="name-desc">Name (Z-A)</SelectItem> - </SelectContent> - </Select> + <div className="flex items-center gap-0"> + <TooltipProvider> + <Tooltip> + <DropdownMenu> + <TooltipTrigger asChild> + <DropdownMenuTrigger asChild> + <Button + size="icon" + variant="secondary" + className="justify-center items-center w-9 h-9" + > + <ArrowDown01 + strokeWidth={1.5} + className="!size-[1.05rem]" + /> + </Button> + </DropdownMenuTrigger> + </TooltipTrigger> + <DropdownMenuContent align="end"> + <DropdownMenuItem + onClick={() => { + if (sortOption.startsWith("createdAt")) { + setSortOption( + sortOption.endsWith("asc") + ? "createdAt-desc" + : "createdAt-asc" + ); + } else { + setSortOption("createdAt-asc"); + } + }} + > + Created{" "} + {sortOption.startsWith("createdAt") && + (sortOption.endsWith("asc") ? "↑" : "↓")} + </DropdownMenuItem> + <DropdownMenuItem + onClick={() => { + if (sortOption.startsWith("name")) { + setSortOption( + sortOption.endsWith("asc") + ? "name-desc" + : "name-asc" + ); + } else { + setSortOption("name-asc"); + } + }} + > + Name{" "} + {sortOption.startsWith("name") && + (sortOption.endsWith("asc") ? "↑" : "↓")} + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + <TooltipContent> + <p> + Sort by{" "} + {sortOption.startsWith("createdAt") ? "date" : "name"} ( + {sortOption.endsWith("asc") ? "ascending" : "descending"}) + </p> + </TooltipContent> + </Tooltip> + </TooltipProvider> + </div> </div> {isSelectionMode && sortedProjects.length > 0 && ( |