From 9484d76e7a870de686383e1ecddda04db890a7e6 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 17 Aug 2022 15:16:31 +0300
Subject: [PATCH] Styling list header

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/list/list.module.scss | 15 +++++++++++++++
 src/renderer/components/list/list.tsx         | 19 +++++++++++++------
 .../components/table-list/table-list.tsx      |  2 +-
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/list/list.module.scss b/src/renderer/components/list/list.module.scss
index 49226031bf..6aef13ade5 100644
--- a/src/renderer/components/list/list.module.scss
+++ b/src/renderer/components/list/list.module.scss
@@ -5,4 +5,19 @@
 
 .searchInput>label {
   box-shadow: none!important;
+}
+
+.listLayout {
+  background: var(--contentColor);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.controls {
+  display: flex;
+  gap: calc(var(--padding) * 2);
 }
\ No newline at end of file
diff --git a/src/renderer/components/list/list.tsx b/src/renderer/components/list/list.tsx
index 0c07ce175c..60a134125f 100644
--- a/src/renderer/components/list/list.tsx
+++ b/src/renderer/components/list/list.tsx
@@ -7,10 +7,11 @@ import styles from "./list.module.scss";
 import themeStyles from "./table-theme.module.scss";
 
 import React, { useState } from "react";
-import { SearchInput } from "../input";
+import { SearchInput, SearchInputUrl } from "../input";
 import type { TableOptions } from '@tanstack/react-table'
 
 import { TableList } from "../table-list/table-list";
+import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
 
 export type SearchFilter<T> = (item: T) => string;
 
@@ -28,18 +29,24 @@ export function List<T>({ columns, data, title, filters }: ListProps<T>) {
   ));
 
   return (
-    <>
-      <div className="flex align-center justify-between mb-6">
-        <div className="mr-6">
+    <div className={styles.listLayout}>
+      <div className={styles.header}>
+        <div>
           {title}
         </div>
         <div>
+          Showing {filteredData.length} items
+        </div>
+        <div className={styles.controls}>
+          <NamespaceSelectFilter id="object-list-layout-namespace-select-input" />
+          <SearchInputUrl />
+{/* 
           <SearchInput
             value={search}
             theme="round-black"
             onChange={setSearch}
             className={styles.searchInput}
-          />
+          /> */}
         </div>
       </div>
       <TableList
@@ -50,6 +57,6 @@ export function List<T>({ columns, data, title, filters }: ListProps<T>) {
       {filteredData.length == 0 && (
         <div className={styles.notFound}>No data found</div>
       )}
-    </>
+    </div>
   );
 }
diff --git a/src/renderer/components/table-list/table-list.tsx b/src/renderer/components/table-list/table-list.tsx
index b4af5e05ae..948b354366 100644
--- a/src/renderer/components/table-list/table-list.tsx
+++ b/src/renderer/components/table-list/table-list.tsx
@@ -1,4 +1,4 @@
-import type { TableOptions, SortingState, Table as TableType, ColumnDef } from "@tanstack/react-table";
+import type { SortingState, Table as TableType, ColumnDef } from "@tanstack/react-table";
 import { useReactTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table";
 import React, { HTMLProps, useMemo } from "react";
 import { createColumnHelper } from "@tanstack/react-table";