feat(loading-spinner): add children support for default variant

This commit is contained in:
enes 2024-09-11 16:33:13 +02:00
parent 4bc5882ab6
commit 4d1e672268
2 changed files with 14 additions and 4 deletions

View File

@ -1,13 +1,14 @@
import { createPortal } from 'react-dom' import { createPortal } from 'react-dom'
import styles from './style.module.scss' import styles from './style.module.scss'
import { PropsWithChildren } from 'react'
interface Props { interface Props {
desc?: string desc?: string
variant?: 'small' | 'default' variant?: 'small' | 'default'
} }
export const LoadingSpinner = (props: Props) => { export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
const { desc, variant = 'default' } = props const { desc, children, variant = 'default' } = props
switch (variant) { switch (variant) {
case 'small': case 'small':
@ -28,7 +29,12 @@ export const LoadingSpinner = (props: Props) => {
data-variant={variant} data-variant={variant}
> >
<div className={styles.loadingSpinner}></div> <div className={styles.loadingSpinner}></div>
{desc && <p className={styles.loadingSpinnerDesc}>{desc}</p>} {desc && (
<div className={styles.loadingSpinnerDesc}>
{desc}
{children}
</div>
)}
</div> </div>
</div>, </div>,
document.getElementById('root')! document.getElementById('root')!

View File

@ -42,11 +42,15 @@
width: 100%; width: 100%;
padding: 15px; padding: 15px;
border-top: solid 1px rgba(0, 0, 0, 0.1); border-top: solid 1px rgba(0, 0, 0, 0.1);
text-align: center;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
} }
@keyframes spin { @keyframes spin {