#24: refactors

src/App.tsx

@@ -1,21 +1,13 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { Footer } from "./components/ui/footer";
 import { HomePage } from "./pages/Home";
 import { SearchResultsPage } from "./pages/SearchResults";
 import { ObjectDetailsPage } from "./pages/ObjectDetails";
 import { NotFoundPage } from "./pages/NotFound";
 import { TableDetailsPage } from "./pages/TableDetails";
 import { CrossmatchResultsPage } from "./pages/CrossmatchResults";
 import { RecordCrossmatchDetailsPage } from "./pages/RecordCrossmatchDetails";
-
-function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="min-h-screen flex flex-col">
-      <div className="flex-grow">{children}</div>
-      <Footer />
-    </div>
-  );
-}
+import { Layout } from "./components/ui/layout";
+import { SearchBar } from "./components/ui/searchbar";
 
 function App() {
   return (
@@ -25,6 +17,7 @@ function App() {
           path="/"
           element={
             <Layout>
+              <SearchBar logoSize="large" />
               <HomePage />
             </Layout>
           }
@@ -41,6 +34,7 @@ function App() {
           path="/object/:pgcId"
           element={
             <Layout>
+              <SearchBar />
               <ObjectDetailsPage />
             </Layout>
           }
@@ -49,6 +43,7 @@ function App() {
           path="/table/:tableName"
           element={
             <Layout>
+              <SearchBar />
               <TableDetailsPage />
             </Layout>
           }
@@ -65,6 +60,7 @@ function App() {
           path="/records/:recordId/crossmatch"
           element={
             <Layout>
+              <SearchBar />
               <RecordCrossmatchDetailsPage />
             </Layout>
           }
@@ -73,6 +69,7 @@ function App() {
           path="*"
           element={
             <Layout>
+              <SearchBar />
               <NotFoundPage />
             </Layout>
           }

src/components/ui/common-table.tsx

@@ -19,6 +19,7 @@ interface CommonTableProps {
   columnHeaderClassName?: string;
   cellClassName?: string;
   children?: React.ReactNode;
+  onRowClick?: (row: Record<string, CellPrimitive>, rowIndex: number) => void;
 }
 
 export function CommonTable({
@@ -30,6 +31,7 @@ export function CommonTable({
   columnHeaderClassName = "bg-gray-600 text-white",
   cellClassName = "text-gray-200",
   children,
+  onRowClick,
 }: CommonTableProps): ReactElement {
   function renderCell(value: CellPrimitive, column: Column): ReactElement {
     if (column.renderCell) {
@@ -90,7 +92,9 @@ export function CommonTable({
                 key={rowIndex}
                 className={classNames(
                   "bg-gray-700 hover:bg-gray-800 transition-colors duration-150",
+                  onRowClick && "cursor-pointer",
                 )}
+                onClick={() => onRowClick?.(row, rowIndex)}
               >
                 {columns.map((column) => {
                   const cellValue = row[column.name];

src/components/ui/dropdown-filter.tsx

@@ -8,7 +8,6 @@ interface DropdownFilterOption {
 interface DropdownFilterProps {
   title: string;
   options: DropdownFilterOption[];
-  defaultValue: string;
   value: string;
   onChange: (value: string) => void;
 }

src/components/ui/error-page.tsx

@@ -2,15 +2,15 @@ import { ReactElement, ReactNode } from "react";
 import { Button } from "./button";
 
 interface ErrorPageProps {
-  title: string;
+  title?: string;
   message: string;
   children?: ReactNode;
   className?: string;
   showLargeText?: boolean;
 }
 
 export function ErrorPage({
-  title,
+  title = "Encountered error",
   message,
   children,
   className = "",

src/components/ui/layout.tsx

@@ -0,0 +1,10 @@
+import { Footer } from "./footer";
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <div className="flex-grow p-8">{children}</div>
+      <Footer />
+    </div>
+  );
+}