57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import Spinner from '../../public/assets/animated/90-ring.svg';
|
||
import TelegramIcon from '../../public/assets/images/telegram.svg?url';
|
||
import styles from './Form.module.scss';
|
||
import Image from 'next/image';
|
||
import type { ButtonHTMLAttributes } from 'react';
|
||
|
||
type Props = ButtonHTMLAttributes<HTMLButtonElement>;
|
||
|
||
export function ButtonLogin(props: Props) {
|
||
return (
|
||
<button className={styles['button-submit']} type="submit" {...props}>
|
||
Войти
|
||
</button>
|
||
);
|
||
}
|
||
|
||
export function ButtonLoading(props: Props) {
|
||
return (
|
||
<button disabled type="button" className={styles['button-submit']} {...props}>
|
||
<div className={styles['loading-wrapper']}>
|
||
<Spinner alt="spinner" className={styles['spinner-icon']} />
|
||
Загрузка...
|
||
</div>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
export function ButtonTelegram(props: Props) {
|
||
return (
|
||
<button type="submit" className={styles['button-telegram']} {...props}>
|
||
<Image
|
||
className={styles['button-telegram-icon']}
|
||
src={TelegramIcon}
|
||
width={24}
|
||
height={22}
|
||
alt="Telegram icon"
|
||
/>
|
||
{props.children}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
export function ButtonTelegramLogin(props: Props) {
|
||
return (
|
||
<button disabled type="submit" className={styles['button-telegram']} {...props}>
|
||
<Image
|
||
className={styles['button-telegram-icon']}
|
||
src={TelegramIcon}
|
||
width={24}
|
||
height={22}
|
||
alt="Telegram icon"
|
||
/>
|
||
Ожидаем подтверждения...
|
||
</button>
|
||
);
|
||
}
|