dwindown
7455d99ab8
feat: Add vertical tab layout to Coupon form
Implemented VerticalTabForm component for better UX
Created Components:
1. VerticalTabForm.tsx - Reusable vertical tab layout
- Left sidebar with navigation (250px on desktop)
- Right content area (scrollable)
- Scroll spy - auto-highlights active section
- Click to scroll to section
- Smooth scrolling behavior
- Icons support for tabs
2. FormSection component
- Wrapper for form sections
- Proper ref forwarding
- Section ID tracking
Updated CouponForm:
- Added vertical tab navigation
- 3 sections: General, Usage restrictions, Usage limits
- Icons: Settings, ShieldCheck, BarChart3
- Narrower content area (better readability)
- Desktop-only (lg:block) - mobile keeps original layout
Features:
✅ Scroll spy - active tab follows scroll
✅ Click navigation - smooth scroll to section
✅ Visual hierarchy - clear section separation
✅ Better space utilization
✅ Reduced form width for readability
✅ Professional UI like Shopify/Stripe
Layout:
- Desktop: 250px sidebar + remaining content
- Content: max-h-[calc(100vh-200px)] scrollable
- Sticky sidebar (top-4)
- Active state: bg-primary text-primary-foreground
- Hover state: bg-muted hover:text-foreground
Next: Apply same pattern to Products form
2025-11-20 16:00:03 +07:00
..
2025-11-04 11:19:00 +07:00
2025-11-20 16:00:03 +07:00
2025-11-05 18:54:41 +07:00
2025-11-13 10:13:17 +07:00
2025-11-04 11:19:00 +07:00
2025-11-13 11:50:38 +07:00
2025-11-15 20:05:50 +07:00
2025-11-13 09:50:33 +07:00
2025-11-13 13:47:22 +07:00
2025-11-13 15:44:06 +07:00
2025-11-13 11:57:55 +07:00
2025-11-13 12:20:41 +07:00
2025-11-13 12:20:41 +07:00
2025-11-04 11:19:00 +07:00
2025-11-04 11:19:00 +07:00
2025-11-04 11:19:00 +07:00
2025-11-04 11:19:00 +07:00
2025-11-04 11:19:00 +07:00
2025-11-13 10:34:07 +07:00
2025-11-04 11:19:00 +07:00