fix: improved add github url form

EddieHubCommunity · Jul 10, 2024 · bbcd17d · bbcd17d
1 parent e833b0d
commit bbcd17d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/src/app/repo/add/form.js b/src/app/repo/add/form.js
@@ -5,6 +5,7 @@ import { useFormState } from "react-dom";
 import { getRepo } from "./action";
 import { SubmitButton } from "@/components/forms/SubmitButton";
 import Input from "@/components/forms/Input";
+import classNames from "@/utils/classNames";
 
 const initialState = {
   data: undefined,
@@ -19,10 +20,7 @@ export default function Form() {
     <form action={formAction}>
       <div className="space-y-12">
         <div className="border-b border-gray-900/10 pb-12">
-          <h2 className="text-base font-semibold leading-7 text-gray-900">
-            Add GitHub Repo
-          </h2>
-          <p className="mt-1 text-sm leading-6 text-gray-600">
+          <p className="mt-1 text-sm leading-6 text-gray-300">
             This will load the GitHub repo information from the GitHub API
           </p>
 
@@ -37,6 +35,52 @@ export default function Form() {
         </div>
       </div>
 
+      <fieldset>
+        <legend className="text-sm font-semibold leading-6">
+          Notifications
+        </legend>
+        <div className="mt-6 space-y-6">
+          <div className="relative flex gap-x-3">
+            <div className="flex h-6 items-center">
+              <input
+                id="comments"
+                name="comments"
+                type="checkbox"
+                className="h-4 w-4 rounded border-gray-700 text-indigo-600 focus:ring-indigo-600 disabled:bg-gray-400"
+                disabled={true}
+              />
+            </div>
+            <div className="text-sm leading-6">
+              <label htmlFor="comments" className="font-medium">
+                Trending
+              </label>
+              <p className="text-gray-500">
+                Get notified when you are trending on GitHub
+              </p>
+            </div>
+          </div>
+          <div className="relative flex gap-x-3">
+            <div className="flex h-6 items-center">
+              <input
+                id="candidates"
+                name="candidates"
+                type="checkbox"
+                className="h-4 w-4 rounded border-gray-700 text-indigo-600 focus:ring-indigo-600 disabled:bg-gray-400"
+                disabled={true}
+              />
+            </div>
+            <div className="text-sm leading-6">
+              <label htmlFor="candidates" className="font-medium">
+                Status change
+              </label>
+              <p className="text-gray-500">
+                Get notified when a status degrades and goes down a level
+              </p>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+
       <div className="mt-6 flex items-center justify-end gap-x-6">
         <SubmitButton text="SAVE" />
       </div>

diff --git a/src/components/forms/Input.js b/src/components/forms/Input.js
@@ -24,7 +24,7 @@ export default function Input({
       name={id}
       id={id}
       className={classNames(
-        "block w-full rounded-md border-0 sm:text-sm sm:leading-6 bg-slate-600",
+        "block w-full rounded-md border-0 sm:text-sm sm:leading-6 bg-gray-800",
         error
           ? "text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500"
           : "ring-gray-300 focus-within:ring-indigo-600",