91f381bce9
* migrate from react-icons to lucide-react * replace react-icon with lucide-dev: Webhook Icon * add lucide transformer * Fix LinkIcon import * Update yarn.lock to include monorepo deps * Migrated icons in ChargeCardDialog * Port Storybook to new icons as well * Adjust Info & Globe icons size to match react-icons size --------- Co-authored-by: Alex van Andel <me@alexvanandel.com>
30 lines
1023 B
TypeScript
30 lines
1023 B
TypeScript
import { MapPin } from "../components/icon";
|
|
|
|
export type AddressInputProps = {
|
|
value: string;
|
|
id?: string;
|
|
placeholder?: string;
|
|
required?: boolean;
|
|
onChange: (val: string) => void;
|
|
className?: string;
|
|
};
|
|
|
|
function AddressInput({ className = "", value, onChange, ...rest }: AddressInputProps) {
|
|
return (
|
|
<div className="relative ">
|
|
<MapPin color="#D2D2D2" className="absolute top-1/2 left-0.5 ml-3 h-6 -translate-y-1/2" />
|
|
<input
|
|
{...rest}
|
|
value={value}
|
|
onChange={(e) => {
|
|
onChange(e.target.value);
|
|
}}
|
|
color="#D2D2D2"
|
|
className={`${className} focus-within:border-brand-default dark:bg-darkgray-100 border-subtle border-default disabled:text-subtle disabled:dark:text-subtle dark:text-inverted block h-10 w-full rounded-md border border py-px pl-10 text-sm outline-none ring-black focus-within:ring-1 disabled:opacity-50 dark:placeholder-gray-500 dark:selection:bg-green-500`}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AddressInput;
|