aimond/sapiens-web3
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

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

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