feat: implement oneline toggle on output key (#9)

This pull request implements a oneline toggle option for output, on select the oneline option the multiple line in the output key is replaced with a `\n` string removing the literal line breaks. **Screencast** [screencast-bpconcjcammlapcogcnnelfmaeghhagj-2024.04.03-05_37_06.webm](https://github.com/babblebey/private-key-converter/assets/25631971/0bdfc397-a1b4-48d3-923a-46a003ee878d) 🔑
babblebey · Apr 3, 2024 · 8f4883e · 8f4883e
1 parent 4236363
commit 8f4883e
Showing 1 changed file with 36 additions and 11 deletions.
diff --git a/app/page.js b/app/page.js
@@ -33,6 +33,7 @@ export default function Home() {
   const [copied, setCopied] = useState(false);
   const [loading, setLoading] = useState(false); 
   const [error, setError] = useState(initError);
+  const [oneline, setOneline] = useState(false);
 
   const [inputKey, setInputKey] = useState("");
   const [outputKey, setOutputKey] = useState(null);
@@ -112,27 +113,52 @@ export default function Home() {
         <>
           <Success />
 
-          <div className="max-w-4xl mx-auto">
+          <div className="max-w-3xl mx-auto">
             <pre className="px-4 py-3 mt-8 font-mono text-left bg-transparent border rounded border-zinc-600 focus:border-zinc-100/80 focus:ring-0 sm:text-sm text-zinc-100">
               <div className="flex items-start px-1 pt-6 relative text-sm">
-                <label htmlFor="inputKey" className="absolute top-0 text-xs font-medium text-zinc-100">
-                  { keyTypes[outputFormat].title }
-                </label>
+                <div className="absolute top-0 w-full flex items-center justify-between">
+                  <label htmlFor="outputKey" className="text-xs font-medium text-zinc-100">
+                    { keyTypes[outputFormat].title }
+                  </label>
+                  <span className="flex items-center space-x-2">
+                    <label for="oneline" htmlFor="oneline" className="text-xs uppercase font-medium text-zinc-100">
+                      Oneline
+                    </label>
+                    <input 
+                      type="checkbox" 
+                      id="oneline" 
+                      name="oneline" 
+                      className="rounded-sm"
+                      checked={oneline}
+                      onChange={(e) => setOneline(prevState => !prevState)}
+                    />
+                  </span>
+                </div>
                 <div aria-hidden="true" className="pr-4 font-mono border-r select-none border-zinc-300/5 text-zinc-700">
                   {Array.from({
-                    length: outputKey.split("\n").length,
+                    length: oneline ? 1 : outputKey.split("\n").length,
                   }).map((_, index) => (
                     <Fragment key={index}>
                       {(index + 1).toString().padStart(2, "0")}
                       <br />
                     </Fragment>
                   ))}
                 </div>
-                <div>
-                  <pre className="flex overflow-x-auto">
-                    <code className="px-4 text-left">{outputKey}</code>
-                  </pre>
-                </div>
+                { oneline ? (
+                  <input
+                    type="text"
+                    readOnly
+                    className="w-full pl-4 p-0 text-base bg-transparent border-0 appearance-none resize-none hover:resize text-zinc-100 placeholder-zinc-500 focus:ring-0 sm:text-sm"
+                    value={outputKey?.replace(/\n/g, "\\n")}
+                  />
+                ) : (
+                  <textarea
+                    readOnly
+                    className="w-full pl-4 p-0 text-base bg-transparent border-0 appearance-none resize-none hover:resize text-zinc-100 placeholder-zinc-500 focus:ring-0 sm:text-sm"
+                    value={outputKey}
+                    rows={Math.max(5, outputKey?.split("\n").length)}
+                  />
+                ) }
               </div>
             </pre>
 
@@ -188,7 +214,6 @@ export default function Home() {
                 ))}
               </div>
               <textarea
-                type="text"
                 name="inputKey"
                 id="inputKey"
                 required