Add core UI components and layout for media platform

Initializes the client-side application with fundamental UI components, including navigation, cards for articles and auctions, and various elements for user interaction and display. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/bVdKIaU
2025-09-29 14:35:50 +00:00
parent 4d252ca7a6
commit 2cbad88faa
89 changed files with 17584 additions and 0 deletions
--- a/client/src/components/AuctionCard.tsx
+++ b/client/src/components/AuctionCard.tsx
@ -0,0 +1,84 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import type { Auction } from "@shared/schema";
+
+interface AuctionCardProps {
+  auction: Auction;
+}
+
+export default function AuctionCard({ auction }: AuctionCardProps) {
+  const formatPrice = (price: string) => {
+    const num = parseFloat(price);
+    return `$${num.toLocaleString()}`;
+  };
+
+  const getTimeRemaining = (endDate: string | Date) => {
+    const end = new Date(endDate);
+    const now = new Date();
+    const diff = end.getTime() - now.getTime();
+    
+    if (diff <= 0) return "Ended";
+    
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    
+    if (days > 0) return `${days}d ${hours}h`;
+    if (hours > 0) return `${hours}h ${minutes}m`;
+    return `${minutes}m`;
+  };
+
+  const getStatusBadge = () => {
+    const timeRemaining = getTimeRemaining(auction.endDate);
+    if (timeRemaining === "Ended") return { text: "Ended", variant: "secondary" as const };
+    
+    const end = new Date(auction.endDate);
+    const now = new Date();
+    const hoursLeft = (end.getTime() - now.getTime()) / (1000 * 60 * 60);
+    
+    if (hoursLeft <= 3) return { text: "Ending Soon", variant: "destructive" as const };
+    return { text: "Active", variant: "default" as const };
+  };
+
+  const status = getStatusBadge();
+
+  return (
+    <Card 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">{auction.title}</h3>
+            <p className="text-sm text-muted-foreground">{auction.description}</p>
+          </div>
+          <Badge variant={status.variant}>{status.text}</Badge>
+        </div>
+        
+        <div className="space-y-3">
+          <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-chart-2">{auction.qualityScore || 0}/100</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 mt-4" 
+          disabled={getTimeRemaining(auction.endDate) === "Ended"}
+          data-testid={`button-bid-${auction.id}`}
+        >
+          {getTimeRemaining(auction.endDate) === "Ended" ? "Auction Ended" : "Place Bid"}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}