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

Make media outlets clickable to view their detailed pages

Browse Source 
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
1 changed files with 35 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
client/src/components/MainContent.tsx
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,40 +48,41 @@ export default function MainContent() {
}; };
const renderOutletCard = (outlet: MediaOutlet) => ( const renderOutletCard = (outlet: MediaOutlet) => (
<Card <Link key={outlet.id} href={`/media/${outlet.slug}`} data-testid={`link-outlet-${outlet.id}`}>
key={outlet.id} <Card
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}`}
> >
<CardContent className="p-2"> <CardContent className="p-2">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden"> <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
{outlet.imageUrl ? ( {outlet.imageUrl ? (
<img <img
src={outlet.imageUrl} src={outlet.imageUrl}
alt={outlet.name} alt={outlet.name}
className="w-full h-full object-cover" className="w-full h-full object-cover"
style={{objectPosition: 'center top'}} style={{objectPosition: 'center top'}}
/> />
) : ( ) : (
<div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center"> <div className="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center">
<span className="text-gray-600 text-sm font-medium"> <span className="text-gray-600 text-sm font-medium">
{outlet.name.charAt(0)} {outlet.name.charAt(0)}
</span> </span>
</div> </div>
)} )}
</div>
<div className="flex-1 min-w-0">
<h3 className="font-medium text-gray-900 truncate">
{outlet.name}
</h3>
<p className="text-sm text-gray-500 truncate">
{outlet.description || "Media Outlet"}
</p>
</div>
</div> </div>
<div className="flex-1 min-w-0"> </CardContent>
<h3 className="font-medium text-gray-900 truncate"> </Card>
{outlet.name} </Link>
</h3>
<p className="text-sm text-gray-500 truncate">
{outlet.description || "Media Outlet"}
</p>
</div>
</div>
</CardContent>
</Card>
); );
return ( return (