Yes

postcss.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+	plugins: [
+		require("autoprefixer"),
+		require("tailwindcss"),
+		require("postcss-import"),
+		require("tailwindcss/nesting"),
+	],
+};

postcss.config.js

@@ -1,10 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-	plugins: [
-		require('autoprefixer'),
-		require('tailwindcss'),
-		require('postcss-import'),
-		require('tailwindcss/nesting'),
-	],
-};
-module.exports = config

src/configure.tsx

@@ -70,9 +70,9 @@ export const floatingMenuStructure: MenuStructure[] = [
 					tabIndex={0}
 					className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mr-1"
 				>
-					{floatingLanguageMenuStructure.map((element) => {
+					{floatingLanguageMenuStructure.map((element, index) => {
 						return (
-							<li>
+							<li key={element.label + index}>
 								<a
 									onClick={() => {
 										if ("action" in element && typeof element.action === "function")

src/locales/eng/general.json

@@ -3,5 +3,6 @@
 	"login_button": "Login",
 	"login_username": "Username",
 	"login_password": "Password",
-	"login_accept_terms": "I accept the terms and conditions"
+	"login_accept_terms": "I accept the terms and conditions",
+	"homePage": { "click_me": "Click me!", "counter": "Counter" }
 }

src/locales/pol/general.json

@@ -3,5 +3,6 @@
 	"login_button": "Zaloguj",
 	"login_username": "Nazwa użytkownika",
 	"login_password": "Hasło",
-	"login_accept_terms": "Akceptuję regulamin"
+	"login_accept_terms": "Akceptuję regulamin",
+	"homePage": { "click_me": "Naciśnij tutaj!", "counter": "Licznik" }
 }

src/pages/HomePage.tsx

@@ -1,16 +1,22 @@
 import { useState } from "react";
+import HomePageTemplate from "../templates/HomePageTemplate";
+import { useTranslation } from "react-i18next";
 
 const HomePage = () => {
 	const [counter, setCounter] = useState(0);
+	const { t } = useTranslation();
 
 	return (
-		<div>
-			<p>HomePage</p>
-			<button className="btn btn-sm" onClick={() => setCounter(counter + 1)}>
-				Click me
-			</button>
-			<div>Counter: {counter}</div>
-		</div>
+		<HomePageTemplate
+			buttonLabel={t("homePage.click_me", "Click me!!!")}
+			buttonOnClick={() => {
+				if (counter >= 10) {
+					setCounter(0);
+					return;
+				} else setCounter(counter + 1);
+			}}
+			value={counter}
+		/>
 	);
 };
 

src/routes/routes.tsx

@@ -1,19 +1,8 @@
-// ----- IMPORT ICONS -----
-// Importing necessary icons from 'react-icons' library
 import { IoMdLogIn, IoMdOptions } from "react-icons/io";
 import { RiHome3Fill } from "react-icons/ri";
-
-// ----- IMPORT PAGES -----
-// Importing page components for route configuration
+import { HOME, LOGIN, PAGE_NOT_FOUND, SETTINGS, USERS } from "../consts";
 import HomePage from "../pages/HomePage";
 import LoginPage from "../pages/LoginPage";
-
-// ----- IMPORT CONSTANTS -----
-// Importing route-related constants for route naming
-import { HOME, LOGIN, PAGE_NOT_FOUND, SETTINGS, USERS } from "../consts";
-
-// ----- IMPORT TYPES AND UTILITIES -----
-// Importing types for route configuration and utility functions
 import { RoutingTree } from "../types/routesTypes";
 import { capitalizeFirstLetter } from "../utils/StringTransformationUtils";
 

src/templates/HomePageTemplate.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from "react-i18next";
+
+export interface HomePageTemplateProps {
+	buttonLabel: string;
+	buttonOnClick: () => void;
+	value: number;
+}
+
+const HomePageTemplate = (props: HomePageTemplateProps) => {
+	const { t } = useTranslation();
+	return (
+		<div className="hero">
+			<div className="hero-content prose flex-col">
+				<h1>HomePage</h1>
+				<div className="card card-bordered shadow-2xl bg-base-100 text-base-content items-center">
+					<div className="card-body">
+						{t("homePage.counter")}: {props.value}
+					</div>
+					<button
+						className="btn btn-sm btn-accent absolute w-fit -bottom-4"
+						onClick={props.buttonOnClick}
+					>
+						{props.buttonLabel}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default HomePageTemplate;

tailwind.config.ts

@@ -1,12 +1,15 @@
 import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 import daisyUI from "daisyui";
-import type { Config } from "tailwindcss";
+import { Config } from "tailwindcss";
 export default {
-	content: ["./src/**/*.{js,ts,jsx,tsx}", "./index.html"],
+	content: {
+		relative: true,
+		files: ["./src/**/*.{js,ts,jsx,tsx}", "./index.html"],
+	},
 	// safelist is used to allow classes to not be purged by tailwind;
 	// I made this to set this classes dyanmically in the code, somehow without this tailwind purges them;
-	safelist: ["alert-info", "alert-success", "alert-warning", "alert-error"],
+	// safelist: ["alert-info", "alert-success", "alert-warning", "alert-error"],
 	theme: {
 		extend: {
 			spacing: {
@@ -19,8 +22,8 @@ export default {
 		},
 	},
 	darkMode: "media",
-	plugins: [forms, daisyUI, typography],
+	plugins: [forms, typography, daisyUI],
 	daisyui: {
 		themes: ["light", "dark"],
 	},
-} satisfies Config;
+} as Config;

tsconfig.json

@@ -9,7 +9,7 @@
       "ESNext"
     ],
     // Enabling options for better interoperability and module handling
-    "moduleResolution": "bundler",
+    "moduleResolution": "Bundler",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,