Skip to content

Commit

Permalink
Client:Implemented the input component
Browse files Browse the repository at this point in the history
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
  • Loading branch information
ritwik-69 authored and shivansh-bhatnagar18 committed Jun 10, 2024
1 parent 3609ea5 commit 6098f08
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 9 deletions.
1 change: 0 additions & 1 deletion frontend/src/library/input.module.css

This file was deleted.

25 changes: 17 additions & 8 deletions frontend/src/library/input.tsx
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 6098f08

Please sign in to comment.