chore: improve responsibility

src/App.jsx

@@ -15,62 +15,47 @@ function App() {
   useDocumentTitle(PAGE_TITLE);
   return (
     <div className="bg-neutral-50 h-screen flex">
-      <div className="flex-col justify-between items-center flex max-w-7xl mx-auto flex-1">
-        <div className="flex-col justify-center items-center gap-10 flex w-full">
-          <div className="h-20 p-4 justify-between items-center inline-flex w-full ">
-            <img className="w-36" src={brandLogo} />
-            <div className="justify-start items-center gap-6 flex ">
-              <ConnectButton />
-            </div>
+      <div className="flex-col justify-between items-center flex max-w-7xl mx-auto gap-10 w-full">
+        <nav className="w-full flex justify-between gap-2 px-4 py-2">
+          <img className="w-36" src={brandLogo} />
+          <ConnectButton />
+        </nav>
+        <section className="flex-grow w-full flex flex-col items-center p-4 gap-6 text-center">
+          <div className="text-neutral-950 text-4xl lg:text-5xl font-bold leading-none">
+            {HERO_TEXT}
           </div>
-          <div className="flex-col justify-start items-center gap-16 flex px-4 lg:px-0">
-            <div className="flex-col justify-start items-center gap-4 fle">
-              <div className="self-stretch flex-col justify-start items-center gap-4 flex">
-                <div className="self-stretch text-center text-neutral-950 text-5xl font-bold leading-relaxed">
-                  {HERO_TEXT}
-                </div>
-                <div className="self-stretch h-10 text-center text-neutral-500 text-2xl font-bold leading-normal">
-                  {SUB_TEXT}
-                </div>
-              </div>
-            </div>
+          <div className="text-neutral-500 text-lg lg:text-2xl font-bold leading-normal">
+            {SUB_TEXT}
+          </div>
+          <div className="w-full flex-1 pt-6  max-w-xl text-left">
             <Search />
           </div>
-        </div>
-        <div className="px-4 py-6 border-t border-gray-200 flex-col justify-start items-center gap-6 flex w-full">
-          <div className="self-stretch justify-between items-left lg:items-center inline-flex flex-col lg:flex-row gap-4">
-            <div className="justify-start items-center gap-6 flex">
+        </section>
+        <footer className="w-full border-t px-4 py-6 flex flex-col gap-4">
+          <ul className="flex gap-8 text-neutral-700 text-sm font-medium uppercase">
+            <li>
+              <a href={`https://twitter.com/${TWITTER_HANDLE}`}>Twitter</a>
+            </li>
+            <li>
+              <a href="https://github.com/namebasehq/wallet-id">GitHub</a>
+            </li>
+            <li>
               <a
-                className="text-neutral-700 text-sm font-medium uppercase"
-                href={`https://twitter.com/${TWITTER_HANDLE}`}
-              >
-                Twitter
-              </a>
-              <a
-                className="text-neutral-700 text-sm font-medium uppercase"
-                href="https://github.com/namebasehq/wallet-id"
-              >
-                GitHub
-              </a>
-              <a
-                className="text-neutral-700 text-sm font-medium uppercase"
                 href={`https://opensea.io/collection/handshake-slds?search[stringTraits][0][name]=TLD&search[stringTraits][0][values][0]=${TLD}`}
               >
-                Opensea
+                OpenSea
               </a>
+            </li>
+          </ul>
+          <div className="flex items-center gap-3">
+            <div className="text-neutral-400 text-xs font-normal uppercase">
+              powered by
             </div>
-            <div className="justify-start items-center gap-4 flex">
-              <div className="justify-start items-center gap-4 flex">
-                <div className="text-neutral-400 text-xs font-normal uppercase">
-                  powered by
-                </div>
-                <a href="https://hns.id">
-                  <img src={hnsLogo} className="w-24" />
-                </a>
-              </div>
-            </div>
+            <a href="https://hns.id">
+              <img src={hnsLogo} className="w-24" />
+            </a>
           </div>
-        </div>
+        </footer>
       </div>
     </div>
   );

src/components/Badge.jsx

@@ -5,7 +5,7 @@ export const Badge = ({ children, variant, title }) => (
   <div
     title={title}
     className={cn(
-      'px-3 py-2 bg-opacity-10 rounded-2xl justify-center items-center gap-2 flex text-xs font-semibold leading-none',
+      'px-3 py-2 bg-opacity-10 rounded-2xl justify-center items-center gap-2 flex text-xs font-semibold leading-none whitespace-nowrap',
       {
         'bg-emerald-500 text-emerald-500': variant === 'success',
         'bg-amber-500 text-amber-500': variant === 'premium',

src/components/Debug.jsx

@@ -0,0 +1,27 @@
+import { DEV_MODE } from '../constants';
+import PropTypes from 'prop-types';
+
+export const Debug = ({ error, data }) => {
+  if (!DEV_MODE) return;
+
+  return (
+    <div className="flex flex-col gap-2 mt-10 text-left">
+      <span className="text-red-600 font-semibold bg-yellow-300 px-4 py-2 rounded-md">
+        TESTNET
+      </span>
+      {error && (
+        <div className="p-2 text-red-600 bg-red-100 rounded-md">{error}</div>
+      )}
+      {data && (
+        <pre className="p-2 text-gray-500 bg-gray-100 border border-gray-500 rounded-lg overflow-scroll">
+          {JSON.stringify(data, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+};
+
+Debug.propTypes = {
+  error: PropTypes.any,
+  data: PropTypes.any,
+};

src/components/search/Search.jsx

@@ -1,12 +1,13 @@
-import { useState } from 'react';
 import { useDebounce } from '@uidotdev/usehooks';
+import { useState } from 'react';
 import { SearchInput } from './SearchInput';
 import { SearchStatus } from './SearchStatus';
 
+import { TLD } from '../../constants';
+import { useDomainStatus } from '../../hooks/useDomainStatus';
+import { Debug } from '../Debug';
 import { SearchCTA } from './SearchCTA';
 import { SearchPrice } from './SearchPrice';
-import { DEV_MODE, TLD } from '../../constants';
-import { useDomainStatus } from '../../hooks/useDomainStatus';
 
 export const Search = () => {
   // "term" is the value from the input (first part if it contains a ".")
@@ -23,56 +24,37 @@ export const Search = () => {
   const show = !!label;
 
   // if there's a "." (like "foo.bar"), we only use the first part (foo)
-  const onChange = (term) => setTerm(term.split('.').at(0));
+  const onChange = (term = '') => setTerm(term.toLowerCase().split('.').at(0));
 
   // ensure the current data is related to the final search term
   const safeData = term === data?.label ? data : undefined;
 
   return (
     <>
-      <div className="w-full bg-white rounded-2xl border border-zinc-300 shadow">
+      <div className="flex-1 bg-white rounded-2xl border border-zinc-300 shadow">
         <SearchInput expand={show} onChange={onChange} />
         {show && (
-          <div className="w-full px-5 pt-3 pb-4 bg-white flex-col justify-start items-start gap-4 inline-flex rounded-b-2xl">
-            <div className="self-stretch py-1 justify-between items-center inline-flex">
-              <div className="rounded justify-start items-center gap-2 flex">
-                <div>
-                  <span className="text-neutral-950 text-xl font-medium leading-loose">
-                    {label}
-                  </span>
-                  <span className="text-neutral-400 text-xl font-medium leading-loose">
-                    .{TLD}
-                  </span>
-                </div>
+          <div className="w-full p-3 bg-white rounded-b-2xl inline-flex flex-col lg:flex-row gap-2 flex-1 lg:overflow-scroll">
+            <div className="flex-1 lg:w-full lg:overflow-scroll items-center gap-2 flex">
+              <div
+                className="text-xl font-medium leading-loose w-full lg:w-fit overflow-scroll"
+                style={{ scrollbarWidth: 'none' }}
+              >
+                <span className="text-neutral-950">{label}</span>
+                <span className="text-neutral-400">.{TLD}</span>
+              </div>
 
-                <SearchStatus details={safeData} />
-              </div>
-              <div className="justify-start items-center gap-4 flex">
-                <SearchPrice details={safeData} />
-                <SearchCTA details={safeData} />
-              </div>
+              <SearchStatus details={safeData} />
+            </div>
+            <div className="shrink-0 flex items-center gap-4 justify-between lg:justify-end ">
+              <SearchPrice details={safeData} />
+              <SearchCTA details={safeData} />
             </div>
           </div>
         )}
       </div>
 
-      {DEV_MODE && (
-        <div className="flex flex-col gap-2">
-          <span className="text-red-600 font-semibold bg-yellow-300 px-4 py-2 rounded-md">
-            TESTNET
-          </span>
-          {error && (
-            <div className="p-2 text-red-600 bg-red-100 rounded-md">
-              {error}
-            </div>
-          )}
-          {data && (
-            <pre className="p-2 text-gray-500 bg-gray-100 border border-gray-500 rounded-lg">
-              {JSON.stringify(data, null, 2)}
-            </pre>
-          )}
-        </div>
-      )}
+      <Debug {...{ error, data }} />
     </>
   );
 };