Added dark mode styling, improved link component and date handling

app/library/language-switcher/LanguageSwitcher.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next"
-import { Link, useLocation } from "react-router"
+import { useLocation } from "react-router"
 import { supportedLanguages } from "~/localization/resource"
+import { Link } from "../link"
 
 const LanguageSwitcher = () => {
 	const { i18n } = useTranslation()
@@ -11,7 +12,7 @@ const LanguageSwitcher = () => {
 		<div className="flex gap-2 p-2 fixed top-0 right-0 w-min z-10">
 			{supportedLanguages.map((language) => (
 				<Link
-					className="text-blue-500 hover:underline transition-all"
+					className="text-blue-500 dark:text-white hover:underline transition-all"
 					key={language}
 					to={`${to}?lng=${language}`}
 					onClick={() => i18n.changeLanguage(language)}

app/library/link/README.md

@@ -0,0 +1,9 @@
+# Link
+
+This is a simple link  component that wraps the `Link` component from `react-router` and provides view transitions and prefetching by default.
+
+
+## Benefits
+
+- You prefetch other routes before the user clicks on the link.
+- You get view transitions for free on every navigation.

app/library/link/index.ts

@@ -0,0 +1 @@
+export * from "./link"

app/library/link/link.tsx

@@ -0,0 +1,7 @@
+import { Link as ReactRouterLink, type LinkProps as ReactRouterLinkProps } from "react-router"
+
+interface LinkProps extends ReactRouterLinkProps {}
+
+export const Link = ({ prefetch = "intent", viewTransition = true, ...props }: LinkProps) => {
+	return <ReactRouterLink prefetch={prefetch} viewTransition={viewTransition} {...props} />
+}

app/root.tsx

@@ -59,11 +59,11 @@ export const ErrorBoundary = () => {
 	const errorStatusCode = isRouteErrorResponse(error) ? error.status : "500"
 
 	return (
-		<div className="placeholder-index relative h-full min-h-screen w-screen flex items-center justify-center dark:bg-white sm:pb-16 sm:pt-8">
+		<div className="placeholder-index relative h-full min-h-screen w-screen flex items-center bg-gradient-to-b from-gray-50 to-gray-100 dark:from-blue-950 dark:to-blue-900 justify-center dark:bg-white sm:pb-16 sm:pt-8">
 			<div className="relative mx-auto max-w-[90rem] sm:px-6 lg:px-8">
 				<div className="relative  min-h-72 flex flex-col justify-center sm:overflow-hidden sm:rounded-2xl p-1 md:p-4 lg:p-6">
 					<h1 className="text-center w-full text-red-600 text-2xl pb-2">{t(`error.${errorStatusCode}.title`)}</h1>
-					<p className="text-lg text-center w-full">{t(`error.${errorStatusCode}.description`)}</p>
+					<p className="text-lg dark:text-white text-center w-full">{t(`error.${errorStatusCode}.description`)}</p>
 				</div>
 			</div>
 		</div>

app/routes/$.tsx

@@ -1,21 +1,22 @@
 import { useTranslation } from "react-i18next"
-import { Link, useNavigate } from "react-router"
+import { useNavigate } from "react-router"
 import { Icon } from "~/library/icon/Icon"
+import { Link } from "~/library/link"
 
 export default function Route404() {
 	const navigate = useNavigate()
 	const { t } = useTranslation()
 
 	return (
-		<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 flex items-center justify-center p-4">
+		<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-blue-950 dark:to-blue-900 dark:text-white flex items-center justify-center p-4">
 			<div className="max-w-2xl w-full text-center">
 				<div className="mb-8 flex justify-center">
 					<Icon name="Ghost" className="h-24 w-24 text-indigo-600 animate-float" />
 				</div>
 
-				<h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
-				<h2 className="text-3xl font-semibold text-gray-800 mb-4">{t("error.404.title")}</h2>
-				<p className="text-gray-600 mb-8 text-lg">{t("error.404.description")}</p>
+				<h1 className="text-6xl font-bold dark:text-white text-gray-900 mb-4">404</h1>
+				<h2 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">{t("error.404.title")}</h2>
+				<p className="text-gray-600 dark:text-white mb-8 text-lg">{t("error.404.description")}</p>
 
 				<div className="flex flex-col sm:flex-row gap-4 justify-center">
 					<button

app/routes/_index.browser.test.tsx

@@ -1,13 +1,19 @@
 import * as Module from "./_index"
 
+const routeComponentProps = {
+	loaderData: { timezoneDate: "2021-01-01T00:00:00.000Z" },
+	params: {},
+	// biome-ignore lint/suspicious/noExplicitAny: Matches are not used
+	matches: [] as any,
+}
 describe("Home route", () => {
 	it("should render the home page text properly in english", async ({ renderStub }) => {
 		const { getByText } = await renderStub({
 			entries: [
 				{
 					id: "home",
 					path: "/",
-					Component: Module.default,
+					Component: () => Module.default(routeComponentProps),
 				},
 			],
 		})
@@ -25,7 +31,8 @@ describe("Home route", () => {
 				{
 					id: "home",
 					path: "/",
-					Component: Module.default,
+
+					Component: () => Module.default(routeComponentProps),
 				},
 			],
 			i18n: {