feat: enhance layout with AccountDisplay component and improved BottomNavigation

src/layout.tsx

@@ -1,38 +1,62 @@
-import { Home, Bell, FileText, User, Menu } from 'lucide-react';
-import { useState } from 'react';
+import { Home, Bell, FileText, User, Menu, CirclePlus } from 'lucide-react';
+import { useMemo, useState } from 'react';
 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() {
-  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 (
     <div className="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between shadow-sm">
       <div className="flex-1">
-        <p className="text-sm text-gray-600">Cisko bank</p>
-        <p className="text-2xl font-bold text-gray-900">$35,500</p>
+        <AccountDisplay info={selectedAccount ? { name: selectedAccount.name, balance: selectedAccount.balance } : null} />
       </div>
-      <Button variant="ghost" size="icon" onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-gray-700">
-        <Menu className="h-6 w-6" />
+    </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>
-    </div>
   );
 }
 
 function BottomNavigation() {
   return (
-    <div className="bg-white border-t border-gray-200 px-6 py-4 flex items-center justify-around">
-      <Button variant="ghost" size="icon" className="text-gray-600 hover:text-blue-500">
-        <Home className="h-6 w-6" />
-      </Button>
-      <Button variant="ghost" size="icon" className="text-gray-600 hover:text-yellow-500">
-        <Bell className="h-6 w-6" />
-      </Button>
-      <Button variant="ghost" size="icon" className="text-gray-600 hover:text-blue-500">
-        <FileText className="h-6 w-6" />
-      </Button>
-      <Button variant="ghost" size="icon" className="text-gray-600 hover:text-blue-500">
-        <User className="h-6 w-6" />
+    <div className="bg-white border-t border-gray-200 px-6 pb-4 pt-2 flex items-center justify-around">
+      <BottomNavigationButton icon={Home} />
+      <BottomNavigationButton icon={Bell} />
+      <div className="pb-2">
+        <Button variant="ghost" size="icon-lg" asChild className="text-gray-600 hover:text-blue-500">
+          <CirclePlus className="h-12 w-12" />
         </Button>
       </div>
+      <BottomNavigationButton icon={FileText} />
+      <BottomNavigationButton icon={User} />
+    </div>
   );
 }