customizable diploma

app/components/generate-diploma.tsx

@@ -5,9 +5,10 @@ import downloadPDF from "./download-pdf";
 type DiplomaProps = {
   username: string;
   major: string;
+  degree: string;
 };
 
-async function generateDiploma({ username, major }: DiplomaProps) {
+async function generateDiploma({ username, major, degree }: DiplomaProps) {
   // Fetch the PDF with form fields
   const formUrl = "/template_diploma.pdf";
   // const formUrl = "https://raw.githubusercontent.com/WildChickenUniversity/WildChickenUniversity/master/assets/template_diploma.pdf"
@@ -39,13 +40,16 @@ async function generateDiploma({ username, major }: DiplomaProps) {
   // Get all fields in the PDF by their names
   const majorField = form.getTextField("major");
   const nameField = form.getTextField("name");
+  const degreeField = form.getTextField("degree");
 
   // idiot-proof
   // just please don't enter a super long major name :)
   const widthMajorField = 450;
+  const widthDegreeField = 450;
   const widthNameField = 350;
   const widthMajor = major.length * 40;
   const widthName = username.length * 40;
+  const widthDegree = degree.length * 40;
   if (widthMajorField < widthMajor) {
     let fontSizeMajor = widthMajorField / major.length;
     majorField.setFontSize(fontSizeMajor);
@@ -54,17 +58,25 @@ async function generateDiploma({ username, major }: DiplomaProps) {
     let fontSizeName = widthNameField / major.length;
     majorField.setFontSize(fontSizeName);
   }
+  if (widthNameField < widthName) {
+    let fontSizeName = widthNameField / major.length;
+    majorField.setFontSize(fontSizeName);
+  }
 
   // Fill in the name field
   majorField.setText(major);
   nameField.setText(username);
+  degreeField.setText(degree);
 
   majorField.updateAppearances(
     englishUnicode.test(major) ? chomskyFont : sourceHanSerif
   );
   nameField.updateAppearances(
     englishUnicode.test(username) ? chomskyFont : sourceHanSerif
   );
+  degreeField.updateAppearances(
+    englishUnicode.test(degree) ? chomskyFont : sourceHanSerif
+  );
 
   // Flatten the form fields
   form.flatten();

app/diploma/page.tsx

@@ -6,22 +6,30 @@ import NavPath from "../components/nav-path";
 export default function Diploma() {
   const [username, setUsername] = useState("");
   const [major, setMajor] = useState("");
+  const [degree, setDegree] = useState("Bachelor of Chicken");
   const [customMajor, setCustomMajor] = useState("");
   const [enableCustomMajor, setEnableCustomMajor] = useState(false);
-
+  const [customDegree, setCustomDegree] = useState("");
+  const [enableCustomDegree, setEnableCustomDegree] = useState(false);
   const handleSumbit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const majorField: string =
       enableCustomMajor && customMajor !== "" ? customMajor : major;
-    await createDiplomaPDF({ username, major: majorField });
+    await createDiplomaPDF({ username, major: majorField, degree });
   };
 
-  const handleSelectChange = async (value: string) => {
+  const handleSelectChangeMajor = async (value: string) => {
     setMajor(value);
     // Show the input field if the user selects "other"
     setEnableCustomMajor(value === "other");
   };
 
+  const handleSelectChangeDegree = async (value: string) => {
+    setDegree(value);
+    // Show the input field if the user selects "other"
+    setEnableCustomDegree(value === "other");
+  };
+
   return (
     <div className="flex justify-center items-center min-h-screen bg-white dark:bg-gray-950">
       <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
@@ -77,7 +85,7 @@ export default function Diploma() {
                 name="major"
                 value={major}
                 onChange={(e) => {
-                  handleSelectChange(e.target.value);
+                  handleSelectChangeMajor(e.target.value);
                   setMajor(e.target.value);
                 }}
               >
@@ -102,6 +110,38 @@ export default function Diploma() {
               )}
             </div>
           </div>
+          <div className="flex mb-4 items-center">
+            <div className="flex-grow">
+              <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Degree
+              </label>
+              <select
+                className="mb-2 relative inline-block w-5/12 appearance-none shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
+                name="degree"
+                value={degree}
+                onChange={(e) => {
+                  handleSelectChangeDegree(e.target.value);
+                  setDegree(e.target.value);
+                }}
+              >
+                <option value="Bachelor of Chicken">Bachelor of Chicken</option>
+                <option value="Master of Chicken">Master of Chicken</option>
+                <option value="Doctor of Philosophy">
+                  Doctor of Philosophy
+                </option>
+                <option value="other">Other</option>
+              </select>
+              {enableCustomDegree && (
+                <input
+                  className="relative ml-4 inline-block shadow-sm w-1/2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
+                  name="customDegree"
+                  value={customDegree}
+                  placeholder="Enter your degree"
+                  onChange={(e) => setCustomDegree(e.target.value)}
+                />
+              )}
+            </div>
+          </div>
           <div className="flex items-center justify-between">
             <button
               className="bg-blue-500 py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"