Implement content frame

2 years ago · 7b22b17600
parent cd1d8dc7bf
commit 7b22b17600
6 changed files with 34 additions and 55 deletions
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@ -15,7 +15,7 @@ export function AppLayout({ pathName, children }: PropsWithChildren<Props>) {
      <Head>
        {/* https://nextjs.org/docs/messages/no-document-viewport-meta */}
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>{`Abacus Explorer | ${getHeadTitle(pathName)}`}</title>
+        <title>{`Abacus Explorer [BETA] | ${getHeadTitle(pathName)}`}</title>
      </Head>
      <div className="flex flex-col justify-between h-full min-h-screen w-full min-w-screen bg-beige-500">
        <Header />
--- a/src/components/layout/FloatingBox.tsx
+++ b/src/components/layout/FloatingBox.tsx
@ -2,16 +2,14 @@ import { PropsWithChildren } from 'react';

 interface Props {
  width?: string;
-  maxWidth?: string;
  classes?: string;
 }

 export function FloatingBox(props: PropsWithChildren<Props>) {
-  const { width, maxWidth, classes } = props;
+  const { width, classes } = props;
  return (
    <div
-      style={{ maxHeight: '80%' }}
-      className={`${width} ${maxWidth} p-4 bg-white shadow-md rounded-lg overflow-auto ${classes}`}
+      className={`${width} p-4 bg-white shadow-md rounded-sm overflow-auto ${classes}`}
    >
      {props.children}
    </div>
--- a/src/components/nav/ContentFrame.tsx
+++ b/src/components/nav/ContentFrame.tsx
@ -1,50 +1,15 @@
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { PropsWithChildren } from 'react';

-import { FloatingBox } from '../layout/FloatingBox';
-
 export function ContentFrame(props: PropsWithChildren) {
-  const { pathname } = useRouter();
-
  return (
    <div className="flex flex-col justify-center items-center h-full">
-      <div className="w-112 px-4 pt-2 pb-1 bg-red-400 rounded-t-lg">
-        <h1 className="text-gray-50 text-center">Abacus Explorer</h1>
-        <div className="flex justify-center mt-3 space-x-20">
-          <PageNavLink href="/" active={!pathname.includes('transfer')}>
-            Search
-          </PageNavLink>
-          <PageNavLink href="/transfer" active={pathname.includes('transfer')}>
-            Transfer
-          </PageNavLink>
-        </div>
-      </div>
-      <FloatingBox width="w-112" classes="relative -top-1">
+      <div
+        style={{ width: 'min(1024px,95vw)' }}
+        className="relative overflow-visible"
+      >
+        <div className="absolute -top-4 -left-4 -right-4 h-32 bg-green-500 rounded-sm z-10"></div>
        {props.children}
-      </FloatingBox>
+      </div>
    </div>
  );
 }
-
-function PageNavLink(
-  props: PropsWithChildren<{ href: string; active: boolean }>,
-) {
-  const { href, active, children } = props;
-  return (
-    <Link href={href}>
-      <a className="flex flex-col items-center transition-all hover:opacity-70 active:opacity-60">
-        <h2
-          className={`text-sm uppercase tracking-wide ${
-            active ? 'text-gray-50' : 'text-gray-100'
-          }`}
-        >
-          {children}
-        </h2>
-        <div
-          className={`w-full mt-1 h-1 bg-gray-50 ${active ? '' : 'hidden'}`}
-        />
-      </a>
-    </Link>
-  );
-}
--- a/src/components/nav/Footer.tsx
+++ b/src/components/nav/Footer.tsx
@ -25,7 +25,7 @@ export function Footer() {
            </p>
          </div>
        </div>
-        <div className="grid grid-rows-2 grid-cols-3 gap-y-4 gap-x-6">
+        <div className="grid grid-rows-2 grid-cols-3 gap-y-4 gap-x-8">
          <FooterIconLink
            to="https://twitter.com/Abacus_Network"
            imgSrc={Twitter}
--- a/src/features/search/SearchForm.tsx
+++ b/src/features/search/SearchForm.tsx
@ -1,15 +1,30 @@
-import { HrDivider } from '../../components/layout/HrDivider';
+import Image from 'next/future/image';

+import { FloatingBox } from '../../components/layout/FloatingBox';
+import SearchIcon from '../../images/icons/search.svg';
+
+// TODO text grays with ting of green
 export function SearchForm() {
-  // TODO consider using multiprovider here?
  return (
-    <>
-      <div className="flex flex-col justify-center items-center w-full">
-        <h2 className="text-gray-700">TODO</h2>
-        <div className="px-1 w-full">
-          <HrDivider classes="my-5" />
+    <div className="relative z-20">
+      <div className="flex items-center bg-white w-full rounded-sm">
+        <input
+          type="text"
+          placeholder="Search for messages by address, transaction hash, or block hash"
+          className="p2 sm:p-4 flex-1 h-12 sm:h-14 rounded-sm focus:outline-none"
+        />
+        <div className="bg-beige-500 h-12 sm:h-14 w-12 sm:w-14 flex items-center justify-center rounded-sm">
+          <Image src={SearchIcon} alt="Search" width={20} height={20} />
        </div>
      </div>
-    </>
+      <FloatingBox width="w-full" classes="mt-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-gray-800">Latest Messages</h2>
+          <div className="flex items-center">
+            <Image src={SearchIcon} alt="Filter" width={14} height={14} />
+          </div>
+        </div>
+      </FloatingBox>
+    </div>
  );
 }
--- a/src/images/icons/search.svg
+++ b/src/images/icons/search.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="6 5.949999809265137 36 36"><path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z"></path></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="6 5.949999809265137 36 36"><path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z"></path></svg>`