Dan Dobos
e8d0f5b087
- Refactored About, Contact, Gallery, Home, Services pages to enhance dark mode compatibility. - Changed color schemes from orange to sky for various elements. - Updated background colors and text colors to improve readability in dark mode. - Added dark mode configuration to Tailwind CSS.
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
|
|
function FlagGB() {
|
|
return (
|
|
<svg viewBox="0 0 60 30" aria-hidden="true" className="h-4 w-6">
|
|
<clipPath id="t"><path d="M0 0h60v30H0z" /></clipPath>
|
|
<g clipPath="url(#t)">
|
|
<path d="M0 0v30h60V0z" fill="#012169" />
|
|
<path d="M0 0l60 30m0-30L0 30" stroke="#fff" strokeWidth="6" />
|
|
<path d="M0 0l60 30m0-30L0 30" stroke="#C8102E" strokeWidth="4" />
|
|
<path d="M30 0v30M0 15h60" stroke="#fff" strokeWidth="10" />
|
|
<path d="M30 0v30M0 15h60" stroke="#C8102E" strokeWidth="6" />
|
|
</g>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function FlagNL() {
|
|
return (
|
|
<svg viewBox="0 0 3 2" aria-hidden="true" className="h-4 w-6">
|
|
<rect width="3" height="2" fill="#fff" />
|
|
<rect width="3" height="0.6667" y="0" fill="#AE1C28" />
|
|
<rect width="3" height="0.6667" y="1.3333" fill="#21468B" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function LanguageSwitcher() {
|
|
const { i18n, t } = useTranslation();
|
|
|
|
const current = i18n.language === "nl" ? "nl" : "en";
|
|
const other = current === "en" ? "nl" : "en";
|
|
|
|
const setLang = (lng: "en" | "nl") => i18n.changeLanguage(lng);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => setLang(other as "en" | "nl")}
|
|
aria-label={t("header.language")}
|
|
className="flex items-center gap-1 px-2 py-1 text-sm hover:bg-gray-50"
|
|
>
|
|
{other === "en" ? <FlagGB /> : <FlagNL />}
|
|
</button>
|
|
);
|
|
} |