Minor updates

src/components/Footer.tsx

@@ -3,11 +3,11 @@
 import { Source } from "@/components/Source";
 import { ThemeSwitcher } from "@/components/ThemeSwitcher";
 
-export const Footer = () => {
+export function Footer() {
 	return (
 		<div className="fixed bottom-0 py-5 left-0 right-0 text-center space-x-5">
 			<Source />
 			<ThemeSwitcher />
 		</div>
 	);
-};
+}

src/components/Resources.tsx

@@ -1,11 +1,16 @@
 "use client";
 
-import { Button } from "@heroui/react";
-import React, { useCallback, useEffect, useState } from "react";
-import type { ButtonProps } from "@/utils/props";
-import type { ButtonColor } from "@/utils/types";
+import { Button, type ButtonProps as HeroButtonProps } from "@heroui/react";
+import { useCallback, useEffect, useState, memo } from "react";
 
-const CustomButton: React.FC<ButtonProps> = React.memo(({ label, link }) => {
+export interface ResourceProps {
+	label: string;
+	link: string;
+}
+
+type ButtonColor = HeroButtonProps["color"];
+
+const ResourceComponent = ({ label, link }: ResourceProps) => {
 	const [status, setStatus] = useState<number>();
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 
@@ -21,6 +26,8 @@ const CustomButton: React.FC<ButtonProps> = React.memo(({ label, link }) => {
 			} finally {
 				setIsLoading(false);
 			}
+		} else {
+			setStatus(undefined);
 		}
 	}, [link]);
 
@@ -29,16 +36,10 @@ const CustomButton: React.FC<ButtonProps> = React.memo(({ label, link }) => {
 	}, [checkLinkStatus]);
 
 	const getColor = useCallback((): ButtonColor => {
-		switch (true) {
-			case isLoading:
-				return "default";
-			case status === 200:
-				return "primary";
-			case status === 404:
-				return "danger";
-			default:
-				return "default";
-		}
+		if (isLoading) return "default";
+		if (status === 200) return "primary";
+		if (status === 404) return "danger";
+		return "default";
 	}, [isLoading, status]);
 
 	const handleClick = useCallback(() => {
@@ -60,16 +61,6 @@ const CustomButton: React.FC<ButtonProps> = React.memo(({ label, link }) => {
 			{label}
 		</Button>
 	);
-});
+};
 
-export const PdfButton: React.FC<ButtonProps> = React.memo(
-	({ label, link }) => <CustomButton label={label} link={link} />,
-);
-
-export const ZipButton: React.FC<ButtonProps> = React.memo(
-	({ label, link }) => <CustomButton label={label} link={link} />,
-);
-
-export const Mp3Button: React.FC<ButtonProps> = React.memo(
-	({ label, link }) => <CustomButton label={label} link={link} />,
-);
+export const Resource = memo(ResourceComponent);

src/components/Selectors.tsx

@@ -1,79 +1,54 @@
 "use client";
 
 import { Select, SelectItem } from "@heroui/react";
-import type { SelectorProps } from "@/utils/props";
-import type { ChangeEvent } from "react";
 
-export const SubjectSelector: React.FC<
-	Pick<SelectorProps, "selectedSubject" | "setSelectedSubject" | "subjects">
-> = ({ selectedSubject, setSelectedSubject, subjects }) => (
-	<Select
-		selectionMode="single"
-		disallowEmptySelection={true}
-		label="Tárgy"
-		value={selectedSubject}
-		onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-			setSelectedSubject(e.target.value)
-		}
-		className="w-56"
-	>
-		{subjects.map((subject) => (
-			<SelectItem key={subject.value}>{subject.label}</SelectItem>
-		))}
-	</Select>
-);
+interface SelectorItem {
+	value: string;
+	label: string;
+}
 
-export const YearSelector: React.FC<
-	Pick<SelectorProps, "selectedYear" | "setSelectedYear" | "years">
-> = ({ selectedYear, setSelectedYear, years }) => (
-	<Select
-		selectionMode="single"
-		disallowEmptySelection={true}
-		label="Év"
-		value={selectedYear}
-		onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-			setSelectedYear(e.target.value)
-		}
-		className="w-56"
-	>
-		{years.map((year) => (
-			<SelectItem key={year}>{year}</SelectItem>
-		))}
-	</Select>
-);
+interface SelectorProps {
+	label: string;
+	selectedValue: string;
+	onSelectionChange: (value: string) => void;
+	items: SelectorItem[];
+	className?: string;
+}
 
-export const PeriodSelector: React.FC<
-	Pick<SelectorProps, "selectedPeriod" | "setSelectedPeriod">
-> = ({ selectedPeriod, setSelectedPeriod }) => (
-	<Select
-		selectionMode="single"
-		disallowEmptySelection={true}
-		label="Időszak"
-		value={selectedPeriod}
-		onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-			setSelectedPeriod(e.target.value)
-		}
-		className="w-56"
-	>
-		<SelectItem key={"tavasz"}>Tavasz</SelectItem>
-		<SelectItem key={"osz"}>Ősz</SelectItem>
-	</Select>
-);
+export const periodItems = [
+	{ value: "tavasz", label: "Tavasz" },
+	{ value: "osz", label: "Ősz" },
+];
 
-export const LevelSelector: React.FC<
-	Pick<SelectorProps, "selectedLevel" | "setSelectedLevel">
-> = ({ selectedLevel, setSelectedLevel }) => (
-	<Select
-		selectionMode="single"
-		disallowEmptySelection={true}
-		label="Szint"
-		value={selectedLevel}
-		onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-			setSelectedLevel(e.target.value)
-		}
-		className="w-56"
-	>
-		<SelectItem key={"kozep"}>Közép</SelectItem>
-		<SelectItem key={"emelt"}>Emelt</SelectItem>
-	</Select>
-);
+export const levelItems = [
+	{ value: "kozep", label: "Közép" },
+	{ value: "emelt", label: "Emelt" },
+];
+
+export function Selector({
+	label,
+	selectedValue,
+	onSelectionChange,
+	items,
+	className = "w-56",
+}: SelectorProps) {
+	return (
+		<Select
+			selectionMode="single"
+			disallowEmptySelection={true}
+			label={label}
+			selectedKeys={selectedValue ? [selectedValue] : []}
+			onSelectionChange={(keys) => {
+				const key = Array.from(keys)[0];
+				if (key) {
+					onSelectionChange(String(key));
+				}
+			}}
+			className={className}
+		>
+			{items.map((item) => (
+				<SelectItem key={item.value}>{item.label}</SelectItem>
+			))}
+		</Select>
+	);
+}

src/components/Source.tsx

@@ -3,7 +3,7 @@
 import { Button } from "@heroui/button";
 import { VscGithubInverted } from "react-icons/vsc";
 
-export const Source = () => {
+export function Source() {
 	return (
 		<Button
 			aria-label="Source Code"
@@ -15,4 +15,4 @@ export const Source = () => {
 			<VscGithubInverted size={20} />
 		</Button>
 	);
-};
+}

src/components/ThemeSwitcher.tsx

@@ -4,7 +4,7 @@ import { Button } from "@heroui/button";
 import { useTheme } from "next-themes";
 import { VscColorMode } from "react-icons/vsc";
 
-export const ThemeSwitcher = () => {
+export function ThemeSwitcher() {
 	const { theme, setTheme } = useTheme();
 
 	const toggle = () => {
@@ -20,4 +20,4 @@ export const ThemeSwitcher = () => {
 			)}
 		</Button>
 	);
-};
+}