refactor: TabContainer

src/app/[name]/about/AboutPage.tsx

@@ -196,9 +196,7 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
 
   return (
     <div>
-      <TabContainer
+      <TabContainer>
-
-        className='h-[72px] !pt-3 !pb-2 overflow-y-hidden'>
         <TabHeader
           viewRenderer={firstTab()}
           title='درباره ما' icon={<InfoCircle size={24} />}>

src/app/[name]/orders/page.tsx

@@ -157,9 +157,7 @@ function OrdersIndex() {
 
     return (
         <div>
-            <TabContainer
+            <TabContainer>
-
-                className='h-[72px] !pt-3 !pb-2 overflow-y-hidden'>
                 <TabHeader
                     viewRenderer={<PerformantTabRenderer rowHeight={310}>{firstTab()}</PerformantTabRenderer>}
                     title={categories[0].title} imageSrc={categories[0].image}>

src/components/tab/TabContainer.tsx

@@ -10,9 +10,38 @@ import Image from 'next/image';
 type Props = {
     itemRenderer?: (child: ReactNode, index: number) => ReactElement;
     children: ReactNode;
-} & React.OlHTMLAttributes<HTMLUListElement>;
+    className?: TabContainerClassName;
+} & Omit<React.OlHTMLAttributes<HTMLUListElement>, 'className'>;
 
-function TabContainer({ itemRenderer, children, ...restProps }: Props) {
+export type TabContainerClassName = {
+    wrapper?: string;
+    scrollView?: string;
+    header?: string;
+    headerDeactive?: string;
+    headerActive?: string;
+    icon?: string;
+    iconDeactive?: string;
+    iconActive?: string;
+    title?: string;
+    titleDeactive?: string;
+    titleActive?: string
+}
+
+export const TabContainerClassNames: TabContainerClassName = {
+    wrapper: 'h-full',
+    scrollView: 'h-[72px] !pt-3 !pb-2 w-full overflow-y-hidden bg-[#FFFFFF70] justify-center border border-2 border-solid border-white rounded-[32px] inline-flex items-center gap-10',
+    header: '',
+    headerDeactive: '',
+    headerActive: '',
+    icon: 'text-xs transition-all duration-150',
+    iconDeactive: 'stroke-disabled-text',
+    iconActive: 'stroke-black',
+    title: 'text-xs transition-all duration-150',
+    titleDeactive: 'text-disabled-text',
+    titleActive: 'text-black'
+}
+
+function TabContainer({ className = TabContainerClassNames, itemRenderer, children, ...restProps }: Props) {
 
     const [selectedTab, setSelectedTab] = useState(0);
 
@@ -26,18 +55,9 @@ function TabContainer({ itemRenderer, children, ...restProps }: Props) {
     );
 
     return (
-        <div className='h-full'>
+        <div className={className.wrapper}>
             <HorizontalScrollView
-                style={{
+                className={className.scrollView}
-                    width: '100%',
-                    backgroundColor: '#FFFFFF70',
-                    justifyContent: 'center',
-                    border: '2px solid white',
-                    borderRadius: '32px',
-                    display: 'inline-flex',
-                    justifyItems: 'center',
-                    gap: '40px'
-                }}
                 itemRenderer={itemRenderer}
                 {...restProps}>
                 {items.map((item, index) => {
@@ -45,7 +65,10 @@ function TabContainer({ itemRenderer, children, ...restProps }: Props) {
                     return (
                         <TabHeaderRenderer
                             key={index}
-                            className={''}
+                            className={clsx(
+                                className.header,
+                                index === selectedTab ? className.headerActive : className.headerDeactive
+                            )}
                             onClick={() => updateTab(index)}
                         >
                             {imageSrc &&
@@ -59,18 +82,18 @@ function TabContainer({ itemRenderer, children, ...restProps }: Props) {
                             }
                             {icon &&
                                 <span className={clsx(
-                                    'text-xs transition-all duration-150',
+                                    className.icon,
-                                    index === selectedTab ? 'stroke-black' : 'stroke-disabled-text'
+                                    index === selectedTab ? className.iconActive : className.iconDeactive
                                 )}>
                                     {icon}
                                 </span>
                             }
-                            <span className={clsx(
+                            <h6 className={clsx(
-                                'text-xs transition-all duration-150',
+                                className.title,
-                                index === selectedTab ? 'text-black' : 'text-disabled-text'
+                                index === selectedTab ? className.titleActive : className.titleDeactive
                             )}>
                                 {title}
-                            </span>
+                            </h6>
                         </TabHeaderRenderer>
                     )
                 })}