57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import styles from './buttons.module.scss';
|
|
import Spinner from '@/public/assets/animated/90-ring.svg';
|
|
import TelegramIcon from '@/public/assets/images/telegram.svg?url';
|
|
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}>
|
|
{props.children}
|
|
</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']} />
|
|
{props.children}
|
|
</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"
|
|
/>
|
|
{props.children}
|
|
</button>
|
|
);
|
|
}
|