From 887688bb93b56cf2bd6ec42230912ff7f0513a1d Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Mar 2021 12:28:07 +0300
Subject: feat: add Select component
---
src/components/Select.tsx | 34 ++++++++++++++++++++++++++++++++++
1 file changed, 34 insertions(+)
create mode 100644 src/components/Select.tsx
(limited to 'src/components/Select.tsx')
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 0000000..18eb0ed
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Field } from 'formik';
+
+interface Option {
+ key: string;
+ label: string;
+}
+
+export interface Props extends React.SelectHTMLAttributes<HTMLSelectElement> {
+ label?: string;
+ options: Option[];
+}
+
+const SelectBase: React.FC<Props> = ({ label, options, ...props }) => {
+ return (
+ <div className="m-2 mb-4 flex flex-col">
+ <label htmlFor={props?.name} className="mb-1 text-gray-700">{label}</label>
+ <select
+ id={props?.name}
+ placeholder={label}
+ className="p-2 border-2 border-black bg-white focus:outline-none"
+ {...props}
+ >
+ {options?.map(option => (
+ <option value={option.key} key={option.key}>{option.label}</option>
+ ))}
+ </select>
+ </div>
+ );
+};
+
+const Select: React.FC<Props> = props => <Field {...props} as={SelectBase} />;
+
+export default Select;
--
cgit v1.2.3