mirror of
https://github.com/TheRealOwenRees/echecsfrance.git
synced 2026-07-23 04:26:57 +00:00
Fix layout issues & co-locate components (#46)
* Fix layout issues & co-locate components * Fix front page * Fix centering
This commit is contained in:
Timothy Armes
@@ -1,136 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, FormEvent } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import sendMail from "@/lib/sendMail";
|
||||
import { errorLog } from "@/utils/logger";
|
||||
import useContactForm from "@/hooks/useContactForm";
|
||||
|
||||
const ContactForm = () => {
|
||||
const t = useTranslations("Contact");
|
||||
const { values, handleChange, resetForm } = useContactForm();
|
||||
const [responseMessage, setResponseMessage] = useState({
|
||||
isSuccessful: false,
|
||||
message: "",
|
||||
});
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
|
||||
const clearMessage = () => {
|
||||
setTimeout(() => {
|
||||
setResponseMessage({
|
||||
isSuccessful: false,
|
||||
message: "",
|
||||
});
|
||||
}, 10000);
|
||||
};
|
||||
|
||||
const handleEmailSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSending(true);
|
||||
try {
|
||||
const response = await sendMail(values);
|
||||
if (response.status === 250) {
|
||||
setResponseMessage({
|
||||
isSuccessful: true,
|
||||
message: t("success"),
|
||||
});
|
||||
|
||||
resetForm();
|
||||
clearMessage();
|
||||
setIsSending(false);
|
||||
}
|
||||
} catch (error) {
|
||||
errorLog(error);
|
||||
setResponseMessage({
|
||||
isSuccessful: false,
|
||||
message: t("failure"),
|
||||
});
|
||||
clearMessage();
|
||||
setIsSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const infoMessage = (
|
||||
<p
|
||||
className={`${
|
||||
responseMessage.isSuccessful ? "text-green-600" : "text-red-600"
|
||||
} italic`}
|
||||
data-test="info-message"
|
||||
>
|
||||
{responseMessage.message}
|
||||
</p>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<form onSubmit={handleEmailSubmit} className="space-y-8">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("emailLabel")}
|
||||
</label>
|
||||
<input
|
||||
value={values.email}
|
||||
onChange={handleChange}
|
||||
type="email"
|
||||
id="email"
|
||||
className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
|
||||
placeholder="nom@exemple.com"
|
||||
required
|
||||
data-test="email-input"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="subject"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("subjectLabel")}
|
||||
</label>
|
||||
<input
|
||||
value={values.subject}
|
||||
onChange={handleChange}
|
||||
type="text"
|
||||
id="subject"
|
||||
className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
|
||||
placeholder={t("subjectPlaceholder")}
|
||||
required
|
||||
data-test="subject-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label
|
||||
htmlFor="message"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("messageLabel")}
|
||||
</label>
|
||||
<textarea
|
||||
value={values.message}
|
||||
onChange={handleChange}
|
||||
id="message"
|
||||
rows={6}
|
||||
className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
|
||||
placeholder={t("messagePlaceholder")}
|
||||
data-test="message-input"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
<button
|
||||
disabled={isSending}
|
||||
type="submit"
|
||||
className="hover:bg-primary-800 focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800 rounded-lg bg-teal-600 px-5 py-3 text-center text-sm font-medium text-white focus:outline-none focus:ring-4 disabled:opacity-25 dark:text-white sm:w-fit"
|
||||
data-test="submit-button"
|
||||
>
|
||||
{isSending ? t("sending") : t("sendButton")}
|
||||
</button>
|
||||
{infoMessage}
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactForm;
|
||||
@@ -1,39 +0,0 @@
|
||||
import Link from "next-intl/link";
|
||||
import { FaGithub, FaRegEnvelope } from "react-icons/fa";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function Footer() {
|
||||
const t = useTranslations("Footer");
|
||||
|
||||
return (
|
||||
<footer
|
||||
className="fixed bottom-0 z-30 grid w-full justify-items-center bg-teal-600 px-5 py-2 text-white dark:bg-gray-700"
|
||||
data-test="footer"
|
||||
>
|
||||
<div className="p-2">
|
||||
<p>© {new Date().getFullYear()} - Owen Rees</p>
|
||||
</div>
|
||||
<div className="flex space-x-4 p-2">
|
||||
<Link
|
||||
href="https://github.com/TheRealOwenRees/echecsfrance"
|
||||
target="_blank"
|
||||
aria-label={t("githubAria")}
|
||||
>
|
||||
<FaGithub />
|
||||
</Link>
|
||||
<Link href="/contactez-nous" aria-label={t("contactAria")}>
|
||||
<FaRegEnvelope />
|
||||
</Link>
|
||||
<div className="space-x-2 text-xs">
|
||||
<Link href="/" locale="fr">
|
||||
FR
|
||||
</Link>
|
||||
<span>|</span>
|
||||
<Link href="/" locale="en">
|
||||
EN
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import HamburgerMenu from "@/components/HamburgerMenu";
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
const Hamburger = () => {
|
||||
const [menuVisible, setMenuVisible] = useState(false);
|
||||
const hamburgerButtonRef = useRef<HTMLDivElement>(null);
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={hamburgerButtonRef}
|
||||
className="hamburger-button relative z-[99999] space-y-2"
|
||||
data-test="hamburger-button"
|
||||
onClick={() => setMenuVisible(!menuVisible)}
|
||||
>
|
||||
<div
|
||||
className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white ${
|
||||
menuVisible ? "translate-x-[1px] translate-y-2.5 rotate-45" : ""
|
||||
}`}
|
||||
></div>
|
||||
<div
|
||||
className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-linear dark:bg-white ${
|
||||
menuVisible ? "rotate-0 scale-0 opacity-0" : ""
|
||||
}`}
|
||||
></div>
|
||||
<div
|
||||
className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white ${
|
||||
menuVisible ? "-translate-y-2.5 -rotate-45" : ""
|
||||
}`}
|
||||
></div>
|
||||
</div>
|
||||
{
|
||||
<HamburgerMenu
|
||||
menuVisible={menuVisible}
|
||||
setMenuVisible={setMenuVisible}
|
||||
hamburgerButtonRef={hamburgerButtonRef}
|
||||
/>
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hamburger;
|
||||
@@ -1,95 +0,0 @@
|
||||
interface HamburgerMenuState {
|
||||
menuVisible: boolean;
|
||||
setMenuVisible: Dispatch<SetStateAction<boolean>>;
|
||||
hamburgerButtonRef: RefObject<HTMLDivElement>;
|
||||
}
|
||||
|
||||
import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
|
||||
import Link from "next-intl/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import ThemeSwitcher from "@/components/ThemeSwitcher";
|
||||
import useHamburgerClose from "@/hooks/useHamburgerClose";
|
||||
|
||||
const HamburgerMenu = ({
|
||||
menuVisible,
|
||||
setMenuVisible,
|
||||
hamburgerButtonRef,
|
||||
}: HamburgerMenuState) => {
|
||||
const t = useTranslations("Nav");
|
||||
const [mouseOverMenu, setMouseOverMenu] = useState(false);
|
||||
const timeoutRef = useRef<NodeJS.Timeout | undefined>();
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const menuTimeout = () => {
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
setMenuVisible(false);
|
||||
setMouseOverMenu(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const handleMouseEnterMenu = () => {
|
||||
setMouseOverMenu(true);
|
||||
clearTimeout(timeoutRef.current);
|
||||
};
|
||||
|
||||
const handleMouseLeaveMenu = () => {
|
||||
setMouseOverMenu(false);
|
||||
clearTimeout(timeoutRef.current);
|
||||
};
|
||||
|
||||
useHamburgerClose({
|
||||
menuVisible,
|
||||
setMenuVisible,
|
||||
menuRef,
|
||||
hamburgerButtonRef,
|
||||
mouseOverMenu,
|
||||
setMouseOverMenu,
|
||||
timeoutRef,
|
||||
menuTimeout,
|
||||
});
|
||||
|
||||
// noinspection HtmlUnknownTarget
|
||||
return (
|
||||
<div
|
||||
ref={menuRef}
|
||||
className={`absolute -right-[173px] top-0 ${
|
||||
menuVisible ? "-translate-x-full" : ""
|
||||
} z-[9999] flex bg-teal-600 transition-transform duration-500 ease-linear dark:bg-gray-600 md:hidden`}
|
||||
onMouseEnter={handleMouseEnterMenu}
|
||||
onMouseLeave={handleMouseLeaveMenu}
|
||||
>
|
||||
<ul className="list-reset mt-16 p-5 text-white">
|
||||
<li className="py-5">
|
||||
<Link
|
||||
href="/tournois"
|
||||
className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
|
||||
>
|
||||
{t("competitions")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="py-5">
|
||||
<Link
|
||||
href="/qui-sommes-nous"
|
||||
className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
|
||||
>
|
||||
{t("about")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="py-5">
|
||||
<Link
|
||||
href="/contactez-nous"
|
||||
className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
|
||||
>
|
||||
{t("contact")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="py-5">
|
||||
<ThemeSwitcher />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HamburgerMenu;
|
||||
@@ -1,17 +0,0 @@
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
export default function Layout({
|
||||
children, // will be a page or nested layout
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="h-screen min-h-[600px] bg-white dark:bg-gray-800 font-sans leading-normal tracking-normal">
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { useMap } from "react-leaflet";
|
||||
import { useEffect } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import L from "leaflet";
|
||||
|
||||
const Legend = () => {
|
||||
const t = useTranslations("App");
|
||||
const map = useMap();
|
||||
|
||||
useEffect(() => {
|
||||
if (map) {
|
||||
// @ts-ignore
|
||||
const legend = L.control({ position: "bottomleft" });
|
||||
|
||||
legend.onAdd = () => {
|
||||
const div = L.DomUtil.create("div", "map-legend");
|
||||
div.setAttribute(
|
||||
"style",
|
||||
"background: white; color: black; border: 2px solid grey; border-radius: 6px; padding: 10px;"
|
||||
);
|
||||
div.innerHTML = `<ul>
|
||||
<li><span style='background:#00ac39; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
|
||||
"tcClassic"
|
||||
)}</li>
|
||||
<li><span style='background:#0086c7; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
|
||||
"tcRapid"
|
||||
)}</li>
|
||||
<li><span style='background:#cec348; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
|
||||
"tcBlitz"
|
||||
)}</li>
|
||||
<li><span style='background:#d10c3e; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
|
||||
"tcKO"
|
||||
)}</li>
|
||||
</ul>`;
|
||||
return div;
|
||||
};
|
||||
|
||||
legend.addTo(map);
|
||||
}
|
||||
}, [map, t]);
|
||||
return null;
|
||||
};
|
||||
|
||||
export default Legend;
|
||||
@@ -1,65 +0,0 @@
|
||||
import Link from "next-intl/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import ThemeSwitcher from "@/components/ThemeSwitcher";
|
||||
import Hamburger from "@/components/Hamburger";
|
||||
|
||||
export default function Navbar() {
|
||||
const t = useTranslations("Nav");
|
||||
|
||||
return (
|
||||
<nav
|
||||
className="relative mt-0 w-full overflow-x-clip border-b-[1px] bg-white px-5 pt-5 dark:border-gray-700 dark:bg-gray-800 md:pt-2"
|
||||
data-test="navbar"
|
||||
>
|
||||
<div className="container mx-auto flex items-center">
|
||||
<div className="flex w-full justify-center pb-3 font-extrabold md:w-1/2 md:justify-start md:pb-0">
|
||||
<Link
|
||||
className="text-gray-900 no-underline hover:no-underline dark:text-white"
|
||||
href="/"
|
||||
>
|
||||
<span className="text-2xl">{t("title")}</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pb-2 md:hidden" data-test="mobile-menu">
|
||||
<Hamburger />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="hidden justify-center pt-2 md:flex md:w-1/2 md:justify-end"
|
||||
data-test="desktop-menu"
|
||||
>
|
||||
<ul className="list-reset flex flex-1 items-center justify-around text-gray-900 no-underline dark:text-white md:flex-none">
|
||||
<li className="mr-10">
|
||||
<Link
|
||||
className="inline-block border-b-4 border-transparent py-5 transition-all duration-300 ease-in-out hover:border-teal-600"
|
||||
href="/tournois"
|
||||
>
|
||||
{t("competitions")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="mr-10">
|
||||
<Link
|
||||
className="inline-block border-b-4 border-transparent py-5 transition-all duration-300 ease-in-out hover:border-teal-600"
|
||||
href="/qui-sommes-nous"
|
||||
>
|
||||
{t("about")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="mr-10">
|
||||
<Link
|
||||
className="inline-block border-b-4 border-transparent py-5 transition-all duration-300 ease-in-out hover:border-teal-600"
|
||||
href="/contactez-nous"
|
||||
>
|
||||
{t("contact")}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<ThemeSwitcher />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ScrollableElement } from "@/types";
|
||||
|
||||
import { FaArrowUp } from "react-icons/fa";
|
||||
import { handleScrollToTop } from "@/handlers/scrollHandlers";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
const ScrollToTopButton = () => {
|
||||
const scrollToTopElementRef = useRef<ScrollableElement | null>(null);
|
||||
const [isLgScreen, setIsLgScreen] = useState(false);
|
||||
|
||||
// calculate screen size
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsLgScreen(window.innerWidth >= 1024);
|
||||
};
|
||||
handleResize();
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
// determine scrollable element based on screen size - window or div
|
||||
useEffect(() => {
|
||||
isLgScreen
|
||||
? (scrollToTopElementRef.current =
|
||||
document.getElementById("tournament-table"))
|
||||
: (scrollToTopElementRef.current = window);
|
||||
}, [isLgScreen]);
|
||||
|
||||
const scrollToTopButtonClass = isLgScreen
|
||||
? "absolute bottom-0 right-3 p-10"
|
||||
: "fixed top-20 right-3";
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`${scrollToTopButtonClass} z-10 text-2xl text-teal-900 dark:text-white`}
|
||||
data-test="scroll-to-top-button"
|
||||
>
|
||||
<FaArrowUp
|
||||
onClick={() => handleScrollToTop(scrollToTopElementRef.current)}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScrollToTopButton;
|
||||
@@ -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;
|
||||
@@ -1,43 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { MdBrightness2, MdCircle } from "react-icons/md";
|
||||
import useDarkMode from "@/hooks/useDarkMode";
|
||||
import { useEffect, useState } from "react";
|
||||
import "@/css/theme-toggle.css";
|
||||
|
||||
const ThemeSwitcher = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [colorTheme, setTheme] = useDarkMode();
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{colorTheme === "light" ? (
|
||||
<div
|
||||
className="toggle-dark"
|
||||
data-test="toggle-dark"
|
||||
onClick={() => setTheme("light")}
|
||||
>
|
||||
<MdBrightness2 className="theme-icon-dark" />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="toggle"
|
||||
data-test="toggle"
|
||||
onClick={() => setTheme("dark")}
|
||||
>
|
||||
<MdCircle className="theme-icon" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeSwitcher;
|
||||
@@ -1,57 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { TournamentDataProps } from "@/types";
|
||||
import { LatLngLiteral } from "leaflet";
|
||||
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
|
||||
import "leaflet-defaulticon-compatibility";
|
||||
|
||||
import { MapContainer, TileLayer, LayersControl } from "react-leaflet";
|
||||
|
||||
import { createLayerGroups } from "@/utils/layerGroups";
|
||||
import Legend from "@/components/Legend";
|
||||
|
||||
export default function TournamentMap({ tournamentData }: TournamentDataProps) {
|
||||
const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
|
||||
|
||||
const classicalMarkers = createLayerGroups("Cadence Lente", "green", {
|
||||
tournamentData,
|
||||
});
|
||||
const rapidMarkers = createLayerGroups("Rapide", "blue", {
|
||||
tournamentData,
|
||||
});
|
||||
const blitzMarkers = createLayerGroups("Blitz", "yellow", {
|
||||
tournamentData,
|
||||
});
|
||||
|
||||
const otherMarkers = createLayerGroups("1h KO", "red", { tournamentData });
|
||||
|
||||
return (
|
||||
<section
|
||||
id="tournament-map"
|
||||
className="grid h-[calc(100vh-153px)] md:h-[calc(100vh-83px)] lg:h-[calc(100vh-173px)]"
|
||||
>
|
||||
<MapContainer
|
||||
center={center}
|
||||
zoom={5}
|
||||
scrollWheelZoom={false}
|
||||
style={{
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<Legend />
|
||||
<LayersControl>
|
||||
{classicalMarkers}
|
||||
{rapidMarkers}
|
||||
{blitzMarkers}
|
||||
{otherMarkers}
|
||||
</LayersControl>
|
||||
</MapContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { TournamentDataProps } from "@/types";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import SearchBar from "@/components/SearchBar";
|
||||
import ScrollToTopButton from "@/components/ScrollToTopButton";
|
||||
|
||||
export default function TournamentTable({
|
||||
tournamentData,
|
||||
}: TournamentDataProps) {
|
||||
let tableData;
|
||||
const t = useTranslations("Competitions");
|
||||
const [searchQuery, setSearchQuery] = useState(""); // text from search bar
|
||||
const [filteredTournamentData, setFilteredTournamentData] =
|
||||
useState(tournamentData);
|
||||
|
||||
useEffect(() => {
|
||||
setFilteredTournamentData(
|
||||
tournamentData.filter((t) => t.town.includes(searchQuery.toUpperCase()))
|
||||
);
|
||||
}, [searchQuery, tournamentData]);
|
||||
|
||||
// TODO move this section into its own function
|
||||
if (filteredTournamentData.length === 0) {
|
||||
tableData = (
|
||||
<tr className="bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
|
||||
<td colSpan={4} className="p-3">
|
||||
{t("noneFound")}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
} else {
|
||||
tableData = filteredTournamentData.map((data) => (
|
||||
<tr
|
||||
className="bg-white text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900"
|
||||
key={data._id}
|
||||
>
|
||||
<td className="p-3">
|
||||
<a href={data.url} target="_blank">
|
||||
{data.date}
|
||||
</a>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<a href={data.url} target="_blank">
|
||||
{data.town}
|
||||
</a>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<a href={data.url} target="_blank">
|
||||
{data.tournament}
|
||||
</a>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<a href={data.url} target="_blank">
|
||||
{data.time_control}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
className="tournament-table grid w-full auto-rows-max pb-20 lg:col-start-2 lg:col-end-3 lg:h-[calc(100vh-173px)] lg:overflow-y-scroll"
|
||||
id="tournament-table"
|
||||
data-test="tournament-table-div"
|
||||
>
|
||||
<div className="z-10 flex">
|
||||
<SearchBar
|
||||
tournamentFilter={searchQuery}
|
||||
setTournamentFilter={setSearchQuery}
|
||||
/>
|
||||
<div>
|
||||
<ScrollToTopButton />
|
||||
</div>
|
||||
</div>
|
||||
<table
|
||||
className="relative w-full table-fixed text-center text-xs"
|
||||
data-test="tournament-table"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
|
||||
{t("date")}
|
||||
</th>
|
||||
<th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
|
||||
{t("town")}
|
||||
</th>
|
||||
<th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
|
||||
{t("competition")}
|
||||
</th>
|
||||
<th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
|
||||
{t("timeControl")}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{tableData}</tbody>
|
||||
</table>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user