d8491366cf
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
44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import { Users, Hash, Building } from "lucide-react";
|
|
|
|
interface CategoryTabsProps {
|
|
selectedCategory: string;
|
|
onCategoryChange: (category: string) => void;
|
|
}
|
|
|
|
const categories = [
|
|
{ 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="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>
|
|
);
|
|
}
|