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

Adjust layout for media outlets to reduce spacing and add tags

Browse Source 
Modify MediaOutlet component to reduce padding, margins, and image sizes, and integrate outlet tags.

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/gVirbWH
This commit is contained in:
kimjaehyeon0101
2025-09-29 20:35:36 +00:00
parent 759851fe5e
commit 7268fdda09
1 changed files with 30 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client/src/pages/MediaOutlet.tsx
View File

@ -172,11 +172,11 @@ export default function MediaOutlet() {
</div> </div>
</header> </header>
<div className="max-w-7xl mx-auto px-6 py-8"> <div className="max-w-7xl mx-auto px-6 py-4">
<div className="animate-pulse"> <div className="animate-pulse">
<div className="h-8 bg-gray-200 rounded w-1/3 mb-4"></div> <div className="h-8 bg-gray-200 rounded w-1/3 mb-2"></div>
<div className="h-4 bg-gray-200 rounded w-2/3 mb-8"></div> <div className="h-4 bg-gray-200 rounded w-2/3 mb-4"></div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="h-64 bg-gray-200 rounded-xl"></div> <div key={i} className="h-64 bg-gray-200 rounded-xl"></div>
))} ))}
@ -283,42 +283,46 @@ export default function MediaOutlet() {
</div> </div>
</header> </header>
<main className="max-w-7xl mx-auto px-6 py-8"> <main className="max-w-7xl mx-auto px-6 py-4">
{/* Outlet Header */} {/* Outlet Header */}
<div className="mb-8"> <div className="mb-4">
<div className="flex items-start space-x-6 mb-6"> <div className="flex items-start space-x-4 mb-3">
{outlet.imageUrl ? ( {outlet.imageUrl ? (
<img <img
src={outlet.imageUrl} src={outlet.imageUrl}
alt={outlet.name} alt={outlet.name}
className="w-20 h-20 rounded-full object-cover" className="w-16 h-16 rounded-full object-cover"
/> />
) : ( ) : (
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center"> <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
<span className="text-gray-600 font-bold text-2xl"> <span className="text-gray-600 font-bold text-xl">
{outlet.name.charAt(0)} {outlet.name.charAt(0)}
</span> </span>
</div> </div>
)} )}
<div className="flex-1"> <div className="flex-1">
<h1 className="text-3xl font-bold mb-2">{outlet.name}</h1> <div className="flex items-center space-x-2 mb-2">
<p className="text-lg text-gray-600 mb-4">{outlet.description}</p> <h1 className="text-2xl font-bold">{outlet.name}</h1>
<div className="flex items-center space-x-2 mb-4">
<Badge variant="secondary" className="capitalize"> <Badge variant="secondary" className="capitalize">
{outlet.category} {outlet.category}
</Badge> </Badge>
{outlet.tags?.map((tag) => (
<Badge key={tag} variant="outline">
{tag}
</Badge>
))}
</div> </div>
<p className="text-gray-600 mb-2">{outlet.description}</p>
{outlet.tags && outlet.tags.length > 0 && (
<div className="flex items-center space-x-2 mb-2">
{outlet.tags.map((tag) => (
<Badge key={tag} variant="outline">
{tag}
</Badge>
))}
</div>
)}
{/* Auction Section */} {/* Auction Section */}
{!auctionLoading && auction ? ( {!auctionLoading && auction ? (
<Card className="border-orange-200 bg-orange-50"> <Card className="border-orange-200 bg-orange-50">
<CardContent className="p-4"> <CardContent className="p-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -347,7 +351,7 @@ export default function MediaOutlet() {
</Card> </Card>
) : !auctionLoading && !auction ? ( ) : !auctionLoading && !auction ? (
<Card className="border-gray-200 bg-gray-50"> <Card className="border-gray-200 bg-gray-50">
<CardContent className="p-4"> <CardContent className="p-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Gavel className="h-5 w-5 text-gray-500" /> <Gavel className="h-5 w-5 text-gray-500" />
@ -366,7 +370,7 @@ export default function MediaOutlet() {
</Card> </Card>
) : ( ) : (
<Card className="border-gray-200 bg-gray-50"> <Card className="border-gray-200 bg-gray-50">
<CardContent className="p-4"> <CardContent className="p-3">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="animate-pulse flex space-x-4"> <div className="animate-pulse flex space-x-4">
<div className="rounded-full bg-gray-300 h-5 w-5"></div> <div className="rounded-full bg-gray-300 h-5 w-5"></div>
@ -381,9 +385,9 @@ export default function MediaOutlet() {
</div> </div>
{/* Articles Section */} {/* Articles Section */}
<div className="mb-8"> <div className="mb-4">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-3">
<h2 className="text-2xl font-bold">Latest Articles</h2> <h2 className="text-xl font-bold">Latest Articles</h2>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Button <Button
variant={viewMode === "grid" ? "default" : "outline"} variant={viewMode === "grid" ? "default" : "outline"}
@ -407,7 +411,7 @@ export default function MediaOutlet() {
</div> </div>
{articlesLoading ? ( {articlesLoading ? (
<div className={`grid gap-6 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}> <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="bg-white border border-gray-200 rounded-xl p-6 animate-pulse"> <div key={i} className="bg-white border border-gray-200 rounded-xl p-6 animate-pulse">
<div className="h-40 bg-gray-200 rounded mb-4"></div> <div className="h-40 bg-gray-200 rounded mb-4"></div>
@ -417,7 +421,7 @@ export default function MediaOutlet() {
))} ))}
</div> </div>
) : articles.length > 0 ? ( ) : articles.length > 0 ? (
<div className={`grid gap-6 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}> <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
{articles.map((article) => ( {articles.map((article) => (
<ArticleCard <ArticleCard
key={article.id} key={article.id}