login v1

src/components/Button.tsx

@@ -0,0 +1,32 @@
+import { ButtonHTMLAttributes, FC, memo, ReactNode } from 'react'
+import ReactLoading from 'react-loading'
+import { XOR } from '../helpers/types'
+import { clx } from '../helpers/utils'
+
+type Props = {
+    className?: string;
+    isLoading?: boolean,
+} & ButtonHTMLAttributes<HTMLButtonElement> &
+    XOR<{ children: ReactNode }, { label: string, isLoading?: boolean }>;
+
+const Button: FC<Props> = memo((props: Props) => {
+
+    const buttonClass = clx(
+        'flex rounded-xl items-center justify-center text-center h-12 text-sm  bg-primary text-white w-full',
+        props.disabled && 'cursor-not-allowed opacity-60',
+        props.className
+    );
+
+    return (
+        <button {...props} className={`${buttonClass} ${props.className}`} >
+            {
+                props.isLoading ?
+                    <ReactLoading type='spin' color={'white'} width={20} height={20} />
+                    :
+                    props.label || props.children
+            }
+        </button>
+    )
+})
+
+export default Button

src/components/DatePicker.tsx

@@ -0,0 +1,73 @@
+import { useState, useEffect, FC } from 'react';
+import DatePicker from 'react-multi-date-picker';
+import persian from 'react-date-object/calendars/persian';
+import persian_fa from 'react-date-object/locales/persian_fa';
+import DateObject from 'react-date-object';
+import CalenderIcon from '../assets/images/calendar.svg'
+
+type Props = {
+    onChange: (date: string) => void;
+    defaulValue?: string;
+    error_text?: string;
+    placeholder: string;
+    reset?: boolean;
+    isDateTime?: boolean;
+    className?: string;
+    label: string
+};
+
+const DatePickerComponent: FC<Props> = (props: Props) => {
+    const [value, setValue] = useState<DateObject | null>(null);
+
+    useEffect(() => {
+        if (props.reset) {
+            setValue(null);
+        }
+    }, [props.reset]);
+
+    useEffect(() => {
+        if (value) {
+            const formattedDate = `${value.year}/${value.month.number}/${value.day}`;
+            props.onChange(formattedDate);
+        }
+    }, [props, value]);
+
+    useEffect(() => {
+        if (props.defaulValue && !value) {
+            const defaultDate = new DateObject({
+                date: props.defaulValue,
+                calendar: persian,
+                locale: persian_fa,
+            });
+            setValue(defaultDate);
+        }
+    }, [props.defaulValue, value]);
+
+    return (
+        <div className="w-full">
+            <div className='text-sm'>
+                {props.label}
+            </div>
+            <div className='relative mt-1.5'>
+                <DatePicker
+                    placeholder={props.placeholder}
+                    value={value}
+                    onChange={(date) => setValue(date as DateObject)}
+                    calendar={persian}
+                    locale={persian_fa}
+                    calendarPosition="bottom-right"
+                    className={props.className}
+                />
+                {props.error_text && props.error_text !== '' && (
+                    <div className="text-xs text-right text-red-600 mt-2 mr-2 font-medium">
+                        {props.error_text}
+                    </div>
+                )}
+
+                <img src={CalenderIcon} className='absolute top-0 bottom-0 my-auto left-2' />
+            </div>
+        </div>
+    );
+};
+
+export default DatePickerComponent;

src/components/Input.tsx

@@ -17,7 +17,7 @@ type Props = {
 const Input: FC<Props> = (props: Props) => {
 
     const inputClass = clx(
-        'w-full h-12 text-black block px-4 rounded-xl mt-2 border border-border',
+        'w-full h-12 text-black block px-4 text-sm rounded-xl mt-1 border border-border',
         props.readOnly && 'bg-gray-100',
         props.className
     );