more action button refactors

apps/skillulator/src/routes/c/$class/components/action-buttons.tsx

···
 import clsx from "clsx";
 import { useTreeStore } from "@/zustand/treeStore";
 import type { Skill } from "@/types";
+import { t } from "i18next";
 
 export function DecreaseSkillPointButton(props: {
 	skill: Skill;
···
 		</button>
 	);
 }
+
+export function CopyButton(props: {
+	copied: boolean;
+	copyToClipboard: () => void;
+}) {
+	return (
+		<button
+			type="button"
+			disabled={props.copied}
+			onClick={props.copyToClipboard}
+			className={clsx(
+				"h-min w-full self-end rounded-md bg-indigo-500 px-4 py-1.5 font-semibold text-white duration-150 hover:bg-indigo-600 md:w-max a11y-focus",
+				props.copied ? "disabled:bg-green-500" : undefined,
+			)}
+		>
+			{props.copied ? t("copiedText") : t("copyText")}
+		</button>
+	);
+}
+
+export function ResetButton(props: { handleReset: () => void }) {
+	return (
+		<button
+			type="button"
+			className="h-min w-full self-end rounded-md border border-red-300 bg-red-100 px-4 py-1.5 text-red-900 duration-150 hover:bg-red-200 md:w-max a11y-focus"
+			onClick={props.handleReset}
+		>
+			{t("resetText")}
+		</button>
+	);
+}

apps/skillulator/src/routes/c/$class/route.tsx

···
-import { createFileRoute } from "@tanstack/react-router";
-import { Link, useParams } from "@tanstack/react-router";
+import { Link, useParams, createFileRoute } from "@tanstack/react-router";
 import clsx from "clsx";
 import { t } from "i18next";
 import { Suspense } from "react";
 import Skill from "./components/Skill";
 import { useSkillTree } from "@/hooks/useSkillTree";
+import { CopyButton, ResetButton } from "./components/action-buttons";
 
 export const Route = createFileRoute("/c/$class")({
 	component: SkillTree,
···
 									/>
 								</div>
 							</div>
-							<button
-								type="button"
-								disabled={copied}
-								onClick={copyToClipboard}
-								className={clsx(
-									"h-min w-full self-end rounded-md bg-indigo-500 px-4 py-1.5 font-semibold text-white duration-150 hover:bg-indigo-600 md:w-max a11y-focus",
-									copied ? "disabled:bg-green-500" : undefined,
-								)}
-							>
-								{copied ? t("copiedText") : t("copyText")}
-							</button>
-							<button
-								type="button"
-								className="h-min w-full self-end rounded-md border border-red-300 bg-red-100 px-4 py-1.5 text-red-900 duration-150 hover:bg-red-200 md:w-max a11y-focus"
-								onClick={handleReset}
-							>
-								{t("resetText")}
-							</button>
+							<CopyButton copied={copied} copyToClipboard={copyToClipboard} />
+							<ResetButton handleReset={handleReset} />
 						</div>
 					</div>
 					<div