Update site appearance and user authentication functionality
Implement a new login system, update UI elements, and enable static asset serving for images. 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/InMLMqG
This commit is contained in:
kimjaehyeon0101
@ -1,4 +1,4 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Users, Hash, Building } from "lucide-react";
|
||||
|
||||
interface CategoryTabsProps {
|
||||
selectedCategory: string;
|
||||
@ -6,33 +6,36 @@ interface CategoryTabsProps {
|
||||
}
|
||||
|
||||
const categories = [
|
||||
{ id: "People", label: "People", icon: "fas fa-users", count: 24 },
|
||||
{ id: "Topics", label: "Topics", icon: "fas fa-hashtag", count: 20 },
|
||||
{ id: "Companies", label: "Companies", icon: "fas fa-building", count: 27 },
|
||||
{ id: "People", label: "People", Icon: Users, count: 36 },
|
||||
{ id: "Topics", label: "Topics", Icon: Hash, count: 24 },
|
||||
{ id: "Companies", label: "Companies", Icon: Building, count: 27 },
|
||||
];
|
||||
|
||||
export default function CategoryTabs({ selectedCategory, onCategoryChange }: CategoryTabsProps) {
|
||||
return (
|
||||
<div className="mb-8">
|
||||
<div className="border-b border-border">
|
||||
<nav className="flex space-x-8">
|
||||
{categories.map((category) => (
|
||||
<Button
|
||||
key={category.id}
|
||||
variant="ghost"
|
||||
className={`px-6 py-3 font-semibold rounded-t-lg transition-all ${
|
||||
selectedCategory === category.id
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
onClick={() => onCategoryChange(category.id)}
|
||||
data-testid={`tab-${category.id}`}
|
||||
>
|
||||
<i className={`${category.icon} mr-2`}></i>
|
||||
{category.label}
|
||||
<span className="ml-2 text-sm opacity-75">({category.count})</span>
|
||||
</Button>
|
||||
))}
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 z-40">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<nav className="flex justify-around py-2">
|
||||
{categories.map((category) => {
|
||||
const { Icon } = category;
|
||||
const isSelected = selectedCategory === category.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => onCategoryChange(category.id)}
|
||||
className={`flex flex-col items-center py-2 px-4 rounded-lg transition-colors ${
|
||||
isSelected
|
||||
? "text-blue-600 dark:text-blue-400"
|
||||
: "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
}`}
|
||||
data-testid={`tab-${category.id}`}
|
||||
>
|
||||
<Icon className={`h-6 w-6 mb-1 ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} />
|
||||
<span className="text-xs font-medium">{category.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,9 +6,10 @@ import type { MediaOutlet } from "@shared/schema";
|
||||
|
||||
interface MediaOutletCardProps {
|
||||
outlet: MediaOutlet;
|
||||
viewMode?: "grid" | "list";
|
||||
}
|
||||
|
||||
export default function MediaOutletCard({ outlet }: MediaOutletCardProps) {
|
||||
export default function MediaOutletCard({ outlet, viewMode = "list" }: MediaOutletCardProps) {
|
||||
const [showProfile, setShowProfile] = useState(false);
|
||||
|
||||
const handleCardClick = () => {
|
||||
@ -21,19 +22,26 @@ export default function MediaOutletCard({ outlet }: MediaOutletCardProps) {
|
||||
};
|
||||
|
||||
const getOutletImage = () => {
|
||||
if (outlet.imageUrl) return outlet.imageUrl;
|
||||
if (outlet.imageUrl) {
|
||||
// Handle @assets/ paths
|
||||
if (outlet.imageUrl.startsWith('@assets/')) {
|
||||
// Convert @assets/ to a proper import path or static asset path
|
||||
return outlet.imageUrl.replace('@assets/', '/attached_assets/');
|
||||
}
|
||||
return outlet.imageUrl;
|
||||
}
|
||||
|
||||
// Default images based on category
|
||||
if (outlet.category === "people") {
|
||||
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") {
|
||||
} else if (outlet.category === "Companies") {
|
||||
return null; // Use initial letter
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const getOutletIcon = () => {
|
||||
if (outlet.category === "topics") {
|
||||
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" :
|
||||
@ -45,68 +53,70 @@ export default function MediaOutletCard({ outlet }: MediaOutletCardProps) {
|
||||
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"
|
||||
"Tech Leader": "bg-blue-100 text-blue-800",
|
||||
"CEO": "bg-purple-100 text-purple-800",
|
||||
"Crypto": "bg-yellow-100 text-yellow-800",
|
||||
"Politics": "bg-red-100 text-red-800",
|
||||
"AI": "bg-green-100 text-green-800",
|
||||
"Finance": "bg-indigo-100 text-indigo-800",
|
||||
"Blockchain": "bg-cyan-100 text-cyan-800",
|
||||
"Economy": "bg-orange-100 text-orange-800",
|
||||
"Football": "bg-emerald-100 text-emerald-800"
|
||||
};
|
||||
return colors[tag as keyof typeof colors] || "bg-muted text-muted-foreground";
|
||||
return colors[tag as keyof typeof colors] || "bg-gray-100 text-gray-800";
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
className="card-hover cursor-pointer"
|
||||
{/* Clean List Style like screenshots */}
|
||||
<div
|
||||
className="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
|
||||
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}
|
||||
<div className="flex items-center space-x-3">
|
||||
{/* Profile Image */}
|
||||
{getOutletImage() ? (
|
||||
<img
|
||||
src={getOutletImage()!}
|
||||
alt={outlet.name}
|
||||
className="w-12 h-12 rounded-full object-cover flex-shrink-0"
|
||||
onError={(e) => {
|
||||
console.log('Image failed to load:', getOutletImage());
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className={`w-12 h-12 ${outlet.category === 'Companies' ? 'bg-blue-500' : outlet.category === 'Topics' ? 'bg-green-500' : 'bg-purple-500'} rounded-full flex items-center justify-center flex-shrink-0`}>
|
||||
{outlet.category === 'Companies' ? (
|
||||
<span className="text-white font-bold text-lg">
|
||||
{outlet.name.charAt(0)}
|
||||
</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>
|
||||
) : (
|
||||
<i className={`${getOutletIcon()} text-white text-lg`}></i>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white text-base leading-tight">
|
||||
{outlet.name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-1">
|
||||
{outlet.description}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Tag and Info */}
|
||||
<div className="flex items-center space-x-2 flex-shrink-0">
|
||||
<span className={`text-xs px-2 py-1 rounded-full font-medium ${getTagColor()}`}>
|
||||
{outlet.tags?.[0] || outlet.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProfileModal
|
||||
outlet={outlet}
|
||||
|
||||
Reference in New Issue
Block a user