Align auction page elements for consistent layout
Update the main content wrapper in `Auctions.tsx` to use `max-w-7xl` and `mx-auto` for centering, and adjust padding to ensure consistent alignment with other page elements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: aabe2db1-f078-4501-aab5-be145ebc6b9a Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/aabe2db1-f078-4501-aab5-be145ebc6b9a/TqVS1Ec
This commit is contained in:
kimjaehyeon0101
@ -409,106 +409,108 @@ export default function Auctions() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 px-6 py-3 pb-32 w-full">
|
||||
{/* Auction Explanation */}
|
||||
<div className="mb-4">
|
||||
<Card>
|
||||
<CardContent className="p-3">
|
||||
<h3 className="font-semibold mb-2 text-sm">How Auctions Work</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
|
||||
<div>
|
||||
<h4 className="font-medium mb-1">Bid Amount</h4>
|
||||
<p className="text-gray-600">Your maximum willingness to pay for editorial control</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium mb-1">Quality Score</h4>
|
||||
<p className="text-gray-600">Platform assessment of your content quality and engagement</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium mb-1">Final Ranking</h4>
|
||||
<p className="text-gray-600">Combination of bid amount and quality score</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Auctions Grid */}
|
||||
{auctionsLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-6 animate-pulse">
|
||||
<div className="h-20 bg-muted rounded mb-4"></div>
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
<main className="flex-1 w-full">
|
||||
<div className="max-w-7xl mx-auto px-4 py-3 pb-32">
|
||||
{/* Auction Explanation */}
|
||||
<div className="mb-4">
|
||||
<Card>
|
||||
<CardContent className="p-3">
|
||||
<h3 className="font-semibold mb-2 text-sm">How Auctions Work</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
|
||||
<div>
|
||||
<h4 className="font-medium mb-1">Bid Amount</h4>
|
||||
<p className="text-gray-600">Your maximum willingness to pay for editorial control</p>
|
||||
</div>
|
||||
<div className="h-10 bg-muted rounded mt-4"></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
<div>
|
||||
<h4 className="font-medium mb-1">Quality Score</h4>
|
||||
<p className="text-gray-600">Platform assessment of your content quality and engagement</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium mb-1">Final Ranking</h4>
|
||||
<p className="text-gray-600">Combination of bid amount and quality score</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
) : auctions.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="p-12 text-center">
|
||||
<i className="fas fa-gavel text-4xl text-muted-foreground mb-4"></i>
|
||||
<h3 className="text-xl font-semibold mb-2">No Active Auctions</h3>
|
||||
<p className="text-muted-foreground">
|
||||
There are currently no active media outlet auctions. Check back later for new opportunities!
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{auctions.map((auction) => {
|
||||
const status = getStatusBadge(auction);
|
||||
return (
|
||||
<Card key={auction.id} data-testid={`card-auction-${auction.id}`}>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg line-clamp-1">{getMediaOutletName(auction.mediaOutletId)}</h3>
|
||||
</div>
|
||||
<Badge variant={status.variant}>{status.text}</Badge>
|
||||
|
||||
{/* Auctions Grid */}
|
||||
{auctionsLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-6 animate-pulse">
|
||||
<div className="h-20 bg-muted rounded mb-4"></div>
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-4">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Current Bid:</span>
|
||||
<span className="font-semibold">{formatPrice(auction.currentBid || "0")}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Quality Score:</span>
|
||||
<span className="font-semibold text-gray-900">{auction.qualityScore || 0}/100</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Duration:</span>
|
||||
<span className="font-semibold">{auction.duration || 30} days</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Time Remaining:</span>
|
||||
<span className={`font-semibold ${status.variant === 'destructive' ? 'text-destructive' : ''}`}>
|
||||
{getTimeRemaining(auction.endDate)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full bg-gray-600 hover:bg-gray-700 text-white"
|
||||
onClick={() => handleBidClick(auction)}
|
||||
disabled={getTimeRemaining(auction.endDate) === "Ended"}
|
||||
data-testid={`button-bid-${auction.id}`}
|
||||
>
|
||||
{getTimeRemaining(auction.endDate) === "Ended" ? "Auction Ended" : "Place Bid"}
|
||||
</Button>
|
||||
<div className="h-10 bg-muted rounded mt-4"></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
) : auctions.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="p-12 text-center">
|
||||
<i className="fas fa-gavel text-4xl text-muted-foreground mb-4"></i>
|
||||
<h3 className="text-xl font-semibold mb-2">No Active Auctions</h3>
|
||||
<p className="text-muted-foreground">
|
||||
There are currently no active media outlet auctions. Check back later for new opportunities!
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{auctions.map((auction) => {
|
||||
const status = getStatusBadge(auction);
|
||||
return (
|
||||
<Card key={auction.id} data-testid={`card-auction-${auction.id}`}>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg line-clamp-1">{getMediaOutletName(auction.mediaOutletId)}</h3>
|
||||
</div>
|
||||
<Badge variant={status.variant}>{status.text}</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-4">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Current Bid:</span>
|
||||
<span className="font-semibold">{formatPrice(auction.currentBid || "0")}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Quality Score:</span>
|
||||
<span className="font-semibold text-gray-900">{auction.qualityScore || 0}/100</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Duration:</span>
|
||||
<span className="font-semibold">{auction.duration || 30} days</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Time Remaining:</span>
|
||||
<span className={`font-semibold ${status.variant === 'destructive' ? 'text-destructive' : ''}`}>
|
||||
{getTimeRemaining(auction.endDate)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full bg-gray-600 hover:bg-gray-700 text-white"
|
||||
onClick={() => handleBidClick(auction)}
|
||||
disabled={getTimeRemaining(auction.endDate) === "Ended"}
|
||||
data-testid={`button-bid-${auction.id}`}
|
||||
>
|
||||
{getTimeRemaining(auction.endDate) === "Ended" ? "Auction Ended" : "Place Bid"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Bid Modal */}
|
||||
|
||||
Reference in New Issue
Block a user