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

Enable navigation to home page via footer logo and filter media outlets by category

Browse Source 
Update Footer component to navigate to home page on logo click. Modify MainContent to filter and display media outlets by "People", "Topics", and "Companies" categories, with a two-column layout. Adjust MediaOutlet page to display articles in a two-column layout when not in grid view.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/IfFFLfD
This commit is contained in:
kimjaehyeon0101
2025-10-15 07:45:54 +00:00
parent 673fb746ca
commit 3e0431a6bd
3 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,9 @@
import logoWhite from "@assets/logo_white_1759167910147.png";
import { useLocation } from "wouter";
export default function Footer() {
const [, setLocation] = useLocation();
return (
<footer className="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-700 z-40">
<div className="max-w-7xl mx-auto px-4 py-4">
@ -10,8 +13,9 @@ export default function Footer() {
<img
src={logoWhite}
alt="SAPIENS"
className="h-5"
className="h-5 cursor-pointer hover:opacity-80 transition-opacity"
data-testid="footer-logo"
onClick={() => setLocation("/")}
/>
</div>
<div className="flex items-center">

34
client/src/components/MainContent.tsx
View File

@ -20,6 +20,7 @@ export default function MainContent() {
const { user } = useAuth();
const [sortBy, setSortBy] = useState<"alphabetical" | "traffic">("alphabetical");
const [enlargedImage, setEnlargedImage] = useState<string | null>(null);
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const { data: allOutlets = [], isLoading } = useQuery<MediaOutlet[]>({
queryKey: ["/api/media-outlets"],
@ -170,11 +171,32 @@ export default function MainContent() {
</div>
))}
</div>
) : selectedCategory ? (
<div>
<div className="flex items-center mb-4">
<h2 className="text-2xl font-bold text-gray-900 cursor-pointer hover:text-blue-600">
{selectedCategory}
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory(selectedCategory).length})</span>
</h2>
<button
onClick={() => setSelectedCategory(null)}
className="ml-4 text-sm text-blue-600 hover:text-blue-800"
>
View All Categories
</button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{getOutletsByCategory(selectedCategory).map(renderOutletCard)}
</div>
</div>
) : (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* People Section */}
<div data-testid="section-people">
<h2 className="text-xl font-bold text-gray-900 mb-2">
<h2
className="text-xl font-bold text-gray-900 mb-2 cursor-pointer hover:text-blue-600 transition-colors"
onClick={() => setSelectedCategory("People")}
>
People
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
</h2>
@ -185,7 +207,10 @@ export default function MainContent() {
{/* Topics Section */}
<div data-testid="section-topics">
<h2 className="text-xl font-bold text-gray-900 mb-2">
<h2
className="text-xl font-bold text-gray-900 mb-2 cursor-pointer hover:text-blue-600 transition-colors"
onClick={() => setSelectedCategory("Topics")}
>
Topics
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
</h2>
@ -196,7 +221,10 @@ export default function MainContent() {
{/* Companies Section */}
<div data-testid="section-companies">
<h2 className="text-xl font-bold text-gray-900 mb-2">
<h2
className="text-xl font-bold text-gray-900 mb-2 cursor-pointer hover:text-blue-600 transition-colors"
onClick={() => setSelectedCategory("Companies")}
>
Companies
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
</h2>