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

Add core UI components and layout for media platform

Browse Source 
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
This commit is contained in:
kimjaehyeon0101
2025-09-29 14:35:50 +00:00
parent 4d252ca7a6
commit 2cbad88faa
89 changed files with 17584 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
client/src/pages/Home.tsx Normal file
View File

@ -0,0 +1,162 @@
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useAuth } from "@/hooks/useAuth";
import CategoryTabs from "@/components/CategoryTabs";
import MediaOutletCard from "@/components/MediaOutletCard";
import AuctionCard from "@/components/AuctionCard";
import type { MediaOutlet, Auction } from "@shared/schema";
export default function Home() {
const { user } = useAuth();
const [selectedCategory, setSelectedCategory] = useState("people");
const { data: mediaOutlets = [], isLoading: outletsLoading } = useQuery<MediaOutlet[]>({
queryKey: ["/api/media-outlets", selectedCategory],
});
const { data: auctions = [], isLoading: auctionsLoading } = useQuery<Auction[]>({
queryKey: ["/api/auctions"],
});
const handleLogout = () => {
window.location.href = "/api/logout";
};
return (
<div className="min-h-screen bg-background">
{/* Header */}
<header className="bg-card border-b border-border sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-8">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg">
S
</div>
<span className="text-2xl font-bold tracking-tight">SAPIENS</span>
</div>
<nav className="hidden md:flex space-x-6">
<a href="/" className="text-foreground hover:text-primary transition-colors">Home</a>
<a href="/auctions" className="text-muted-foreground hover:text-foreground transition-colors">Auctions</a>
<a href="#" className="text-muted-foreground hover:text-foreground transition-colors">Predictions</a>
{(user?.role === 'admin' || user?.role === 'superadmin') && (
<a href={user.role === 'admin' ? '/admin' : '/superadmin'} className="text-muted-foreground hover:text-foreground transition-colors">
Dashboard
</a>
)}
</nav>
</div>
<div className="flex items-center space-x-4">
<div className="relative">
<Input
type="text"
placeholder="Search media outlets, topics..."
className="w-64"
data-testid="input-search"
/>
<i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
</div>
<div className="flex items-center space-x-2">
<span className="text-sm text-muted-foreground">Welcome, {user?.firstName || 'User'}</span>
<Button
variant="outline"
size="sm"
onClick={handleLogout}
data-testid="button-logout"
>
Logout
</Button>
</div>
</div>
</div>
</div>
</header>
<main className="max-w-7xl mx-auto px-6 py-8">
{/* Hero Section */}
<div className="gradient-bg rounded-2xl p-8 mb-8 text-white">
<div className="max-w-3xl">
<h1 className="text-4xl font-bold mb-4">Media Intelligence & Prediction Markets</h1>
<p className="text-xl opacity-90 mb-6">Access premium media outlets across People, Topics, and Companies. Participate in prediction markets and bid for exclusive editorial rights.</p>
<div className="flex space-x-4">
<Button className="bg-white text-primary hover:bg-opacity-90" data-testid="button-explore">
Explore Media Outlets
</Button>
<Button
variant="outline"
className="border-white text-white hover:bg-white hover:text-primary"
data-testid="button-auctions"
>
<a href="/auctions">View Active Auctions</a>
</Button>
</div>
</div>
</div>
{/* Category Tabs */}
<CategoryTabs
selectedCategory={selectedCategory}
onCategoryChange={setSelectedCategory}
/>
{/* Media Outlets Grid */}
<div className="mb-12">
{outletsLoading ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
<div className="h-12 bg-muted rounded mb-4"></div>
<div className="h-4 bg-muted rounded mb-2"></div>
<div className="h-4 bg-muted rounded w-2/3"></div>
</div>
))}
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{mediaOutlets.map((outlet) => (
<MediaOutletCard key={outlet.id} outlet={outlet} />
))}
</div>
)}
</div>
{/* Current Auctions Section */}
<div className="mt-12">
<div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold">Active Media Outlet Auctions</h2>
<Button variant="ghost" className="text-primary hover:text-primary/80 font-semibold">
<a href="/auctions">View All Auctions</a>
</Button>
</div>
{auctionsLoading ? (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{Array.from({ length: 2 }).map((_, i) => (
<div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
<div className="h-6 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="h-10 bg-muted rounded mt-4"></div>
</div>
))}
</div>
) : (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{auctions.slice(0, 2).map((auction) => (
<AuctionCard key={auction.id} auction={auction} />
))}
</div>
)}
</div>
</main>
</div>
);
}