mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-03 12:46:49 +02:00
maziggy
42cdfdbd74
- Add hamburger drawer navigation for mobile (< 768px) - Create useIsMobile hook for responsive breakpoint detection - Create useLongPress hook for touch gesture context menus - Update Button component with 44px min-height for WCAG touch compliance - Update Toggle component with larger mobile size (44x28px) - Add responsive padding (p-4 md:p-8) to all pages - Update ArchivesPage with mobile menu button and horizontal scroll filters - Update SettingsPage with stacked column layout on mobile - Increase drag handle sizes for touch-friendly reordering - Add CSS utilities for touch-manipulation and safe-area insets
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
interface ToggleProps {
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function Toggle({ checked, onChange, disabled }: ToggleProps) {
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!disabled) {
|
|
onChange(!checked);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={checked}
|
|
disabled={disabled}
|
|
onClick={handleClick}
|
|
className={`relative inline-flex w-11 h-7 md:w-9 md:h-5 rounded-full transition-colors flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-bambu-green focus:ring-offset-2 focus:ring-offset-bambu-dark ${
|
|
disabled
|
|
? 'bg-bambu-dark-tertiary/50 cursor-not-allowed opacity-50'
|
|
: checked
|
|
? 'bg-bambu-green cursor-pointer'
|
|
: 'bg-bambu-dark-tertiary cursor-pointer hover:bg-bambu-dark-tertiary/80'
|
|
}`}
|
|
>
|
|
<span
|
|
className={`pointer-events-none absolute top-[3px] md:top-[2px] left-[3px] md:left-[2px] w-5 h-5 md:w-4 md:h-4 bg-white rounded-full shadow transition-transform duration-200 ease-in-out ${
|
|
checked ? 'translate-x-4' : 'translate-x-0'
|
|
}`}
|
|
/>
|
|
</button>
|
|
);
|
|
}
|