Optimize code

src/components/common/Card.tsx

@@ -4,9 +4,8 @@ import '@/assets/css/components/common/card.scss'
 interface CardProps
     extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
 
-const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
-    const { className, ..._props } = props
-    return <div className={`card-box${className ? ` ${className}` : ''}`} {..._props} ref={ref} />
+const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
+    return <div className={`card-box${className ? ` ${className}` : ''}`} {...props} ref={ref} />
 })
 
 export default Card

src/components/common/FitCenter.tsx

@@ -6,14 +6,13 @@ interface FitCenterProps
     vertical?: boolean
 }
 
-const FitCenter: React.FC<FitCenterProps> = (props) => {
-    const { className, vertical, ..._props } = props
+const FitCenter: React.FC<FitCenterProps> = ({ className, vertical, ...props }) => {
     return (
         <div
             className={`fit-center${className ? ` ${className}` : ''}${
                 vertical ? ' flex-vertical' : ' flex-horizontal'
             }`}
-            {..._props}
+            {...props}
         />
     )
 }

src/components/common/FitFullscreen.tsx

@@ -7,20 +7,21 @@ interface FitFullscreenProps
     backgroundColor?: string
 }
 
-const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => {
-    const { zIndex, backgroundColor, className, style, ..._props } = props
-    return (
-        <div
-            className={`fit-fullscreen${className ? ` ${className}` : ''}`}
-            style={{
-                zIndex,
-                backgroundColor,
-                ...style
-            }}
-            ref={ref}
-            {..._props}
-        />
-    )
-})
+const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>(
+    ({ zIndex, backgroundColor, className, style, ...props }, ref) => {
+        return (
+            <div
+                className={`fit-fullscreen${className ? ` ${className}` : ''}`}
+                style={{
+                    zIndex,
+                    backgroundColor,
+                    ...style
+                }}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
 
 export default FitFullscreen

src/components/common/FlexBox.tsx

@@ -7,18 +7,19 @@ interface FlexBoxProps
     gap?: number
 }
 
-const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>((props, ref) => {
-    const { className, direction, gap, style, ..._props } = props
-    return (
-        <div
-            className={`flex-box ${
-                direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
-            }${className ? ` ${className}` : ''}`}
-            style={{ gap, ...style }}
-            {..._props}
-            ref={ref}
-        />
-    )
-})
+const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>(
+    ({ className, direction, gap, style, ...props }, ref) => {
+        return (
+            <div
+                className={`flex-box ${
+                    direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
+                }${className ? ` ${className}` : ''}`}
+                style={{ gap, ...style }}
+                {...props}
+                ref={ref}
+            />
+        )
+    }
+)
 
 export default FlexBox

src/components/common/Indicator.tsx

@@ -8,9 +8,7 @@ interface IndicatorProps {
     onSwitch?: (index: number) => void
 }
 
-const Indicator: React.FC<IndicatorProps> = (props) => {
-    const { total, current, onSwitch } = props
-
+const Indicator: React.FC<IndicatorProps> = ({ total, current, onSwitch }) => {
     const handleClick = (index: number) => {
         return () => {
             onSwitch && onSwitch(index)

src/components/common/sidebar/SidebarSeparate.tsx

@@ -2,10 +2,8 @@ import React from 'react'
 
 const SidebarSeparate: React.FC<
     React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-> = (props) => {
-    const { className, ..._props } = props
-
-    return <div className={`separate ${className ? ` ${className}` : ''}`} {..._props} />
+> = ({ className, ...props }) => {
+    return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
 }
 
 export default SidebarSeparate