import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head } from '@inertiajs/react'; import { SetStateAction, useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faArrowRight } from '@fortawesome/free-solid-svg-icons' interface CustomerProps { customers: [{ id: number name: string }], }; interface Customer { id: number name: string }; export default function Dashboard({customers}: CustomerProps) { const [searchItem, setSearchItem] = useState('') const [activeTab, setActiveTab] = useState('') const [filteredCustomers, setFilteredCustomers] = useState(customers) const letterArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","Å","Ä","Ö"]; const handleInputChange = (e: any) => { const searchTerm = e.target.value; setSearchItem(searchTerm) const filteredItems = customers.filter((customer) => customer.name.toLowerCase().includes(searchTerm.toLowerCase()) ); setFilteredCustomers(filteredItems); } const handleInputClick = (searchTerm: any) => { const filteredItems = customers.filter((customer) => customer.name.toLowerCase().startsWith(searchTerm.toLowerCase()) ); setFilteredCustomers(filteredItems); } return (

Deltagare

    { letterArray && letterArray.map( letter => { return
  • [setActiveTab(letter) ,handleInputClick(letter)]}> {letter}
    • }) }
  • [setActiveTab(""), setFilteredCustomers(customers), setSearchItem("") ]}> Rensa
{filteredCustomers && filteredCustomers.map( customer => { return

{customer.name}

 })}
); }