✨ Add credits page

Author: zty012

app/src/sub/SettingsWindow/assets/DINPro-Bold.subset.woff2

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "DINPro Bold";
+  src: url("./DINPro-Bold.subset.woff2") format("woff2");
+}

app/src/sub/SettingsWindow/assets/font.css

@@ -0,0 +1,34 @@
+import { Field } from "@/components/ui/field";
+import { Heart } from "lucide-react";
+import "./assets/font.css";
+
+export default function CreditsTab() {
+  return (
+    <div className="mx-auto flex w-2/3 flex-col overflow-auto">
+      <Donation user="鳕鱼" note="支持开源支持国产" amount={50} />
+      <Donation user="木头" amount={50} />
+      <Donation user="Edelweiß" amount={5} />
+    </div>
+  );
+}
+
+function Donation({
+  user,
+  note = "",
+  amount,
+  currency = "CNY",
+}: {
+  user: string;
+  note?: string;
+  amount: number;
+  currency?: string;
+}) {
+  return (
+    <Field icon={<Heart />} title={user} description={note}>
+      <div className="flex items-center gap-2 *:font-[DINPro_Bold]">
+        <span className="text-2xl">{amount}</span>
+        <span className="text-xl">{currency}</span>
+      </div>
+    </Field>
+  );
+}

app/src/sub/SettingsWindow/credits.tsx

@@ -6,6 +6,7 @@ import { Rectangle } from "@graphif/shapes";
 import { useState } from "react";
 import AboutTab from "./about";
 import AppearanceTab from "./appearance";
+import CreditsTab from "./credits";
 import KeyBindsPage from "./keybinds";
 import SettingsTab from "./settings";
 
@@ -22,6 +23,7 @@ export default function SettingsWindow({ defaultTab = "settings" }: { defaultTab
           <TabsTrigger value="keybinds">快捷键</TabsTrigger>
           <TabsTrigger value="appearance">个性化</TabsTrigger>
           <TabsTrigger value="about">关于</TabsTrigger>
+          <TabsTrigger value="credits">鸣谢</TabsTrigger>
         </TabsList>
         <div data-pg-drag-region className="h-full flex-1" />
       </div>
@@ -37,6 +39,9 @@ export default function SettingsWindow({ defaultTab = "settings" }: { defaultTab
       <TabsContent value="about" className="overflow-auto">
         <AboutTab />
       </TabsContent>
+      <TabsContent value="credits" className="overflow-auto">
+        <CreditsTab />
+      </TabsContent>
     </Tabs>
   );
 }