From c86d53859734bef23def3ba3935d73e0e751e4cd Mon Sep 17 00:00:00 2001
From: KingRainbow44 <kobedo11@gmail.com>
Date: Tue, 4 Apr 2023 23:42:35 -0400
Subject: [PATCH] Add character widget

---
 src/handbook/src/css/App.scss               |  3 ++
 src/handbook/src/css/widgets/Character.scss | 34 ++++++++++++++++
 src/handbook/src/ui/widgets/Character.tsx   | 43 +++++++++++++++++++++
 src/handbook/tsconfig.json                  |  2 +-
 4 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 src/handbook/src/css/widgets/Character.scss
 create mode 100644 src/handbook/src/ui/widgets/Character.tsx

diff --git a/src/handbook/src/css/App.scss b/src/handbook/src/css/App.scss
index 360e8b86d..6c070ecfe 100644
--- a/src/handbook/src/css/App.scss
+++ b/src/handbook/src/css/App.scss
@@ -4,6 +4,9 @@ html {
 
     --text-primary-color: #FFFFFF;
 
+    --legendary-color: #926d45;
+    --epic-color: #7b5c90;
+
     overflow: hidden;
 }
 
diff --git a/src/handbook/src/css/widgets/Character.scss b/src/handbook/src/css/widgets/Character.scss
new file mode 100644
index 000000000..de1e75337
--- /dev/null
+++ b/src/handbook/src/css/widgets/Character.scss
@@ -0,0 +1,34 @@
+.Character {
+    display: flex;
+    flex-direction: column;
+
+    background-color: var(--legendary-color);
+
+    max-width: 100px;
+    max-height: 125px;
+    border-radius: 15px;
+
+    overflow: hidden;
+}
+
+.Character_Icon {
+    width: 100%;
+    height: 100%;
+
+    max-width: 100px;
+    max-height: 100px;
+}
+
+.Character_Label {
+    align-items: center;
+    justify-content: center;
+    background-color: var(--secondary-color);
+
+    max-width: 100px;
+    height: 25px;
+
+    p {
+        color: var(--text-primary-color);
+        font-size: 18px;
+    }
+}
diff --git a/src/handbook/src/ui/widgets/Character.tsx b/src/handbook/src/ui/widgets/Character.tsx
new file mode 100644
index 000000000..ae4da9a6b
--- /dev/null
+++ b/src/handbook/src/ui/widgets/Character.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+
+import "@css/widgets/Character.scss";
+
+// Image base URL: https://paimon.moe/images/characters/(name).png
+
+/**
+ * Formats a character's name to fit with the reference name.
+ * Example: Hu Tao -> hu_tao
+ *
+ * @param name The character's name.
+ */
+function formatName(name: string): string {
+    return name.toLowerCase().replace(" ", "_");
+}
+
+interface IProps {
+    name: string; // paimon.moe reference name.
+}
+
+class Character extends React.PureComponent<IProps> {
+    constructor(props: IProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className={"Character"}>
+                <img
+                    className={"Character_Icon"}
+                    alt={this.props.name}
+                    src={`https://paimon.moe/images/characters/${formatName(this.props.name)}.png`}
+                />
+
+                <div className={"Character_Label"}>
+                    <p>{this.props.name}</p>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Character;
diff --git a/src/handbook/tsconfig.json b/src/handbook/tsconfig.json
index afb01a26c..cc3f783f9 100644
--- a/src/handbook/tsconfig.json
+++ b/src/handbook/tsconfig.json
@@ -5,7 +5,7 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,
-    "esModuleInterop": false,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,