From 856958e283acc7836d6d838d9fe6de800ffb0f43 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        | 26 ++++++++++++++++++--------
 frontend/tailwind.config.js           | 11 ++++++++++-
 3 files changed, 28 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..d36b9f4 100644
--- a/frontend/src/library/input.tsx
+++ b/frontend/src/library/input.tsx
@@ -1,15 +1,25 @@
-import styles from './input.module.css';
+import React from 'react';
+import './input.css';
 
-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: [],
 }