Fix layout issues & co-locate components (#46)

* Fix layout issues & co-locate components

* Fix front page

* Fix centering

components/SearchBar.tsx

@@ -1,48 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-import { useTranslations } from "next-intl";
-
-type SearchBarProps = {
-  tournamentFilter: string;
-  setTournamentFilter: Dispatch<SetStateAction<string>>;
-};
-
-const SearchBar = ({
-  tournamentFilter,
-  setTournamentFilter,
-}: SearchBarProps) => {
-  const t = useTranslations("Competitions");
-
-  return (
-    <div className="bg-white p-3 dark:bg-gray-800">
-      <label htmlFor="table-search" className="sr-only">
-        {t("searchLabel")}
-      </label>
-      <div className="relative mt-1">
-        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-          <svg
-            className="h-5 w-5 text-gray-500 dark:text-gray-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fillRule="evenodd"
-              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
-        </div>
-        <input
-          type="text"
-          id="table-search"
-          className="block w-80 rounded-lg border border-gray-300 bg-gray-50 p-2.5 pl-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500  dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-          placeholder={t("searchPlaceholder")}
-          value={tournamentFilter}
-          onChange={(e) => setTournamentFilter(e.target.value)}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default SearchBar;