Fix tab style

Add miss style

components/RUA/tab/TabItem.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import React from 'react';
+
+export type ItemProps = {
+  value: string | number;
+  label: string | number;
+  showContent?: boolean;
+  children?: React.ReactNode;
+};
+
+const TabItem = ({ showContent, children }: ItemProps) => {
+  return (
+    <>
+      <div className={classNames('hidden', showContent && '!block')}>
+        {children}
+      </div>
+    </>
+  );
+};
+
+export default TabItem;

components/RUA/tab/index.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React, { useState } from 'react';
 import { useCallback } from 'react';
+import { ItemProps } from './TabItem';
 
 type Props = {
   defaultValue: string | number;
@@ -26,7 +27,11 @@ const Tab = ({ defaultValue, children }: Props) => {
   return (
     <>
       <div>
-        <ul role="tablist" aria-orientation="horizontal" className="flex">
+        <ul
+          role="tablist"
+          aria-orientation="horizontal"
+          className="flex list-none !p-[unset]"
+        >
           {children.map((child) => (
             <li
               role="tab"
@@ -34,12 +39,13 @@ const Tab = ({ defaultValue, children }: Props) => {
               key={child.props.label}
               onClick={() => handleSwitch(child.props.value)}
               className={classNames(
-                'px-4 py-4 rounded-t-lg',
+                'px-5 py-3 rounded-t-lg',
                 child.props.value === currentValue &&
                   'text-teal-500 border-b-[3px] border-teal-500',
                 'select-none cursor-pointer',
                 'min-w-[76px] text-center',
-                'hover:bg-gray-200 dark:hover:bg-rua-gray-800'
+                'hover:bg-gray-200 dark:hover:bg-rua-gray-800',
+                '!list-none'
               )}
             >
               {child.props.label}
@@ -53,21 +59,4 @@ const Tab = ({ defaultValue, children }: Props) => {
   );
 };
 
-type ItemProps = {
-  value: string | number;
-  label: string | number;
-  showContent?: boolean;
-  children?: React.ReactNode;
-};
-
-Tab.Item = function TabItem({ showContent, children }: ItemProps) {
-  return (
-    <>
-      <div className={classNames('hidden', showContent && '!block')}>
-        {children}
-      </div>
-    </>
-  );
-};
-
 export default Tab;

components/post/PostComment.tsx

@@ -11,7 +11,7 @@ const PostComment = () => {
 
   return (
     <>
-      <div className="text-center">
+      <div className="text-center select-none">
         {currentTheme === 'dark' ? (
           <Image
             src="/images/img/comment-line-dark.svg"

pages/about.tsx

@@ -3,9 +3,6 @@ import { NextPageWithLayout } from 'types';
 import avatar from 'public/images/img/avatar.svg';
 import Image from 'next/image';
 import classNames from 'classnames';
-import Tab from 'components/RUA/tab';
-
-const TabItem = Tab.Item;
 
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
 

pages/p/setting-up-docsearch-for-nextjs.mdx

@@ -11,6 +11,8 @@ import image1 from 'public/images/p/setting-up-docsearch-for-nextjs/cannot-login
 import image2 from 'public/images/p/setting-up-docsearch-for-nextjs/index-format.png';
 
 export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack'));
+export const Tab = dynamic(() => import('components/RUA/Tab'));
+export const TabItem = dynamic(() => import('components/RUA/Tab/TabItem'));
 
 export const meta = {
   title: 'Setting up DocSearch for next.js',
@@ -59,3 +61,12 @@ So we need post same format to Algolia.
 ## Push our data
 
 Algolia provide JavaScript API Client to push data to Algolia.
+
+<Tab defaultValue="yarn">
+  <TabItem label="yarn" value="yarn">
+    <pre>yarn add algoliasearch-client</pre>
+  </TabItem>
+  <TabItem label="npm" value="npm">
+    <pre>npm install algoliasearch-client</pre>
+  </TabItem>
+</Tab>