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) Made changes to the index.html and tailwind config file to include "kavoon" font fixes:#77
shivansh-bhatnagar18 · Jun 8, 2024 · aaa73d7 · aaa73d7
1 parent bc535e7
commit aaa73d7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 10 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://fonts.googleapis.com/css2?family=Kavoon&display=swap" rel="stylesheet">
     <title>Vite + React + TS</title>
   </head>
   <body>

diff --git a/frontend/src/library/input.module.css b/frontend/src/library/input.module.css
diff --git 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
@@ -5,7 +5,16 @@ export default {
     './src/**/*.{tsx,ts}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        kavoon: ['Kavoon', 'serif'],
+      },
+    },
+    extend: {
+      borderWidth: {
+        '3': '3px',
+      },
+    },
   },
   plugins: [],
 }