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"