From a4a1c456e0788ca52261efb38ff3998710a42a59 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 17 Apr 2021 13:08:48 +0300
Subject: feat: add Filters to Page

---
 src/containers/Page.tsx | 35 ++++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 13 deletions(-)

(limited to 'src/containers/Page.tsx')

diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
index ae9e231..2fe54fa 100644
--- a/src/containers/Page.tsx
+++ b/src/containers/Page.tsx
@@ -1,28 +1,37 @@
 import React from 'react';
 import Paper from '../components/Paper';
 import Button from '../components/Button';
-import { Action } from '../lib/ServiceContext';
+import { Action, Filter } from '../lib/ServiceContext';
+import { SelectBase } from '../components/Select';
 
 interface Props {
   title?: string;
   actions?: Action[];
+  filters?: Filter[];
   className?: string;
 }
 
 const style = 'mb-2 flex justify-between md:flex-row md:items-center';
 
-const Page: React.FC<Props> = ({ title, actions, className, children }) => (
-  <Paper className="xl:m-5">
-    <div className={`${style} ${(actions?.length || 0) > 1 ? 'flex-col items-start' : 'flex-row items-center'}`}>
-      <span className="text-2xl font-bold">{title}</span>
-      <div>
-        {actions?.map(action => (<Button {...action} key={action.name} size="sm">{action.name}</Button>))}
+const Page: React.FC<Props> = ({ title, actions, filters, className, children }) => {
+  return (
+    <Paper className="xl:m-5">
+      <div className={`${style} ${(actions?.length || 0) > 1 ? 'flex-col items-start' : 'flex-row items-center'}`}>
+        <span className="text-2xl font-bold">{title}</span>
+        <div className="flex">
+          <div className="mr-6">
+            {filters?.map(filter => (<SelectBase key={filter.field} options={filter.options} />))}
+          </div>
+          <div>
+            {actions?.map(action => (<Button {...action} key={action.name} size="sm">{action.name}</Button>))}
+          </div>
+        </div>
       </div>
-    </div>
-    <div className={className}>
-      {children}
-    </div>
-  </Paper>
-);
+      <div className={className}>
+        {children}
+      </div>
+    </Paper>
+  );
+};
 
 export default Page;
-- 
cgit v1.2.3