aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve category filtering and display on the homepage

Browse Source 
Update `CategoryTabs` component to use capitalized category IDs and string literals. Modify `Home` page to initialize `selectedCategory` state with "People" and implement data fetching for media outlets based on the selected category. Add new image assets.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/M5z2Be5
This commit is contained in:
kimjaehyeon0101
2025-09-29 15:14:07 +00:00
parent 8cc09a61dc
commit 94fb8d2b53
14 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/CategoryTabs.tsx
View File

@ -6,9 +6,9 @@ interface CategoryTabsProps {
}
const categories = [
{ id: "people", label: "People", icon: "fas fa-users", count: 24 },
{ id: "topics", label: "Topics", icon: "fas fa-hashtag", count: 20 },
{ id: "companies", label: "Companies", icon: "fas fa-building", count: 27 },
{ id: "People", label: "People", icon: "fas fa-users", count: 24 },
{ id: "Topics", label: "Topics", icon: "fas fa-hashtag", count: 20 },
{ id: "Companies", label: "Companies", icon: "fas fa-building", count: 27 },
];
export default function CategoryTabs({ selectedCategory, onCategoryChange }: CategoryTabsProps) {

11
client/src/pages/Home.tsx
View File

@ -11,10 +11,19 @@ import type { MediaOutlet, Auction } from "@shared/schema";
export default function Home() {
const { user } = useAuth();
const [selectedCategory, setSelectedCategory] = useState("people");
const [selectedCategory, setSelectedCategory] = useState("People");
const { data: mediaOutlets = [], isLoading: outletsLoading } = useQuery<MediaOutlet[]>({
queryKey: ["/api/media-outlets", selectedCategory],
queryFn: async () => {
const res = await fetch(`/api/media-outlets?category=${selectedCategory}`, {
credentials: "include",
});
if (!res.ok) {
throw new Error(`${res.status}: ${res.statusText}`);
}
return res.json();
},
});
const { data: auctions = [], isLoading: auctionsLoading } = useQuery<Auction[]>({