src/components/ui/input.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

'use client';

import { cn } from '@/lib/utils';
import { useState } from 'react';
import ShowIcon from '@icons/show-icon.svg';
import HideIcon from '@icons/hide-icon.svg';

export function Input({ className, isPassword, ...props }: any) {
    const [show, setShow] = useState(false);
    return (
        <div className="relative w-full">
            <input
                {...props}
                type={isPassword ? (show ? 'text' : 'password') : props.type}
                className={cn(
                    'w-full outline-none placeholder-light-violet',
                    className,
                )}
            />
            {isPassword && (
                <span
                    onClick={() => setShow(!show)}
                    className="absolute right-0 top-1/2 -translate-y-1/2 cursor-pointer"
                >
                    {show ? <ShowIcon /> : <HideIcon />}
                </span>
            )}
        </div>
    );
}