feat: Add basic nav menu

txpipe · Jan 18, 2022 · 4481f02 · 4481f02
1 parent d3a4bd9
commit 4481f02
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 7 deletions.
diff --git a/web/app/root.tsx b/web/app/root.tsx
@@ -15,6 +15,7 @@ export const meta: MetaFunction = () => {
 };
 
 import styles from "./tailwind.css";
+import SearchBox from "./components/search-box";
 
 export function links() {
     return [{ rel: "stylesheet", href: styles }];
@@ -30,10 +31,28 @@ export default function App() {
                 <Links />
             </head>
             <body>
-                <Outlet />
-                <ScrollRestoration />
-                <Scripts />
-                {process.env.NODE_ENV === "development" && <LiveReload />}
+                <div>
+                    <div className="flex justify-between items-center p-4 bg-gray-100">
+                        <div className="mr-4 flex-grow">
+                            <h1 className="tracking-tight font-extrabold text-gray-900 text-2xl ">
+                                <span className="m-auto text-indigo-600">Oura Demo</span> &gt; <span>CIP-25 Search Engine</span>
+                            </h1>
+                        </div>
+                        <div className="mr-4">
+                            <a href="/" className="rounded-2xl px-4 py-2 bg-gray-200 text-gray-500 text-lg">Home</a>
+                        </div>
+                        <div className="mr-4">
+                            <a href="/shuffle" className="rounded-2xl px-4 py-2 bg-gray-200 text-gray-500 text-lg">Random Shuffle</a>
+                        </div>
+                        <div className="mr-4">
+                            <SearchBox />
+                        </div>
+                    </div>
+                    <Outlet />
+                    <ScrollRestoration />
+                    <Scripts />
+                    {process.env.NODE_ENV === "development" && <LiveReload />}
+                </div>
             </body>
         </html>
     );

diff --git a/web/app/routes/policies/$id.tsx b/web/app/routes/policies/$id.tsx
@@ -37,7 +37,6 @@ export default function Policy() {
                             List of CIP-25 assets linked to the policy <span className="bg-gray-100 rounded-md px-4 py-2">{load?.policyId}</span>
                         </p>
                     </div>
-                    <SearchBox />
                 </div>
 
                 {!load && <div>Please specify a valid policy id</div>}

diff --git a/web/app/routes/search/index.tsx b/web/app/routes/search/index.tsx
@@ -38,7 +38,6 @@ export default function () {
                             List of CIP-25 assets matching the specified term <span className="bg-gray-100 rounded-md px-4 py-2">{load?.term}</span>
                         </p>
                     </div>
-                    <SearchBox />
                 </div>
 
                 {!load && <div>Please specify a valid search term</div>}

diff --git a/web/app/routes/shuffle/index.tsx b/web/app/routes/shuffle/index.tsx
@@ -29,7 +29,6 @@ export default function () {
                             Random list of CIP-25 assets available in Cardano mainnet
                         </p>
                     </div>
-                    <SearchBox />
                 </div>
                 <div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-16">
                     {records.map(dto => <AssetCard key={dto.cip25_asset.policy + dto.cip25_asset.asset} dto={dto} onSelect={setSelected} />)}

diff --git a/web/app/tailwind.css b/web/app/tailwind.css
@@ -515,6 +515,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin: auto;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -551,6 +556,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 1rem;
 }
 
+.-mt-24 {
+  margin-top: -6rem;
+}
+
+.-mt-40 {
+  margin-top: -10rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -591,6 +608,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 100vh;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
+.h-40 {
+  height: 10rem;
+}
+
 .min-h-0 {
   min-height: 0px;
 }
@@ -682,6 +707,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   align-items: stretch;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -751,6 +780,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-radius: 1rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -831,6 +864,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(79 70 229 / 0.3);
 }
 
+.bg-indigo-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(129 140 248 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(49 46 129 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -899,6 +947,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-bottom: 1rem;
 }
 
+.pb-40 {
+  padding-bottom: 10rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1042,6 +1094,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(79 70 229 / var(--tw-text-opacity));
 }
 
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .placeholder-gray-400::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));