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 · 08b7d68 · 08b7d68
1 parent bc535e7
commit 08b7d68
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 11 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.css b/frontend/src/library/input.css
@@ -0,0 +1,26 @@
+/* rules defined in this file are scoped to the js/ts file importing this.  */
+.uno-input {
+    box-sizing: border-box;
+    width: 392px;
+    height: 44px;
+    background: #d9d9d9;
+    border: 4px solid #000000;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 0;
+    font-size: 16px;
+    font-family: 'Kavoon';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 23.2px;
+    line-height: 29px;
+    color: black;
+}
+
+.uno-input::placeholder {
+    opacity: 0.5;
+    color: #ffffff;
+}
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,18 @@
-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
+>;
 
-function Input({ placeholder }: InputComponentProps) {
+const Input: React.FC<Props> = (props) => {
     return (
-        <div>
-            <input style={styles} placeholder={placeholder}></input>
-        </div>
+        <input
+            className="w-[392px] h-[44px] 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: [],
 }