From 39a094d775e5ff208b5914b84f2cb305da6b2354 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 19:25:46 +0000
Subject: [PATCH] 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
---
 client/src/components/MainContent.tsx | 68 ++++++++++++++-------------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
index a180b16..18683b3 100644
--- a/client/src/components/MainContent.tsx
+++ b/client/src/components/MainContent.tsx
@@ -6,6 +6,7 @@ import { useAuth } from "@/hooks/useAuth";
 import Footer from "@/components/Footer";
 import { useState } from "react";
 import { ArrowUpDown } from "lucide-react";
+import { Link } from "wouter";
 
 const categories = [
   { id: "people", name: "People", key: "People" },
@@ -47,40 +48,41 @@ export default function MainContent() {
   };
 
   const renderOutletCard = (outlet: MediaOutlet) => (
-    <Card 
-      key={outlet.id} 
-      className="hover:shadow-md transition-shadow cursor-pointer bg-white"
-      data-testid={`card-outlet-${outlet.id}`}
-    >
-      <CardContent className="p-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">
-            {outlet.imageUrl ? (
-              <img 
-                src={outlet.imageUrl} 
-                alt={outlet.name}
-                className="w-full h-full object-cover"
-                style={{objectPosition: 'center top'}}
-              />
-            ) : (
-              <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">
-                  {outlet.name.charAt(0)}
-                </span>
-              </div>
-            )}
+    <Link key={outlet.id} href={`/media/${outlet.slug}`} data-testid={`link-outlet-${outlet.id}`}>
+      <Card 
+        className="hover:shadow-md transition-shadow cursor-pointer bg-white"
+        data-testid={`card-outlet-${outlet.id}`}
+      >
+        <CardContent className="p-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">
+              {outlet.imageUrl ? (
+                <img 
+                  src={outlet.imageUrl} 
+                  alt={outlet.name}
+                  className="w-full h-full object-cover"
+                  style={{objectPosition: 'center top'}}
+                />
+              ) : (
+                <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">
+                    {outlet.name.charAt(0)}
+                  </span>
+                </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 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>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </Link>
   );
 
   return (