Carlos
32 lines
1.1 KiB
React
32 lines
1.1 KiB
React
import { useState } from 'react'
|
|
|
|
const CATEGORIES = [
|
|
{ id: 'all', name: 'Todos', icon: '📱' },
|
|
{ id: 'produtividade', name: 'Produtividade', icon: '⚡' },
|
|
{ id: 'utilidades', name: 'Utilidades', icon: '🔧' },
|
|
{ id: 'games', name: 'Games', icon: '🎮' },
|
|
{ id: 'ferramentas', name: 'Ferramentas', icon: '🛠️' },
|
|
{ id: 'educacao', name: 'Educação', icon: '📚' },
|
|
{ id: 'entretenimento', name: 'Entretenimento', icon: '🎬' }
|
|
]
|
|
|
|
export default function CategoryMenu({ selectedCategory, onSelect }) {
|
|
return (
|
|
<div className="flex flex-wrap gap-2 mb-6">
|
|
{CATEGORIES.map((category) => (
|
|
<button
|
|
key={category.id}
|
|
onClick={() => onSelect(category.id)}
|
|
className={`px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 ${
|
|
selectedCategory === category.id
|
|
? 'bg-blue-600 text-white shadow-md'
|
|
: 'bg-white text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<span>{category.icon}</span>
|
|
<span>{category.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
} |