Spaces:
Running
Running
| import React from 'react'; | |
| const DeviceFilter = ({ selectedType, onSelectType }) => { | |
| const filterOptions = [ | |
| { id: 'all', label: 'All Devices' }, | |
| { id: 'iphone', label: 'iPhone' }, | |
| { id: 'ipad', label: 'iPad' }, | |
| { id: 'ipod', label: 'iPod' }, | |
| { id: 'legacy', label: 'Legacy Devices' }, | |
| ]; | |
| return ( | |
| <div className="flex flex-wrap gap-2 mb-6"> | |
| {filterOptions.map((option) => ( | |
| <button | |
| key={option.id} | |
| onClick={() => onSelectType(option.id)} | |
| className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${ | |
| selectedType === option.id | |
| ? 'bg-blue-600 text-white shadow-md' | |
| : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-300' | |
| }`} | |
| > | |
| {option.label} | |
| </button> | |
| ))} | |
| </div> | |
| ); | |
| }; |