GW_MC/otter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance layout with AccountDisplay component and improved BottomNavigation

Browse Source
This commit is contained in:
GW_MC
2026-05-28 05:48:14 +00:00
parent 37b3c23832
commit 56ecc399df
1 changed files with 45 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/layout.tsx
View File

@@ -1,37 +1,61 @@
import { Home, Bell, FileText, User, Menu } from 'lucide-react'; import { Home, Bell, FileText, User, Menu, CirclePlus } from 'lucide-react';
import { useState } from 'react'; import { useMemo, useState } from 'react';
import { Button } from './components/ui/button'; import { Button } from './components/ui/button';
import { useAppStore } from './store';
import { useShallow } from 'zustand/react/shallow';
function AccountDisplay({ info }: { info: { name: string; balance: string } | null | undefined }) {
const name = useMemo(() => info?.name ?? 'No account selected', [info]);
const balance = useMemo(() => info?.balance ?? '--', [info]);
return (
<>
<p className="text-sm">{name}</p>
<p className="text-xs font-bold">${balance}</p>
</>
);
}
function TopNavigation() { function TopNavigation() {
const [isMenuOpen, setIsMenuOpen] = useState(false); const { accounts, selectedAccountId } = useAppStore(useShallow((state) => ({ accounts: state.accounts, selectedAccountId: state.selectedAccountId })));
const selectedAccount = accounts.find((account) => account.id === selectedAccountId);
return ( return (
<div className="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between shadow-sm"> <div className="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between shadow-sm">
<div className="flex-1"> <div className="flex-1">
<p className="text-sm text-gray-600">Cisko bank</p> <AccountDisplay info={selectedAccount ? { name: selectedAccount.name, balance: selectedAccount.balance } : null} />
<p className="text-2xl font-bold text-gray-900">$35,500</p>
</div> </div>
<Button variant="ghost" size="icon" onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-gray-700">
<Menu className="h-6 w-6" />
</Button>
</div> </div>
); );
} }
type BottomNavigationButtonProps = {
icon: React.ComponentType<{ className?: string; fill?: string }>;
label?: string;
isSelected?: boolean;
};
function BottomNavigationButton({ icon: Icon, label, isSelected }: BottomNavigationButtonProps) {
return (
<Button variant="ghost" size="icon" className="text-gray-600 hover:text-blue-500 flex flex-col items-center">
<Icon className={`h-8 w-8`} fill={isSelected ? 'blue-500' : 'none'} />
{label && <span className="text-xs mt-1">{label}</span>}
</Button>
);
}
function BottomNavigation() { function BottomNavigation() {
return ( return (
<div className="bg-white border-t border-gray-200 px-6 py-4 flex items-center justify-around"> <div className="bg-white border-t border-gray-200 px-6 pb-4 pt-2 flex items-center justify-around">
<Button variant="ghost" size="icon" className="text-gray-600 hover:text-blue-500"> <BottomNavigationButton icon={Home} />
<Home className="h-6 w-6" /> <BottomNavigationButton icon={Bell} />
</Button> <div className="pb-2">
<Button variant="ghost" size="icon" className="text-gray-600 hover:text-yellow-500"> <Button variant="ghost" size="icon-lg" asChild className="text-gray-600 hover:text-blue-500">
<Bell className="h-6 w-6" /> <CirclePlus className="h-12 w-12" />
</Button> </Button>
<Button variant="ghost" size="icon" className="text-gray-600 hover:text-blue-500"> </div>
<FileText className="h-6 w-6" /> <BottomNavigationButton icon={FileText} />
</Button> <BottomNavigationButton icon={User} />
<Button variant="ghost" size="icon" className="text-gray-600 hover:text-blue-500">
<User className="h-6 w-6" />
</Button>
</div> </div>
); );
} }