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/MediaOutletCard.tsx
+++ b/client/src/components/MediaOutletCard.tsx
@ -0,0 +1,118 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import ProfileModal from "./ProfileModal";
+import type { MediaOutlet } from "@shared/schema";
+
+interface MediaOutletCardProps {
+  outlet: MediaOutlet;
+}
+
+export default function MediaOutletCard({ outlet }: MediaOutletCardProps) {
+  const [showProfile, setShowProfile] = useState(false);
+
+  const handleCardClick = () => {
+    window.location.href = `/media/${outlet.slug}`;
+  };
+
+  const handleInfoClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowProfile(true);
+  };
+
+  const getOutletImage = () => {
+    if (outlet.imageUrl) return outlet.imageUrl;
+    
+    // Default images based on category
+    if (outlet.category === "people") {
+      return "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&w=64&h=64&fit=crop&crop=face";
+    } else if (outlet.category === "companies") {
+      return null; // Use initial letter
+    }
+    return null;
+  };
+
+  const getOutletIcon = () => {
+    if (outlet.category === "topics") {
+      return outlet.name.toLowerCase().includes("crypto") ? "fas fa-coins" :
+             outlet.name.toLowerCase().includes("ai") ? "fas fa-brain" :
+             outlet.name.toLowerCase().includes("federal") ? "fas fa-university" :
+             "fas fa-hashtag";
+    }
+    return "fas fa-building";
+  };
+
+  const getTagColor = () => {
+    const tag = outlet.tags?.[0] || outlet.category;
+    const colors = {
+      "Tech Leader": "bg-primary/10 text-primary",
+      "CEO": "bg-accent/80 text-accent-foreground", 
+      "Crypto": "bg-chart-1/20 text-chart-1",
+      "Politics": "bg-destructive/20 text-destructive",
+      "AI": "bg-chart-3/20 text-chart-3",
+      "Finance": "bg-chart-2/20 text-chart-2",
+      "Blockchain": "bg-chart-4/20 text-chart-4",
+      "Economy": "bg-chart-5/20 text-chart-5"
+    };
+    return colors[tag as keyof typeof colors] || "bg-muted text-muted-foreground";
+  };
+
+  return (
+    <>
+      <Card 
+        className="card-hover cursor-pointer" 
+        onClick={handleCardClick}
+        data-testid={`card-outlet-${outlet.slug}`}
+      >
+        <CardContent className="p-6">
+          <div className="flex items-start space-x-4">
+            {getOutletImage() ? (
+              <img 
+                src={getOutletImage()!} 
+                alt={outlet.name} 
+                className="w-12 h-12 rounded-full object-cover"
+              />
+            ) : (
+              <div className={`w-12 h-12 ${outlet.category === 'companies' ? 'bg-primary/20' : 'bg-chart-1/20'} rounded-lg flex items-center justify-center`}>
+                {outlet.category === 'companies' ? (
+                  <span className="text-primary font-bold text-lg">
+                    {outlet.name.charAt(0)}
+                  </span>
+                ) : (
+                  <i className={`${getOutletIcon()} text-chart-1 text-xl`}></i>
+                )}
+              </div>
+            )}
+            
+            <div className="flex-1">
+              <h3 className="font-semibold text-foreground">{outlet.name}</h3>
+              <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
+                {outlet.description}
+              </p>
+              <div className="flex items-center justify-between">
+                <span className={`text-xs px-2 py-1 rounded-full ${getTagColor()}`}>
+                  {outlet.tags?.[0] || outlet.category}
+                </span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleInfoClick}
+                  className="text-muted-foreground hover:text-foreground p-1"
+                  data-testid={`button-info-${outlet.slug}`}
+                >
+                  <i className="fas fa-info-circle"></i>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <ProfileModal 
+        outlet={outlet}
+        isOpen={showProfile}
+        onClose={() => setShowProfile(false)}
+      />
+    </>
+  );
+}