126 lines
4.3 KiB
TypeScript
126 lines
4.3 KiB
TypeScript
import React from 'react';
|
|
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
|
|
import Dashboard from './components/Dashboard';
|
|
import ShopList from './components/ShopList';
|
|
import ProductList from './components/ProductList';
|
|
import ShoppingEventList from './components/ShoppingEventList';
|
|
import ShoppingEventForm from './components/ShoppingEventForm';
|
|
import BrandList from './components/BrandList';
|
|
import GroceryList from './components/GroceryList';
|
|
import GroceryCategoryList from './components/GroceryCategoryList';
|
|
|
|
function Navigation() {
|
|
const location = useLocation();
|
|
|
|
const isActive = (path: string) => {
|
|
return location.pathname === path;
|
|
};
|
|
|
|
return (
|
|
<nav className="bg-blue-600 shadow-lg">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<div className="flex justify-between h-16">
|
|
<div className="flex space-x-8">
|
|
<Link
|
|
to="/"
|
|
className={`inline-flex items-center px-1 pt-1 text-sm font-medium ${
|
|
isActive('/')
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-blue-100 hover:text-white'
|
|
}`}
|
|
>
|
|
Dashboard
|
|
</Link>
|
|
<Link
|
|
to="/shopping-events"
|
|
className={`inline-flex items-center px-1 pt-1 text-sm font-medium ${
|
|
isActive('/shopping-events')
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-blue-100 hover:text-white'
|
|
}`}
|
|
>
|
|
Shopping Events
|
|
</Link>
|
|
<Link
|
|
to="/shops"
|
|
className={`inline-flex items-center px-1 pt-1 text-sm font-medium ${
|
|
isActive('/shops')
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-blue-100 hover:text-white'
|
|
}`}
|
|
>
|
|
Shops
|
|
</Link>
|
|
<Link
|
|
to="/products"
|
|
className={`inline-flex items-center px-1 pt-1 text-sm font-medium ${
|
|
isActive('/products')
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-blue-100 hover:text-white'
|
|
}`}
|
|
>
|
|
Products
|
|
</Link>
|
|
<Link
|
|
to="/brands"
|
|
className={`inline-flex items-center px-1 pt-1 text-sm font-medium ${
|
|
isActive('/brands')
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-blue-100 hover:text-white'
|
|
}`}
|
|
>
|
|
Brands
|
|
</Link>
|
|
<Link
|
|
to="/groceries"
|
|
className={`inline-flex items-center px-1 pt-1 text-sm font-medium ${
|
|
isActive('/groceries')
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-blue-100 hover:text-white'
|
|
}`}
|
|
>
|
|
Groceries
|
|
</Link>
|
|
<Link
|
|
to="/categories"
|
|
className={`inline-flex items-center px-1 pt-1 text-sm font-medium ${
|
|
isActive('/categories')
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-blue-100 hover:text-white'
|
|
}`}
|
|
>
|
|
Categories
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<Router>
|
|
<div className="min-h-screen bg-gray-50">
|
|
<Navigation />
|
|
<main className="py-10">
|
|
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<Routes>
|
|
<Route path="/" element={<Dashboard />} />
|
|
<Route path="/shopping-events" element={<ShoppingEventList />} />
|
|
<Route path="/shopping-events/new" element={<ShoppingEventForm />} />
|
|
<Route path="/shopping-events/:id/edit" element={<ShoppingEventForm />} />
|
|
<Route path="/shops" element={<ShopList />} />
|
|
<Route path="/products" element={<ProductList />} />
|
|
<Route path="/brands" element={<BrandList />} />
|
|
<Route path="/groceries" element={<GroceryList />} />
|
|
<Route path="/categories" element={<GroceryCategoryList />} />
|
|
</Routes>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</Router>
|
|
);
|
|
}
|
|
|
|
export default App;
|