Add bottom navigation, History and Settings pages with improved UI styling

src/components/BottomNav.tsx

@@ -0,0 +1,48 @@
+import { useNavigate, useLocation } from 'react-router-dom'
+
+export default function BottomNav() {
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const isActive = (path: string) => location.pathname === path
+
+  return (
+    <nav className="bottom-nav">
+      <button 
+        type="button" 
+        className={`bottom-nav-btn ${isActive('/') ? 'bottom-nav-btn-active' : ''}`}
+        onClick={() => navigate('/')}
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
+          <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
+          <path d="M2 2l7.586 7.586"></path>
+          <circle cx="11" cy="11" r="2"></circle>
+        </svg>
+        <span>Write</span>
+      </button>
+      <button 
+        type="button" 
+        className={`bottom-nav-btn ${isActive('/history') ? 'bottom-nav-btn-active' : ''}`}
+        onClick={() => navigate('/history')}
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+          <polyline points="9 22 9 12 15 12 15 22"></polyline>
+        </svg>
+        <span>History</span>
+      </button>
+      <button 
+        type="button" 
+        className={`bottom-nav-btn ${isActive('/settings') ? 'bottom-nav-btn-active' : ''}`}
+        onClick={() => navigate('/settings')}
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="3"></circle>
+          <path d="M12 1v6m0 6v6m5.196-15.804l-4.243 4.243m-5.657 5.657l-4.243 4.243M23 12h-6m-6 0H1m15.804 5.196l-4.243-4.243m-5.657-5.657L2.661 2.661"></path>
+        </svg>
+        <span>Settings</span>
+      </button>
+    </nav>
+  )
+}