rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-06 20:50:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #14 from cssgunc/nick-GEN-67-refactor

Browse Source 
code clean
This commit is contained in:
Meliora Ho 2024-03-02 15:35:28 -05:00 committed by GitHub
commit d375dacc34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 74 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
compass/app/auth/forgot_password/page.tsx
View File

@ -41,10 +41,9 @@ export default function Page() {
title="Enter your email address"
placeholder="janedoe@gmail.com"
value={confirmEmail}
iconKey={'EmailInputIcon'}
icon={'EmailInputIcon'}
onChange={(e) => {
setconfirmEmail(e.target.value);
}}/>
{emailError && (
<p className={`mt-2 ${emailError.includes('exists in the database') ? 'text-green-500' : 'text-red-500'}`}>

5
compass/app/auth/newPassword/page.tsx
View File

@ -1,8 +1,11 @@
// pages/index.tsx
"use client";
import { useState, useEffect } from 'react';
import Input from '@/components/Input';
import Button from '@/components/Button';
import Input from '@/components/Input1';
import Paper from '@/components/auth/Paper';

3
compass/app/page.tsx
View File

@ -1,5 +1,6 @@
// pages/index.tsx
"use client";
import Button from '@/components/Button';
import Input from '@/components/Input'
import InlineLink from '@/components/InlineLink';
@ -52,7 +53,7 @@ export default function Page() {
/>
<h1 className='font-bold text-xl text-purple-800'>Login</h1>
<div className="mb-4">
<Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} onChange={handleEmailChange} required/>
<Input type='email' title="Email" placeholder="janedoe@gmail.com" icon={'EmailInputIcon'} onChange={handleEmailChange} required/>
</div>
<div className="mb-6">
<PasswordInput title="Password" onChange={handlePasswordChange} required />

58
compass/components/Input.tsx
View File

@ -1,41 +1,33 @@
import { Icons } from '@/utils/constants';
import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
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;
icon?: ReactNode;
title?: ReactNode;
type?:ReactNode;
placeholder?:ReactNode
valid?:boolean;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
};
const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => {
const IconComponent = iconKey ? Icons[iconKey] : null;
const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid = true, ...rest }) => {
return (
<div className="mb-4">
{title && (
<div className="mb-1">
<label htmlFor={title} className="text-sm font-semibold text-gray-700">
{title}
</label>
</div>
)}
<div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden">
{IconComponent && (
<span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
<IconComponent className="h-5 w-5" />
</span>
)}
<input
{...rest}
type={type}
id={title}
placeholder={placeholder}
className="w-full border-none p-3 text-sm focus:ring-0"
style={{ boxShadow: 'none' }} // This ensures that the input doesn't have an inner shadow
/>
</div>
</div>
<div>
<label
htmlFor={title}
// this class name should be simplified, was just having problems with it
className={valid ? "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600" : "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"}
>
<span className="text-xs font-semibold text-gray-700"> {title} </span>
<input
type={type}
id={title}
placeholder={placeholder}
onChange={onChange}
className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
/>
</label>
</div>
);
};

34
compass/components/Input1.tsx
View File

@ -1,34 +0,0 @@
import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
type InputProps = InputHTMLAttributes<HTMLInputElement> & {
icon?: ReactNode;
title?: ReactNode;
type?:ReactNode;
placeholder?:ReactNode
valid?:boolean;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
};
const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid, ...rest }) => {
return (
<div>
<label
htmlFor={title}
// this class name should be simplified, was just having problems with it
className={valid ? "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600" : "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"}
>
<span className="text-xs font-semibold text-gray-700"> {title} </span>
<input
type={type}
id={title}
placeholder={placeholder}
onChange={onChange}
className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
/>
</label>
</div>
);
};
export default Input;

42
compass/components/InputOld.tsx Normal file
View File

@ -0,0 +1,42 @@
import { Icons } from '@/utils/constants';
import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
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;
};
const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => {
const IconComponent = iconKey ? Icons[iconKey] : null;
return (
<div className="mb-4">
{title && (
<div className="mb-1">
<label htmlFor={title} className="text-sm font-semibold text-gray-700">
{title}
</label>
</div>
)}
<div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden">
{IconComponent && (
<span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
<IconComponent className="h-5 w-5" />
</span>
)}
<input
{...rest}
type={type}
id={title}
placeholder={placeholder}
className="w-full border-none p-3 text-sm focus:ring-0"
style={{ boxShadow: 'none' }} // This ensures that the input doesn't have an inner shadow
/>
</div>
</div>
);
};
export default Input;