From f830f5b5e81731900373a9c32c3aa2c7888592aa Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Wed, 4 Jun 2025 15:50:39 +0800
Subject: [PATCH] Refactor HashGeneratorComponent to use new Input component
 and reorder elements

---
 .../Hash-Generator/HashGeneratorComponent.tsx | 87 +++++++++----------
 1 file changed, 41 insertions(+), 46 deletions(-)

diff --git a/src/components/PageComponents/Hash-Generator/HashGeneratorComponent.tsx b/src/components/PageComponents/Hash-Generator/HashGeneratorComponent.tsx
index 9a24b2d..b4ea0cd 100644
--- a/src/components/PageComponents/Hash-Generator/HashGeneratorComponent.tsx
+++ b/src/components/PageComponents/Hash-Generator/HashGeneratorComponent.tsx
@@ -69,67 +69,62 @@ export default () => {
   }
 
   return (
-    <section class="section">
-      <TextField class="input" value={plainText()} onChange={setPlainText}>
-        <TextField.Label class="input__label">Plain Text:</TextField.Label>
-        <TextField.TextArea class="input__textarea" />
-      </TextField>
+    <>
+      <section class="section">
+        <Input label="Plain Text" value={plainText()} onChange={setPlainText} isTextField></Input>
 
-      <Input label="Plain Text" value={plainText()} onChange={setPlainText} isTextField></Input>
+        <div class="output">
+          <MiniCard text="MD5" content={md5()} onClick={() => copyToClipboard(md5(), 'MD5')} />
+          <Alert for="MD5" trigger={copiedText() === 'MD5'} />
 
-      <div class="output">
-        {/* <span class="output__title">Results:</span> */}
+          <MiniCard text="SHA1" content={sha1()} onClick={() => copyToClipboard(sha1(), 'SHA1')} />
+          <Alert for="SHA1" trigger={copiedText() === 'SHA1'} />
 
-        <MiniCard text="MD5" content={md5()} onClick={() => copyToClipboard(md5(), 'MD5')} />
-        <Alert for="MD5" trigger={copiedText() === 'MD5'} />
+          <MiniCard text="SHA224" content={sha224()} onClick={() => copyToClipboard(sha224(), 'SHA224')} />
+          <Alert for="SHA224" trigger={copiedText() === 'SHA224'} />
 
-        <MiniCard text="SHA1" content={sha1()} onClick={() => copyToClipboard(sha1(), 'SHA1')} />
-        <Alert for="SHA1" trigger={copiedText() === 'SHA1'} />
+          <MiniCard text="SHA256" content={sha256()} onClick={() => copyToClipboard(sha256(), 'SHA256')} />
+          <Alert for="SHA256" trigger={copiedText() === 'SHA256'} />
 
-        <MiniCard text="SHA224" content={sha224()} onClick={() => copyToClipboard(sha224(), 'SHA224')} />
-        <Alert for="SHA224" trigger={copiedText() === 'SHA224'} />
+          <MiniCard text="SHA384" content={sha384()} onClick={() => copyToClipboard(sha384(), 'SHA384')} />
+          <Alert for="SHA384" trigger={copiedText() === 'SHA384'} />
 
-        <MiniCard text="SHA256" content={sha256()} onClick={() => copyToClipboard(sha256(), 'SHA256')} />
-        <Alert for="SHA256" trigger={copiedText() === 'SHA256'} />
+          <MiniCard text="SHA512" content={sha512()} onClick={() => copyToClipboard(sha512(), 'SHA512')} />
+          <Alert for="SHA512" trigger={copiedText() === 'SHA512'} />
 
-        <MiniCard text="SHA384" content={sha384()} onClick={() => copyToClipboard(sha384(), 'SHA384')} />
-        <Alert for="SHA384" trigger={copiedText() === 'SHA384'} />
+          <MiniCard text="SHA3" content={sha3()} onClick={() => copyToClipboard(sha3(), 'SHA3')} />
+          <Alert for="SHA3" trigger={copiedText() === 'SHA3'} />
 
-        <MiniCard text="SHA512" content={sha512()} onClick={() => copyToClipboard(sha512(), 'SHA512')} />
-        <Alert for="SHA512" trigger={copiedText() === 'SHA512'} />
+          <span class="output__title">with HMAC:</span>
+          <span class="output__description">Hash-based Message Authentication Code (HMAC) needs a secret passphrase to generate a hash.</span>
 
-        <MiniCard text="SHA3" content={sha3()} onClick={() => copyToClipboard(sha3(), 'SHA3')} />
-        <Alert for="SHA3" trigger={copiedText() === 'SHA3'} />
+          <TextField class="input" value={passphrase()} onChange={setPassphrase} defaultValue={passphrase()}>
+            <TextField.Label class="input__label">Secret Passphrase:</TextField.Label>
+            <TextField.TextArea class="input__textarea" />
+          </TextField>
 
-        <span class="output__title">with HMAC:</span>
-        <span class="output__description">Hash-based Message Authentication Code (HMAC) needs a secret passphrase to generate a hash.</span>
+          <MiniCard text="HMAC MD5" content={hmacMd5()} onClick={() => copyToClipboard(hmacMd5(), 'HMAC MD5')} />
+          <Alert for="HMAC MD5" trigger={copiedText() === 'HMAC MD5'} />
 
-        <TextField class="input" value={passphrase()} onChange={setPassphrase} defaultValue={passphrase()}>
-          <TextField.Label class="input__label">Secret Passphrase:</TextField.Label>
-          <TextField.TextArea class="input__textarea" />
-        </TextField>
+          <MiniCard text="HMAC SHA1" content={hmacSha1()} onClick={() => copyToClipboard(hmacSha1(), 'HMAC SHA1')} />
+          <Alert for="HMAC SHA1" trigger={copiedText() === 'HMAC SHA1'} />
 
-        <MiniCard text="HMAC MD5" content={hmacMd5()} onClick={() => copyToClipboard(hmacMd5(), 'HMAC MD5')} />
-        <Alert for="HMAC MD5" trigger={copiedText() === 'HMAC MD5'} />
+          <MiniCard text="HMAC SHA224" content={hmacSha224()} onClick={() => copyToClipboard(hmacSha224(), 'HMAC SHA224')} />
+          <Alert for="HMAC SHA224" trigger={copiedText() === 'HMAC SHA224'} />
 
-        <MiniCard text="HMAC SHA1" content={hmacSha1()} onClick={() => copyToClipboard(hmacSha1(), 'HMAC SHA1')} />
-        <Alert for="HMAC SHA1" trigger={copiedText() === 'HMAC SHA1'} />
+          <MiniCard text="HMAC SHA256" content={hmacSha256()} onClick={() => copyToClipboard(hmacSha256(), 'HMAC SHA256')} />
+          <Alert for="HMAC SHA256" trigger={copiedText() === 'HMAC SHA256'} />
 
-        <MiniCard text="HMAC SHA224" content={hmacSha224()} onClick={() => copyToClipboard(hmacSha224(), 'HMAC SHA224')} />
-        <Alert for="HMAC SHA224" trigger={copiedText() === 'HMAC SHA224'} />
+          <MiniCard text="HMAC SHA384" content={hmacSha384()} onClick={() => copyToClipboard(hmacSha384(), 'HMAC SHA384')} />
+          <Alert for="HMAC SHA384" trigger={copiedText() === 'HMAC SHA384'} />
 
-        <MiniCard text="HMAC SHA256" content={hmacSha256()} onClick={() => copyToClipboard(hmacSha256(), 'HMAC SHA256')} />
-        <Alert for="HMAC SHA256" trigger={copiedText() === 'HMAC SHA256'} />
+          <MiniCard text="HMAC SHA512" content={hmacSha512()} onClick={() => copyToClipboard(hmacSha512(), 'HMAC SHA512')} />
+          <Alert for="HMAC SHA512" trigger={copiedText() === 'HMAC SHA512'} />
 
-        <MiniCard text="HMAC SHA384" content={hmacSha384()} onClick={() => copyToClipboard(hmacSha384(), 'HMAC SHA384')} />
-        <Alert for="HMAC SHA384" trigger={copiedText() === 'HMAC SHA384'} />
-
-        <MiniCard text="HMAC SHA512" content={hmacSha512()} onClick={() => copyToClipboard(hmacSha512(), 'HMAC SHA512')} />
-        <Alert for="HMAC SHA512" trigger={copiedText() === 'HMAC SHA512'} />
-
-        <MiniCard text="HMAC SHA3" content={hmacSha3()} onClick={() => copyToClipboard(hmacSha3(), 'HMAC SHA3')} />
-        <Alert for="HMAC SHA3" trigger={copiedText() === 'HMAC SHA3'} />
-      </div>
-    </section>
+          <MiniCard text="HMAC SHA3" content={hmacSha3()} onClick={() => copyToClipboard(hmacSha3(), 'HMAC SHA3')} />
+          <Alert for="HMAC SHA3" trigger={copiedText() === 'HMAC SHA3'} />
+        </div>
+      </section>
+    </>
   )
 }