From f9f8dd59eb2de9abf4d14cd4ebd2763ef20e537c Mon Sep 17 00:00:00 2001
From: ritwik-69 <72665321+ritwik-69@users.noreply.github.com>
Date: Fri, 7 Jun 2024 23:09:21 +0530
Subject: [PATCH] Client:Implemented the input component

This commit creates the Input component as discussed and made in figma.
As props it takes normal input properties like placeholder,value etc.
The styling has been done in input.css (I had to rename it input.css
from input.module.css as it was not working when importing)

fixes:#77
---
 frontend/src/library/input.module.css |  1 -
 frontend/src/library/input.tsx        | 25 +++++++++++++++++--------
 frontend/tailwind.config.js           | 11 ++++++++++-
 3 files changed, 27 insertions(+), 10 deletions(-)
 delete mode 100644 frontend/src/library/input.module.css

diff --git a/frontend/src/library/input.module.css b/frontend/src/library/input.module.css
deleted file mode 100644
index d5e3426..0000000
--- a/frontend/src/library/input.module.css
+++ /dev/null
@@ -1 +0,0 @@
-/* rules defined in this file are scoped to the js/ts file importing this.  */
diff --git a/frontend/src/library/input.tsx b/frontend/src/library/input.tsx
index 1455ab5..5d82b0b 100644
--- a/frontend/src/library/input.tsx
+++ b/frontend/src/library/input.tsx
@@ -1,15 +1,24 @@
-import styles from './input.module.css';
+import React from 'react';
 
-type InputComponentProps = {
-    placeholder?: string;
+type Props = React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+> & {
+    width?: string;
+    height?: string;
 };
 
-function Input({ placeholder }: InputComponentProps) {
+const Input: React.FC<Props> = ({
+    width = '392px',
+    height = '44px',
+    ...props
+}) => {
     return (
-        <div>
-            <input style={styles} placeholder={placeholder}></input>
-        </div>
+        <input
+            className={`w-[${width}] h-[${height}] bg-[#d9d9d9] border-4 border-black rounded-[20px] flex items-center justify-center text-center p-0 font-normal font-[Kavoon] text-[23.2px] leading-[29px] text-black placeholder-white placeholder-opacity-50"`}
+            {...props}
+        />
     );
-}
+};
 
 export default Input;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 7d7d2c4..5ec8494 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -5,7 +5,16 @@ export default {
     './src/**/*.{tsx,ts}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        kavoon: ['Kavoon', 'serif'],
+      },
+    },
+    extend: {
+      borderWidth: {
+        '3': '3px',
+      },
+    },
   },
   plugins: [],
 }