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

176
client/src/pages/MediaOutlet.tsx Normal file
View File

@ -0,0 +1,176 @@
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { useRoute } from "wouter";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import ArticleCard from "@/components/ArticleCard";
import type { MediaOutlet, Article } from "@shared/schema";
export default function MediaOutlet() {
const [, params] = useRoute("/media/:slug");
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
const { data: outlet, isLoading: outletLoading } = useQuery<MediaOutlet>({
queryKey: ["/api/media-outlets", params?.slug],
enabled: !!params?.slug
});
const { data: articles = [], isLoading: articlesLoading } = useQuery<Article[]>({
queryKey: ["/api/media-outlets", outlet?.id, "articles"],
enabled: !!outlet?.id
});
if (outletLoading) {
return (
<div className="min-h-screen bg-background">
<div className="max-w-7xl mx-auto px-6 py-8">
<div className="animate-pulse">
<div className="h-8 bg-muted rounded w-1/3 mb-4"></div>
<div className="h-4 bg-muted rounded w-2/3 mb-8"></div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="h-64 bg-muted rounded-xl"></div>
))}
</div>
</div>
</div>
</div>
);
}
if (!outlet) {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<div className="text-center">
<h1 className="text-2xl font-bold mb-2">Media Outlet Not Found</h1>
<p className="text-muted-foreground mb-4">The media outlet you're looking for doesn't exist.</p>
<Button onClick={() => window.history.back()}>Go Back</Button>
</div>
</div>
);
}
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-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>
<div className="flex items-center space-x-4">
<Button variant="ghost" onClick={() => window.history.back()}>
← Back
</Button>
<Button variant="outline" onClick={() => window.location.href = "/"}>
Home
</Button>
</div>
</div>
</div>
</header>
<main className="max-w-7xl mx-auto px-6 py-8">
{/* Outlet Header */}
<div className="mb-8">
<div className="flex items-start space-x-6 mb-6">
{outlet.imageUrl ? (
<img
src={outlet.imageUrl}
alt={outlet.name}
className="w-20 h-20 rounded-full object-cover"
/>
) : (
<div className="w-20 h-20 bg-primary/20 rounded-full flex items-center justify-center">
<span className="text-primary font-bold text-2xl">
{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-muted-foreground mb-4">{outlet.description}</p>
<div className="flex items-center space-x-2">
<Badge variant="secondary" className="capitalize">
{outlet.category}
</Badge>
{outlet.tags?.map((tag) => (
<Badge key={tag} variant="outline">
{tag}
</Badge>
))}
</div>
</div>
</div>
</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="flex items-center space-x-2">
<Button
variant={viewMode === "grid" ? "default" : "outline"}
size="sm"
onClick={() => setViewMode("grid")}
data-testid="button-grid-view"
>
<i className="fas fa-th mr-2"></i>
Grid
</Button>
<Button
variant={viewMode === "list" ? "default" : "outline"}
size="sm"
onClick={() => setViewMode("list")}
data-testid="button-list-view"
>
<i className="fas fa-list mr-2"></i>
List
</Button>
</div>
</div>
{articlesLoading ? (
<div className={`grid gap-6 ${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-card border border-border rounded-xl p-6 animate-pulse">
<div className="h-40 bg-muted rounded mb-4"></div>
<div className="h-6 bg-muted rounded mb-2"></div>
<div className="h-4 bg-muted rounded w-2/3"></div>
</div>
))}
</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"}`}>
{articles.map((article) => (
<ArticleCard
key={article.id}
article={article}
outlet={outlet}
viewMode={viewMode}
/>
))}
</div>
) : (
<Card>
<CardContent className="p-12 text-center">
<i className="fas fa-newspaper text-4xl text-muted-foreground mb-4"></i>
<h3 className="text-xl font-semibold mb-2">No Articles Yet</h3>
<p className="text-muted-foreground">
This media outlet doesn't have any published articles yet. Check back later!
</p>
</CardContent>
</Card>
)}
</div>
</main>
</div>
);
}