text: import React from "react";
  import Authenticated from "@/Layouts/Authenticated";
  import { Head, Link } from "@inertiajs/inertia-react";
  
  const Index = ({ auth, errors, status, competitions }) => {
      return (
          <Authenticated
              auth={auth}
              errors={errors}
              header={
                  <h2 className="font-semibold text-xl text-gray-800 leading-tight">
                      Competitions
                  </h2>
              }
          >
              <Head title="Competitions" />
  
              {status && (
                  <div className="my-12 flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
                      <div className="flex items-center justify-center w-12 bg-green-500">
                          <svg
                              className="w-6 h-6 text-white fill-current"
                              viewBox="0 0 40 40"
                              xmlns="http://www.w3.org/2000/svg"
                          >
                              <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z" />
                          </svg>
                      </div>
  
                      <div className="px-4 py-2 -mx-3">
                          <div className="mx-3">
                              <span className="font-semibold text-green-500 dark:text-green-400">
                                  Success
                              </span>
                              <p className="text-sm text-gray-600 dark:text-gray-200">
                                  {status}
                              </p>
                          </div>
                      </div>
                  </div>
              )}
  
              <div className="max-w-7xl pt-12 mx-auto sm:px-6 lg:px-8">
                  <div className="flex flex-col">
                      <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                              <div className="flex justify-between items-center px-4 py-5 sm:p-6">
                                  <h2 className="font-semibold text-xl text-gray-800 leading-tight">
                                      List of Competitions
                                  </h2>
                                  <Link
                                      href={route(
                                          "dashboard.competitions.create"
                                      )}
                                      className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                                  >
                                      Add New Competition
                                  </Link>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
  
              <div className="pt-4 pb-12">
                  <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                      <div className="flex flex-col">
                          <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                              <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                                  <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                                      {0 < competitions.length && (
                                          <table className="min-w-full divide-y divide-gray-200">
                                              <thead className="bg-gray-50">
                                                  <tr>
                                                      <th
                                                          scope="col"
                                                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                                      >
                                                          Competition
                                                      </th>
                                                      <th
                                                          scope="col"
                                                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                                      >
                                                          Location
                                                      </th>
                                                      <th
                                                          scope="col"
                                                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                                      >
                                                          Starts
                                                      </th>
                                                      <th
                                                          scope="col"
                                                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                                      >
                                                          Ends
                                                      </th>
                                                      <th
                                                          scope="col"
                                                          className="relative px-6 py-3"
                                                      >
                                                          <span className="sr-only">
                                                              Edit
                                                          </span>
                                                      </th>
                                                  </tr>
                                              </thead>
                                              <tbody className="bg-white divide-y divide-gray-200">
                                                  {competitions.map(
                                                      (cmp, index) => (
                                                          <tr key={index}>
                                                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                                  {cmp.title}
                                                              </td>
                                                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                                  {cmp.location}
                                                              </td>
                                                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                                  {cmp.date_start}
                                                              </td>
                                                              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                                  {cmp.date_start}
                                                              </td>
                                                              <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                                                  <Link
                                                                      href={route(
                                                                          "dashboard.competitions.show",
                                                                          cmp.id
                                                                      )}
                                                                      className="text-indigo-600 hover:text-indigo-900"
                                                                  >
                                                                      <svg
                                                                          xmlns="http://www.w3.org/2000/svg"
                                                                          className="h-6 w-6"
                                                                          fill="none"
                                                                          viewBox="0 0 24 24"
                                                                          stroke="currentColor"
                                                                      >
                                                                          <path
                                                                              strokeLinecap="round"
                                                                              strokeLinejoin="round"
                                                                              strokeWidth={
                                                                                  2
                                                                              }
                                                                              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                                                                          />
                                                                          <path
                                                                              strokeLinecap="round"
                                                                              strokeLinejoin="round"
                                                                              strokeWidth={
                                                                                  2
                                                                              }
                                                                              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                                                                          />
                                                                      </svg>
                                                                  </Link>
                                                              </td>
                                                          </tr>
                                                      )
                                                  )}
                                              </tbody>
                                          </table>
                                      )}
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </Authenticated>
      );
  };
  
  export default Index;
  