cleaned up styling for search results table

penumbra-zone · Aug 1, 2024 · 27f3543 · 27f3543
1 parent 0719695
commit 27f3543
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 25 deletions.
diff --git a/src/app/search/[query]/page.tsx b/src/app/search/[query]/page.tsx
@@ -27,11 +27,11 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-5 pt-5 items-center bg-primary">
-        <h1 className="sm:text-2xl font-bold">Search results</h1>
-        <HydrationBoundary state={dehydrate(queryClient)}>
-          <SearchResultsTable className="sm:w-1/2 w-full" query={query}/>
-        </HydrationBoundary>
+    <div className="bg-primary flex flex-col gap-5 sm:p-8">
+      <h1 className="sm:text-2xl font-bold">Search results</h1>
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <SearchResultsTable className="w-full" query={query}/>
+      </HydrationBoundary>
     </div>
   );
 };

diff --git a/src/components/SearchResultsTable/columns.tsx b/src/components/SearchResultsTable/columns.tsx
@@ -2,13 +2,10 @@ import { type ColumnDef } from "@tanstack/react-table";
 import { SearchResult, type RelatedQuery } from ".";
 import Link from "next/link";
 
-
-type SearchResultsColumns = SearchResult;
-
 // NOTE: Search Results diverges from all the other table stylings in that most of the text is not xs on smaller devices.
 //       Until I start getting more data, it feels overkill to make it so small for now. This could turn out to be a dumb
 //       pre-caution that I will have to revert sooner than later.
-export const columns : Array<ColumnDef<SearchResultsColumns>> = [
+export const columns : Array<ColumnDef<SearchResult>> = [
   {
     accessorKey: "kind",
     header: () => <div className="text-sm">Kind</div>,
@@ -46,16 +43,19 @@ export const columns : Array<ColumnDef<SearchResultsColumns>> = [
       // }
       if (related !== undefined && related.length !== 0) {
         return (
-        <ul>
-          {/* {related.map(({ type, indentifier }, i) => <li key={i}>{type} : {indentifier}</li>)} */}
-          {related.map(({ type, hash }, i) => {
-            return <li key={i}>{type}: <Link href={`/transaction/${hash}`} className="text-link text-sm"><pre>{hash}</pre></Link></li>;
-          })
-          }
-        </ul>
+          <div className="flex flex-col w-full">
+            {related.map(({type, hash}, i) => {
+              return (
+                <div className="flex gap-x-4 gap-y-2 justify-start" key={i}>
+                  <p className="text=sm">{type}</p>
+                  <Link href={`/transaction/${hash}`} className="text-link text-sm"><pre className="sm:max-w-full max-w-24 overflow-hidden overflow-ellipsis">{hash}</pre></Link>
+                </div>
+              );
+            })}
+          </div>
         );
       }
-      return <p className="text-center">None</p>;
+      return <p className="text-center text-sm">None</p>;
     },
   },
 ];
diff --git a/src/components/SearchResultsTable/index.tsx b/src/components/SearchResultsTable/index.tsx
@@ -5,7 +5,6 @@ import { type FC } from "react";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { getBaseURL } from "@/lib/utils";
 
-
 export interface RelatedQuery {
   type: string,
   hash: string,
@@ -16,9 +15,7 @@ export interface SearchResult {
   identifier: string,
   related?: RelatedQuery[],
 }
-// TODO?
-// interface TransactionSearchResult {}
-// interface BlockSearchResult {}
+
 interface SearchResultsTableProps {
   className?: string,
   query: string,
@@ -33,12 +30,13 @@ const SearchResultsTable : FC<SearchResultsTableProps> = ({ className, query })
       return await data.json();
     },
     queryKey: ["searchResult", query],
-  });
+  }) as { data: SearchResult };
 
-  const relatedVisible = !!(data as SearchResult)?.related?.at(0);
+  const relatedVisible = !!data?.related?.at(0);
+  const columnVisibility = { "related": relatedVisible };
 
   return (
-    <DataTable className={className} columns={columns} data={[data]} columnVisibility={{ "related": relatedVisible }}/>
+    <DataTable className={className} columns={columns} data={[data]} columnVisibility={columnVisibility}/>
   );
 };
 

diff --git a/src/components/TransactionsTable/columns.tsx b/src/components/TransactionsTable/columns.tsx
@@ -33,7 +33,7 @@ export const columns : Array<ColumnDef<EventColumns>> = [
     header: () => <div className="text-sm">Hash</div>,
     cell: ({ row }) => {
       const tx_hash : string = row.getValue("tx_hash");
-      return <Link href={`/transaction/${tx_hash}`} className="text-link text-sm"><pre className="sm:max-w-full max-w-[90px] overflow-hidden overflow-ellipsis">{tx_hash}</pre></Link>;
+      return <Link href={`/transaction/${tx_hash}`} className="text-link text-sm"><pre className="sm:max-w-full max-w-24 overflow-hidden overflow-ellipsis">{tx_hash}</pre></Link>;
     },
   },
 ];