From 54f1e90896ea0f0ef26a782b19ce232dda8cd994 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)
Made changes to the index.html and tailwind config file to include
"kavoon" font
fixes:#77
---
frontend/index.html | 1 +
frontend/src/library/input.css | 26 ++++++++++++++++++++++++++
frontend/src/library/input.module.css | 1 -
frontend/src/library/input.tsx | 21 ++++++++++++---------
frontend/tailwind.config.js | 21 +++++++++++----------
5 files changed, 50 insertions(+), 20 deletions(-)
create mode 100644 frontend/src/library/input.css
delete mode 100644 frontend/src/library/input.module.css
diff --git a/frontend/index.html b/frontend/index.html
index e4b78ea..a8fef67 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,7 @@
+
Vite + React + TS
diff --git a/frontend/src/library/input.css b/frontend/src/library/input.css
new file mode 100644
index 0000000..5be685d
--- /dev/null
+++ 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
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..9b6e1ef 100644
--- 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
+>;
-function Input({ placeholder }: InputComponentProps) {
+const Input: React.FC = (props) => {
return (
-
-
-
+
);
-}
+};
export default Input;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 7d7d2c4..ffed489 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,12 +1,13 @@
/** @type {import('tailwindcss').Config} */
export default {
- mode: 'jit',
- content: [
- './src/**/*.{tsx,ts}',
- ],
- theme: {
- extend: {},
- },
- plugins: [],
-}
-
+ mode: 'jit',
+ content: ['./src/**/*.{tsx,ts}'],
+ theme: {
+ extend: {
+ fontFamily: {
+ kavoon: ['Kavoon', 'sans-serif'],
+ },
+ },
+ },
+ plugins: [],
+};