58 lines
2.5 KiB
TypeScript
58 lines
2.5 KiB
TypeScript
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">
|
|
{/* Write */}
|
|
<button
|
|
type="button"
|
|
className={`bottom-nav-btn ${isActive('/') ? 'bottom-nav-btn-active' : ''}`}
|
|
onClick={() => navigate('/')}
|
|
aria-label="Write"
|
|
>
|
|
{/* Pencil / edit icon */}
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
|
</svg>
|
|
<span>Write</span>
|
|
</button>
|
|
|
|
{/* History */}
|
|
<button
|
|
type="button"
|
|
className={`bottom-nav-btn ${isActive('/history') ? 'bottom-nav-btn-active' : ''}`}
|
|
onClick={() => navigate('/history')}
|
|
aria-label="History"
|
|
>
|
|
{/* Clock icon */}
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<polyline points="12 6 12 12 16 14" />
|
|
</svg>
|
|
<span>History</span>
|
|
</button>
|
|
|
|
{/* Settings */}
|
|
<button
|
|
type="button"
|
|
className={`bottom-nav-btn ${isActive('/settings') ? 'bottom-nav-btn-active' : ''}`}
|
|
onClick={() => navigate('/settings')}
|
|
aria-label="Settings"
|
|
>
|
|
{/* Gear icon */}
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
|
</svg>
|
|
<span>Settings</span>
|
|
</button>
|
|
</nav>
|
|
)
|
|
}
|