import { useState } from 'react'; import { Search } from 'lucide-react';interface Account { name: string; skin: string; image: string; }const accounts: Account[] = [ { name: 'Cuenta 1', skin: 'Ashe', image: 'https://example.com/ashe.png' }, { name: 'Cuenta 2', skin: 'Yi', image: 'https://example.com/yi.png' }, { name: 'Cuenta 3', skin: 'Lux', image: 'https://example.com/lux.png' }, ];const SearchAccount = () => { const [searchTerm, setSearchTerm] = useState(''); const [searchResults, setSearchResults] = useState([]);const handleSearch = (e: React.FormEvent) => { e.preventDefault(); const results = accounts.filter((account) => account.skin.toLowerCase().includes(searchTerm.toLowerCase())); setSearchResults(results); };return (

Buscar cuenta de LoL

setSearchTerm(e.target.value)} placeholder="Ingrese el nombre de la skin" className="w-full p-2 pl-10 text-sm text-gray-700" />
{searchResults.length > 0 ? (

Resultados de la búsqueda

    {searchResults.map((account) => (
  • {account.name}

    {account.skin}

  • ))}
) : (

No se encontraron resultados

)}
); };export default SearchAccount;