Mannu
8a75adb94e
- Convert Quick Log from grid-cols-4 to horizontal scroll strip so
it scales to any number of actions without layout breakage
- Add Wardrobe 👗 shortcut linking directly to /wardrobe/add,
saving mama the Menu → Wardrobe → Add Garment 3-tap journey
- Fix: replace non-existent `no-scrollbar` class with `scrollbar-hide`
across page.tsx, wardrobe pages, memories page, and TabBar component
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
37 lines
978 B
TypeScript
37 lines
978 B
TypeScript
interface Tab {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
interface Props {
|
|
tabs: Tab[];
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
danger?: string;
|
|
}
|
|
|
|
export function TabBar({ tabs, value, onChange, danger }: Props) {
|
|
return (
|
|
<div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
|
|
{tabs.map(tab => {
|
|
const isActive = tab.value === value;
|
|
const isDanger = danger && tab.value === danger;
|
|
return (
|
|
<button
|
|
key={tab.value}
|
|
onClick={() => onChange(tab.value)}
|
|
className={`px-4 py-2 rounded-xl whitespace-nowrap flex-shrink-0 text-sm font-medium transition-colors ${
|
|
isActive
|
|
? isDanger
|
|
? "bg-red-500 text-white"
|
|
: "bg-rose-400 text-white"
|
|
: "bg-white dark:bg-gray-800 dark:text-white"
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|