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
2025-09-29 16:29:07 +00:00
parent 9633469631
commit d8491366cf
16 changed files with 331 additions and 167 deletions

View File

@ -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>