This is a pixel-perfect implementation of a page selector dropdown component from Figma design.

Company: Ellty (Taskina Pty Ltd) Position: Frontend/Full Stack Developer Date: 03.02.2024

• Dropdown Menu - Click to open/close page selector
• Master Checkbox - "All pages" checkbox controls all individual pages
• Individual Page Selection - Select/deselect specific pages (Page 1-4)
• Interactive States - All variants implemented:
  • 9 Checkbox variants (default, hover, press, checked states)
  • 8 List item variants (hover, press, selected states)
  • 3 Button variants (default, hover, press)
• Pixel-Perfect Design - Matches Figma specifications exactly
• Smooth Interactions - Instant transitions as per design

• React 18.3.1
• Vite 5.4.2
• CSS Modules
• Montserrat Font

• Modal Card: 370×326px with shadow
• Checkboxes: 25×25px, 6px border radius
• Button: 340×40px, #FFCE22 background
• Font: Montserrat 400/500, 14px
• Colors:
  • Primary: #FFCE22 (yellow)
  • Checked: #2469F6 (blue)
  • Text: #1F2128
  • Border: #EEEEEE

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

src/
├── components/
│   ├── PageSelectorModal.jsx
│   └── PageSelectorModal.css
├── App.jsx
├── App.css
├── main.jsx
└── index.css

import PageSelectorModal from './components/PageSelectorModal';

function App() {
  return <PageSelectorModal />;
}

• Clean, readable code
• Fully functional interactive elements
• Click outside to close dropdown
• State management with React hooks
• Accessibility considerations
• Responsive to all user interactions

Developed by: [Your Name] Live Demo: [Vercel URL will be here] GitHub: [Repository URL]