text: import React from 'react';
  import { InertiaLink, usePage } from '@inertiajs/inertia-react';
  import Layout from '@/Shared/Layout';
  import Icon from '@/Shared/Icon';
  import Pagination from '@/Shared/Pagination';
  import SearchFilter from '@/Shared/SearchFilter';
  
  const Index = () => {
    const { merchants } = usePage().props;
    const {
      data,
      meta: { links }
    } = merchants;
    return (
      <div>
        <h1 className="mb-8 text-3xl font-bold">Merchants</h1>
        <div className="flex items-center justify-between mb-6">
          <SearchFilter />
          <InertiaLink
            className="btn-indigo focus:outline-none"
            href={route('merchants.create')}
          >
            <span>Create</span>
            <span className="hidden md:inline"> Merhcant Profile</span>
          </InertiaLink>
        </div>
        <div className="overflow-x-auto bg-white rounded shadow">
          <table className="w-full whitespace-nowrap">
            <thead>
              <tr className="font-bold text-left">
                <th className="px-6 pt-5 pb-4">Name</th>
                <th className="px-6 pt-5 pb-4" colSpan="2">
                  Phone
                </th>
              </tr>
            </thead>
            <tbody>
              {data.map(({ id, name, phone }) => (
                <tr
                  key={id}
                  className="hover:bg-gray-100 focus-within:bg-gray-100"
                >
                  <td className="border-t">
                    <InertiaLink
                      href={route('merchants.edit', id)}
                      className="flex items-center px-6 py-4 focus:text-indigo-700 focus:outline-none"
                    >
                      {name}
                      
                    </InertiaLink>
                  </td>
                  <td className="border-t">
                    <InertiaLink
                      tabIndex="-1"
                      href={route('merchants.edit', id)}
                      className="flex items-center px-6 py-4 focus:text-indigo focus:outline-none"
                    >
                      {phone}
                    </InertiaLink>
                  </td>
                  <td className="w-px border-t">
                    <InertiaLink
                      tabIndex="-1"
                      href={route('merchants.edit', id)}
                      className="flex items-center px-4 focus:outline-none"
                    >
                      <Icon
                        name="cheveron-right"
                        className="block w-6 h-6 text-gray-400 fill-current"
                      />
                    </InertiaLink>
                  </td>
                </tr>
              ))}
              {data.length === 0 && (
                <tr>
                  <td className="px-6 py-4 border-t" colSpan="4">
                    No merchants found.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
        <Pagination links={links} />
      </div>
    );
  };
  
  Index.layout = page => <Layout title="Merchants" children={page} />;
  
  export default Index;
  