WooNooW

Files

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