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

Organize content into three distinct columns for better readability

Browse Source 
Update MainContent.tsx to use a grid layout for displaying people, topics, and companies, improving visual organization and structure.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/LZrXNFV
This commit is contained in:
kimjaehyeon0101
2025-09-29 17:43:48 +00:00
parent 43a054b020
commit 49689c8450
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,11 +75,11 @@ export default function MainContent() {
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
<div className="max-w-7xl mx-auto px-4 py-4"> <div className="max-w-7xl mx-auto px-4 py-4">
{isLoading ? ( {isLoading ? (
<div className="space-y-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{categories.map((category) => ( {categories.map((category) => (
<div key={category.id}> <div key={category.id}>
<h2 className="text-xl font-bold text-gray-900 mb-2">{category.name}</h2> <h2 className="text-xl font-bold text-gray-900 mb-2">{category.name}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2"> <div className="space-y-2">
{Array.from({ length: 8 }).map((_, i) => ( {Array.from({ length: 8 }).map((_, i) => (
<Card key={i} className="animate-pulse"> <Card key={i} className="animate-pulse">
<CardContent className="p-2"> <CardContent className="p-2">
@ -98,14 +98,14 @@ export default function MainContent() {
))} ))}
</div> </div>
) : ( ) : (
<div className="space-y-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* People Section */} {/* People Section */}
<div data-testid="section-people"> <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">
People People
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span> <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2"> <div className="space-y-2">
{getOutletsByCategory("People").map(renderOutletCard)} {getOutletsByCategory("People").map(renderOutletCard)}
</div> </div>
</div> </div>
@ -116,7 +116,7 @@ export default function MainContent() {
Topics Topics
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span> <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2"> <div className="space-y-2">
{getOutletsByCategory("Topics").map(renderOutletCard)} {getOutletsByCategory("Topics").map(renderOutletCard)}
</div> </div>
</div> </div>
@ -127,7 +127,7 @@ export default function MainContent() {
Companies Companies
<span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span> <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2"> <div className="space-y-2">
{getOutletsByCategory("Companies").map(renderOutletCard)} {getOutletsByCategory("Companies").map(renderOutletCard)}
</div> </div>
</div> </div>