feat: Initialize GreenLens project with core dependencies and structure
Sets up the project using Vite, React, and TypeScript. Includes initial configuration for Tailwind CSS, Gemini API integration, and local storage management. Defines basic types for plant data and UI elements. The README is updated with local development instructions.
This commit is contained in:
51
components/TabBar.tsx
Normal file
51
components/TabBar.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import { Tab } from '../types';
|
||||
import { LayoutGrid, Search, User } from 'lucide-react';
|
||||
|
||||
interface TabBarProps {
|
||||
currentTab: Tab;
|
||||
onTabChange: (tab: Tab) => void;
|
||||
labels: {
|
||||
home: string;
|
||||
search: string;
|
||||
settings: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const TabBar: React.FC<TabBarProps> = ({ currentTab, onTabChange, labels }) => {
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-stone-900 border-t border-stone-200 dark:border-stone-800 pb-safe pt-2 px-6 z-40">
|
||||
<div className="flex justify-between items-center h-16 max-w-sm mx-auto">
|
||||
<button
|
||||
onClick={() => onTabChange(Tab.HOME)}
|
||||
className={`flex flex-col items-center justify-center w-16 space-y-1.5 ${
|
||||
currentTab === Tab.HOME ? 'text-stone-900 dark:text-stone-100' : 'text-stone-400 dark:text-stone-600'
|
||||
}`}
|
||||
>
|
||||
<LayoutGrid size={24} strokeWidth={currentTab === Tab.HOME ? 2.5 : 2} />
|
||||
<span className="text-[10px] font-medium">{labels.home}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onTabChange(Tab.SEARCH)}
|
||||
className={`flex flex-col items-center justify-center w-16 space-y-1.5 ${
|
||||
currentTab === Tab.SEARCH ? 'text-stone-900 dark:text-stone-100' : 'text-stone-400 dark:text-stone-600'
|
||||
}`}
|
||||
>
|
||||
<Search size={24} strokeWidth={currentTab === Tab.SEARCH ? 2.5 : 2} />
|
||||
<span className="text-[10px] font-medium">{labels.search}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onTabChange(Tab.SETTINGS)}
|
||||
className={`flex flex-col items-center justify-center w-16 space-y-1.5 ${
|
||||
currentTab === Tab.SETTINGS ? 'text-stone-900 dark:text-stone-100' : 'text-stone-400 dark:text-stone-600'
|
||||
}`}
|
||||
>
|
||||
<User size={24} strokeWidth={currentTab === Tab.SETTINGS ? 2.5 : 2} />
|
||||
<span className="text-[10px] font-medium">{labels.settings}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user