Improve organization of media outlets by adding sorting options

Removes the global sorting dropdown and adds inline sort toggles to each media outlet category.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/YptCfK0
This commit is contained in:
kimjaehyeon0101
2025-09-29 19:48:58 +00:00
parent 1ad56f715d
commit 463f042f64

View File

@ -176,31 +176,24 @@ export default function AdminDashboard() {
</div>
) : (
<>
<div className="flex items-center justify-between mb-6">
<div className="text-sm text-gray-500">
{filteredOutlets.length} media outlets {searchTerm && `(search results for "${searchTerm}")`}
</div>
<div className="flex items-center space-x-2">
<ArrowUpDown className="h-4 w-4 text-gray-500" />
<Select value={sortBy} onValueChange={(value: "alphabetical" | "traffic") => setSortBy(value)}>
<SelectTrigger className="w-[180px]" data-testid="admin-sort-select">
<SelectValue placeholder="Sort by" />
</SelectTrigger>
<SelectContent>
<SelectItem value="alphabetical" data-testid="admin-sort-alphabetical">Alphabetical</SelectItem>
<SelectItem value="traffic" data-testid="admin-sort-traffic">Traffic</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* People Section */}
<div data-testid="admin-section-people">
<h2 className="text-xl font-bold text-gray-900 mb-2">
<div className="flex items-center justify-between mb-2">
<h2 className="text-xl font-bold text-gray-900">
People
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
</h2>
<button
onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
className="p-1 rounded hover:bg-gray-100"
title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
data-testid="people-sort-toggle"
>
<ArrowUpDown className="h-4 w-4 text-gray-500" />
</button>
</div>
<div className="space-y-2">
{getOutletsByCategory("People").map((outlet) => (
<Card
@ -244,10 +237,20 @@ export default function AdminDashboard() {
{/* Topics Section */}
<div data-testid="admin-section-topics">
<h2 className="text-xl font-bold text-gray-900 mb-2">
<div className="flex items-center justify-between mb-2">
<h2 className="text-xl font-bold text-gray-900">
Topics
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
</h2>
<button
onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
className="p-1 rounded hover:bg-gray-100"
title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
data-testid="topics-sort-toggle"
>
<ArrowUpDown className="h-4 w-4 text-gray-500" />
</button>
</div>
<div className="space-y-2">
{getOutletsByCategory("Topics").map((outlet) => (
<Card
@ -291,10 +294,20 @@ export default function AdminDashboard() {
{/* Companies Section */}
<div data-testid="admin-section-companies">
<h2 className="text-xl font-bold text-gray-900 mb-2">
<div className="flex items-center justify-between mb-2">
<h2 className="text-xl font-bold text-gray-900">
Companies
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
</h2>
<button
onClick={() => setSortBy(sortBy === "alphabetical" ? "traffic" : "alphabetical")}
className="p-1 rounded hover:bg-gray-100"
title={`Sort by ${sortBy === "alphabetical" ? "traffic" : "alphabetical"}`}
data-testid="companies-sort-toggle"
>
<ArrowUpDown className="h-4 w-4 text-gray-500" />
</button>
</div>
<div className="space-y-2">
{getOutletsByCategory("Companies").map((outlet) => (
<Card