new timePicker

LK4268 · Feb 4, 2021 · 835b3b8 · 835b3b8
1 parent 08d2c13
commit 835b3b8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/components/kit/components/form/dateTimePicker/TimePicker.tsx b/components/kit/components/form/dateTimePicker/TimePicker.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const TimePicker = () => {
+    return (
+        <label className="text-gray-700" htmlFor="time">
+            <input
+                className="appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1"
+                type="time"
+            />
+        </label>
+    );
+};
diff --git a/pages/components/inputtext/index.tsx b/pages/components/inputtext/index.tsx
@@ -5,6 +5,7 @@ import SectionHeader from '../../../components/site/header/SectionHeader';
 import InputText from '../../../components/kit/components/form/inputtext/InputText';
 import InputArea from '../../../components/kit/components/form/inputtext/InputArea';
 import InputGroup from '../../../components/kit/components/form/inputtext/InputGroup';
+import { TimePicker } from '../../../components/kit/components/form/dateTimePicker/TimePicker';
 
 const InputTextPage: FC = () => {
     return (
@@ -101,6 +102,7 @@ const InputTextPage: FC = () => {
             />
             <ComponentLayout title="Group" element={<InputGroup />} component={InputText} />
             <ComponentLayout title="textarea" element={<InputArea />} component={InputArea} />
+            <ComponentLayout title="textarea" element={<TimePicker />} component={TimePicker} />
         </AppLayout>
     );
 };