35 lines
976 B
JavaScript
35 lines
976 B
JavaScript
import { useContext } from 'react';
|
|
import { StoreContext } from '../../context/StoreContext';
|
|
import '../../styles/components/StoreTabs.css';
|
|
|
|
export default function StoreTabs() {
|
|
const { stores, activeStore, setActiveStore, loading } = useContext(StoreContext);
|
|
|
|
if (!stores || stores.length === 0) {
|
|
return (
|
|
<div className="store-tabs">
|
|
<div className="store-tabs-empty">
|
|
No stores available for this household
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="store-tabs">
|
|
<div className="store-tabs-container">
|
|
{stores.map(store => (
|
|
<button
|
|
key={store.id}
|
|
className={`store-tab ${store.id === activeStore?.id ? 'active' : ''}`}
|
|
onClick={() => setActiveStore(store)}
|
|
disabled={loading}
|
|
>
|
|
<span className="store-name">{store.display_name || store.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|