add ability to change github stats theme

src/components/addons.js

@@ -106,6 +106,30 @@ const CustomizeBadge = ({githubName, badgeOptions, onBadgeUpdate}) =>  {
   )
 }
 
+const CustomizeGithubStats = ({ githubStatsOptions, onStatsUpdate }) => {
+  return (
+    <label htmlFor="github-stats-theme">Theme:&nbsp;
+      <select
+        id="github-stats-theme"
+        onChange={({target: { value }}) => onStatsUpdate("theme", value)}
+        value={githubStatsOptions.theme}
+      >
+        <option value={ null }>none</option>
+        <option value="dark">Dark</option>
+        <option value="radical">Radical</option>
+        <option value="merko">Merko</option>
+        <option value="gruvbox">Gruvbox</option>
+        <option value="tokyonight">Tokyonight</option>
+        <option value="onedark">Onedark</option>
+        <option value="cobalt">Cobalt</option>
+        <option value="synthwave">Synthwave</option>
+        <option value="highcontrast">Highcontrast</option>
+        <option value="dracula">Dracula</option>
+      </select>
+    </label>
+  )
+}
+
 const Addons = props => {
   const [debounce, setDebounce] = useState(undefined);
   const [badgeOptions, setBadgeOptions] = useState({
@@ -122,6 +146,10 @@ const Addons = props => {
     })
   }, [props.data.badgeStyle, props.data.badgeColor, props.data.badgeLabel])
 
+  const [githubStatsOptions, setGithubStatsOptions] = useState({
+    theme: ""
+  });
+
   const blogPostPorkflow = () => {
     let payload = {
       dev: {
@@ -159,6 +187,13 @@ const Addons = props => {
     clearTimeout(debounce);
     setDebounce(setTimeout(callback, 300));
   }
+
+  const onStatsUpdate = (option, value) => {
+    const newStatsOptions = {...githubStatsOptions, [option]: value}
+    setGithubStatsOptions(newStatsOptions)
+    props.handleDataChange("githubStatsOptions", {target: {value: newStatsOptions}})
+  }
+
   return (
     <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
       <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
@@ -194,7 +229,14 @@ const Addons = props => {
         inputId="github-stats"
         inputChecked={props.data.githubStats}
         onInputChange={() => props.handleCheckChange("githubStats")}
-        Options={<CustomizeOptions title="Customize Github Stats Card" CustomizationOptions={<div>test</div>}/>}
+        Options={
+          <CustomizeOptions
+            title="Customize Github Stats Card"
+            CustomizationOptions={
+          <CustomizeGithubStats githubStatsOptions={githubStatsOptions} onStatsUpdate={onStatsUpdate}/>
+            }
+          />
+        }
       >
         display github profile stats card
       </AddonsItem>

src/components/markdownPreview.js

@@ -267,12 +267,16 @@ const MarkdownPreview = props => {
     }
     return null
   }
-  const GitHubStatsPreview = props => {
-    let link =
-      "https://github-readme-stats.vercel.app/api?username=" +
-      props.github +
-      "&show_icons=true"
-    if (props.show) {
+  const GitHubStatsPreview = ({github, options, show })=> {
+    const params = {
+      username: github,
+      show_icons: true,
+      ...options.theme && { theme: options.theme }
+    }
+    const query_string = Object.entries(params).map(([key, value]) => `${key}=${value}`).join("&")
+    const link = `https://github-readme-stats.vercel.app/api?${query_string}`
+
+    if (show) {
       return (
         <div className="text-center mx-4 mb-4">
           <img src={link} alt={props.github} />
@@ -352,6 +356,7 @@ const MarkdownPreview = props => {
         <GitHubStatsPreview
           show={props.data.githubStats}
           github={props.social.github}
+          options={props.data.githubStatsOptions}
         />
       </div>
     </div>

src/pages/index.js

@@ -63,6 +63,9 @@ const DEFAULT_DATA = {
   badgeLabel: "Profile views",
   githubProfileTrophy: false,
   githubStats: false,
+  githubStatsOptions: {
+    theme: ""
+  },
   topLanguages: false,
   devDynamicBlogs: false,
   mediumDynamicBlogs: false,
@@ -154,6 +157,7 @@ const IndexPage = () => {
   }
 
   const handleDataChange = (field, e) => {
+    debugger
     let change = { ...data }
     change[field] = e.target.value
     setData(change)