feat: add basic ui and icons

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -1,5 +1,7 @@
 /* eslint-disable react/no-danger */
 import { forwardRef, TextareaHTMLAttributes } from "react";
+import { faChevronRight, faFolder, faKey, faRecycle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 import { useToggle } from "@app/hooks";
@@ -19,6 +21,10 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
   if (!content) return "EMPTY";
   if (!isVisible) return replaceContentWithDot(content);
 
+  // List all the all the variable and the enviroments
+  // On Environment select list all the secret name and folder
+  //
+
   let skipNext = false;
   const formatedContent = content.split(REGEX).flatMap((el, i) => {
     const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
@@ -61,6 +67,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     const [isSecretFocused, setIsSecretFocused] = useToggle();
 
     return (
+      // <>
       <div
         className={twMerge("w-full overflow-auto rounded-md no-scrollbar", containerClassName)}
         style={{ maxHeight: `${21 * 7}px` }}
@@ -73,6 +80,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
               </span>
             </code>
           </pre>
+
           <textarea
             style={{ whiteSpace: "break-spaces" }}
             aria-label="secret value"
@@ -90,6 +98,60 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
             readOnly={isReadOnly}
           />
         </div>
+
+        <div className="absolute z-10 w-60 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200">
+          <div className="z-10 h-full w-60 flex-col items-center justify-center rounded-md py-4 text-white">
+            {[
+              { name: "SECRET NAME", type: "secret" },
+              { name: "Folder", type: "folder" },
+              { name: "Development", type: "environment" }
+            ].map((e, i) => {
+              return (
+                <div
+                  className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 last:border-b-0"
+                  key={`key-${i + 1}`}
+                >
+                  {e.type === "folder" && (
+                    <>
+                      <div className="flex gap-2">
+                        <div className="flex items-center text-yellow-700">
+                          <FontAwesomeIcon icon={faFolder} />
+                        </div>
+                        <div>{e.name}</div>
+                      </div>
+                      <div className="flex items-center text-bunker-200">
+                        <FontAwesomeIcon icon={faChevronRight} />
+                      </div>
+                    </>
+                  )}
+
+                  {e.type === "environment" && (
+                    <>
+                      <div className="flex gap-2">
+                        <div className="flex items-center text-yellow-700">
+                          <FontAwesomeIcon icon={faRecycle} />
+                        </div>
+                        <div>{e.name}</div>
+                      </div>
+                      <div className="flex items-center text-bunker-200">
+                        <FontAwesomeIcon icon={faChevronRight} />
+                      </div>
+                    </>
+                  )}
+
+                  {e.type === "secret" && (
+                    <div className="flex gap-2">
+                      <div className="flex items-center text-yellow-700">
+                        <FontAwesomeIcon icon={faKey} />
+                      </div>
+                      <div>{e.name}</div>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
       </div>
     );
   }