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

Edited Input UI

Browse Source
This commit is contained in:
Meliora Ho 2024-02-18 03:14:15 +00:00
parent e85223b288
commit 9592062732
3 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
compass/app/page.tsx
View File

@ -16,10 +16,10 @@ export default function Page() {
<Paper> <Paper>
<form className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white"> <form className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white">
<div className="mb-4"> <div className="mb-4">
<Input type='email' title="Email" placeholder="janedoe@gmail.com" /> <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} />
</div> </div>
<div className="mb-6"> <div className="mb-6">
<Input type='password' title="Password" /> <Input type='password' title="Password" />
</div> </div>
<div className="flex flex-col items-left space-y-4"> <div className="flex flex-col items-left space-y-4">
<InlineLink> <InlineLink>

54
compass/components/Input.tsx
View File

@ -1,29 +1,41 @@
import React, { FunctionComponent, InputHTMLAttributes, ReactNode } from 'react'; import { Icons } from '@/utils/constants';
import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
type InputProps = InputHTMLAttributes<HTMLInputElement> & { type InputProps = InputHTMLAttributes<HTMLInputElement> & {
icon?: ReactNode; iconKey?: keyof typeof Icons; // Use keyof typeof to ensure the key exists in Icons
title?: ReactNode; title?: string; // Assuming title is always a string
type?:ReactNode; type?: string;
placeholder?:ReactNode placeholder?: string;
}; };
const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, ...rest }) => { const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => {
const IconComponent = iconKey ? Icons[iconKey] : null;
return ( return (
<div> <div className="mb-4">
<label {title && (
htmlFor={title} <div className="mb-1">
className="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" <label htmlFor={title} className="text-sm font-semibold text-gray-700">
> {title}
<span className="text-xs font-semibold text-gray-700"> {title} </span> </label>
</div>
<input )}
type={type} <div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden">
id={title} {IconComponent && (
placeholder={placeholder} <span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm" <IconComponent className="h-5 w-5" />
/> </span>
</label> )}
</div> <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>
); );
}; };

10
compass/utils/constants.tsx
View File

@ -47,8 +47,8 @@ export enum DATATYPE {
SELECT SELECT
} }
export const COLLECTION_MAP: {[key in COLLECTION]: CollectionImpl} = { // export const COLLECTION_MAP: {[key in COLLECTION]: CollectionImpl} = {
[COLLECTION.RESOURCE]: new CollectionImpl('Resources', Icons.ResourceIcon), // [COLLECTION.RESOURCE]: new CollectionImpl('Resources', Icons.ResourceIcon),
[COLLECTION.SERVICE]: new CollectionImpl('Services', Icons.ServiceIcon), // [COLLECTION.SERVICE]: new CollectionImpl('Services', Icons.ServiceIcon),
[COLLECTION.USER]: new CollectionImpl('Users', Icons.UserIcon) // [COLLECTION.USER]: new CollectionImpl('Users', Icons.UserIcon)
} // }