From 2b1d8d7f2782388ebf8453699637fbfc61d74f19 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 14 Sep 2023 18:13:01 +0800
Subject: [PATCH] Add vertical prop to FitCenter

---
 .../css/components/common/fit-center.scss      |  8 ++++++++
 src/components/common/FitCenter.tsx            | 18 +++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/components/common/fit-center.scss b/src/assets/css/components/common/fit-center.scss
index fd07971..b4818fc 100644
--- a/src/assets/css/components/common/fit-center.scss
+++ b/src/assets/css/components/common/fit-center.scss
@@ -4,4 +4,12 @@
   align-items: center;
   width: 100%;
   height: 100%;
+}
+
+.direction-horizontal {
+  flex-direction: row;
+}
+
+.direction-vertical {
+  flex-direction: column;
 }
\ No newline at end of file
diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx
index 9bb4a35..356ab8d 100644
--- a/src/components/common/FitCenter.tsx
+++ b/src/components/common/FitCenter.tsx
@@ -1,13 +1,21 @@
 import React from 'react'
 import '@/assets/css/components/common/fit-center.scss'
 
-const FitCenter: React.FC<
-    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-> = (props) => {
-    const { className, ..._props } = props
+interface FitCenterProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    vertical?: boolean
+}
+
+const FitCenter: React.FC<FitCenterProps> = (props) => {
+    const { className, vertical, ..._props } = props
     return (
         <>
-            <div className={`fit-center${className ? ' ' + className : ''}`} {..._props}></div>
+            <div
+                className={`fit-center${className ? ' ' + className : ''}${
+                    vertical ? ' direction-vertical' : ' direction-horizontal'
+                }`}
+                {..._props}
+            ></div>
         </>
     )
 }