···

       
71
       
 
       
            <div class="input-field">

     

       
72
       
 
       
              <label htmlFor="theme">Theme</label>

     

       
73
       
 
       
              <select name="theme" id="theme" onChange={e => setTheme(e.target.value)}>

     

       
74
       
-
       
                {Object.keys(themes).map((th) => {

     

       
75
       
 
       
                  return (

     

       
76
       
-
       
                    <option value={th}>{themes[th]}</option>

     

       
77
       
 
       
                  )

     

       
78
       
 
       
                })}

     

       
79
       
 
       
              </select>

     
···

       
81
       
 
       
            <div class="input-field">

     

       
82
       
 
       
              <label htmlFor="baseFont">Base Font</label>

     

       
83
       
 
       
              <select name="baseFont" id="baseFont" onChange={e => setTheme(e.target.value)}>

     

       
84
       
-
       
                {Object.keys(baseFonts).sort().map((bf) => {

     

       
85
       
 
       
                  return (

     

       
86
       
-
       
                    <option value={bf}>{baseFonts[bf].displayName}</option>

     

       
87
       
 
       
                  )

     

       
88
       
 
       
                })}

     

       
89
       
 
       
              </select>

     
···

       
91
       
 
       
            <div class="input-field">

     

       
92
       
 
       
              <label htmlFor="titleFont">Title Font</label>

     

       
93
       
 
       
              <select name="titleFont" id="titleFont" onChange={e => setTheme(e.target.value)}>

     

       
94
       
-
       
                {Object.keys({...titleFonts, ...baseFonts}).sort().map((tf) => {

     

       
95
       
 
       
                  return (

     

       
96
       
-
       
                    <option value={tf}>{{...titleFonts, ...baseFonts}.displayName}</option>

     

       
97
       
 
       
                  )

     

       
98
       
 
       
                })}

     

       
99
       
 
       
              </select>

     

···

       
71
       
 
       
            <div class="input-field">

     

       
72
       
 
       
              <label htmlFor="theme">Theme</label>

     

       
73
       
 
       
              <select name="theme" id="theme" onChange={e => setTheme(e.target.value)}>

     

       
74
       
+
       
                {Object.entries(themes).map((th) => {

     

       
75
       
 
       
                  return (

     

       
76
       
+
       
                    <option value={th[0]}>{th[1]}</option>

     

       
77
       
 
       
                  )

     

       
78
       
 
       
                })}

     

       
79
       
 
       
              </select>

     
···

       
81
       
 
       
            <div class="input-field">

     

       
82
       
 
       
              <label htmlFor="baseFont">Base Font</label>

     

       
83
       
 
       
              <select name="baseFont" id="baseFont" onChange={e => setTheme(e.target.value)}>

     

       
84
       
+
       
                {Object.entries(baseFonts).sort().map((bf) => {

     

       
85
       
 
       
                  return (

     

       
86
       
+
       
                    <option value={bf[0]}>{bf[1]}</option>

     

       
87
       
 
       
                  )

     

       
88
       
 
       
                })}

     

       
89
       
 
       
              </select>

     
···

       
91
       
 
       
            <div class="input-field">

     

       
92
       
 
       
              <label htmlFor="titleFont">Title Font</label>

     

       
93
       
 
       
              <select name="titleFont" id="titleFont" onChange={e => setTheme(e.target.value)}>

     

       
94
       
+
       
                {Object.entries({...titleFonts, ...baseFonts}).sort().map((tf) => {

     

       
95
       
 
       
                  return (

     

       
96
       
+
       
                    <option value={tf[0]}>{tf[1]}</option>

     

       
97
       
 
       
                  )

     

       
98
       
 
       
                })}

     

       
99
       
 
       
              </select>