Make media outlets clickable to view their detailed pages

Update MainContent.tsx to wrap media outlet cards in a Link component from 'wouter', directing users to a new page based on the outlet's slug.

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/6XTzcDL
This commit is contained in:
kimjaehyeon0101
2025-09-29 19:25:46 +00:00
parent 10d2fd7026
commit 39a094d775

View File

@ -6,6 +6,7 @@ import { useAuth } from "@/hooks/useAuth";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import { useState } from "react"; import { useState } from "react";
import { ArrowUpDown } from "lucide-react"; import { ArrowUpDown } from "lucide-react";
import { Link } from "wouter";
const categories = [ const categories = [
{ id: "people", name: "People", key: "People" }, { id: "people", name: "People", key: "People" },
@ -47,8 +48,8 @@ export default function MainContent() {
}; };
const renderOutletCard = (outlet: MediaOutlet) => ( const renderOutletCard = (outlet: MediaOutlet) => (
<Link key={outlet.id} href={`/media/${outlet.slug}`} data-testid={`link-outlet-${outlet.id}`}>
<Card <Card
key={outlet.id}
className="hover:shadow-md transition-shadow cursor-pointer bg-white" className="hover:shadow-md transition-shadow cursor-pointer bg-white"
data-testid={`card-outlet-${outlet.id}`} data-testid={`card-outlet-${outlet.id}`}
> >
@ -81,6 +82,7 @@ export default function MainContent() {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</Link>
); );
return ( return (