From 4d1e6722681849c72d8ad5cfaebc543ab61dd907 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Wed, 11 Sep 2024 16:33:13 +0200
Subject: [PATCH] feat(loading-spinner): add children support for default
 variant

---
 src/components/LoadingSpinner/index.tsx         | 12 +++++++++---
 src/components/LoadingSpinner/style.module.scss |  6 +++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/LoadingSpinner/index.tsx b/src/components/LoadingSpinner/index.tsx
index 648eb9a..d19d01f 100644
--- a/src/components/LoadingSpinner/index.tsx
+++ b/src/components/LoadingSpinner/index.tsx
@@ -1,13 +1,14 @@
 import { createPortal } from 'react-dom'
 import styles from './style.module.scss'
+import { PropsWithChildren } from 'react'
 
 interface Props {
   desc?: string
   variant?: 'small' | 'default'
 }
 
-export const LoadingSpinner = (props: Props) => {
-  const { desc, variant = 'default' } = props
+export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
+  const { desc, children, variant = 'default' } = props
 
   switch (variant) {
     case 'small':
@@ -28,7 +29,12 @@ export const LoadingSpinner = (props: Props) => {
             data-variant={variant}
           >
             <div className={styles.loadingSpinner}></div>
-            {desc && <p className={styles.loadingSpinnerDesc}>{desc}</p>}
+            {desc && (
+              <div className={styles.loadingSpinnerDesc}>
+                {desc}
+                {children}
+              </div>
+            )}
           </div>
         </div>,
         document.getElementById('root')!
diff --git a/src/components/LoadingSpinner/style.module.scss b/src/components/LoadingSpinner/style.module.scss
index e1a5978..d51b743 100644
--- a/src/components/LoadingSpinner/style.module.scss
+++ b/src/components/LoadingSpinner/style.module.scss
@@ -42,11 +42,15 @@
   width: 100%;
   padding: 15px;
   border-top: solid 1px rgba(0, 0, 0, 0.1);
-  text-align: center;
   color: rgba(0, 0, 0, 0.5);
 
   font-size: 16px;
   font-weight: 400;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
 }
 
 @keyframes spin {