mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-10 06:10:17 -04:00
Merge pull request #13 from cssgunc/advik-GEN-67-email-input
created email input
This commit is contained in:
commit
5041d3740b
|
@ -44,7 +44,7 @@ export default function Page() {
|
||||||
iconKey={'EmailInputIcon'}
|
iconKey={'EmailInputIcon'}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setconfirmEmail(e.target.value);
|
setconfirmEmail(e.target.value);
|
||||||
setEmailError(''); // Reset the error when the user types
|
|
||||||
}}/>
|
}}/>
|
||||||
{emailError && (
|
{emailError && (
|
||||||
<p className={`mt-2 ${emailError.includes('exists in the database') ? 'text-green-500' : 'text-red-500'}`}>
|
<p className={`mt-2 ${emailError.includes('exists in the database') ? 'text-green-500' : 'text-red-500'}`}>
|
||||||
|
|
17
compass/components/auth/EmailInput.tsx
Normal file
17
compass/components/auth/EmailInput.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import Input from '@/components/Input'
|
||||||
|
import { InputProps } from '@/utils/classes/InputProps';
|
||||||
|
|
||||||
|
const EmailInput: React.FunctionComponent<InputProps> = ({ type, title, placeholder, ...rest }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
type='email'
|
||||||
|
title="Enter your email address"
|
||||||
|
placeholder="janedoe@gmail.com"
|
||||||
|
iconKey={'EmailInputIcon'}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EmailInput;
|
9
compass/utils/classes/InputProps.ts
Normal file
9
compass/utils/classes/InputProps.ts
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
import { InputHTMLAttributes } from "react";
|
||||||
|
import { Icons } from "../constants";
|
||||||
|
|
||||||
|
export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
|
||||||
|
iconKey?: keyof typeof Icons; // Use keyof typeof to ensure the key exists in Icons
|
||||||
|
title?: string; // Assuming title is always a string
|
||||||
|
type?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user