feat: tab header to new ui

web/app/components/base/tab-header/index.tsx

@@ -5,12 +5,15 @@ import cn from 'classnames'
 
 import s from './style.module.css'
 
-export type ITabHeaderProps = {
-  items: {
+type Item = {
   id: string
   name: string
+  isRight?: boolean
   extra?: React.ReactNode
-  }[]
+}
+
+export type ITabHeaderProps = {
+  items: Item[]
   value: string
   onChange: (value: string) => void
 }
@@ -20,9 +23,7 @@ const TabHeader: FC<ITabHeaderProps> = ({
   value,
   onChange,
 }) => {
-  return (
-    <div className='flex space-x-4 border-b border-gray-200 '>
-      {items.map(({ id, name, extra }) => (
+  const renderItem = ({ id, name, extra }: Item) => (
     <div
       key={id}
       className={cn(id === value ? `${s.itemActive} text-gray-900` : 'text-gray-500', 'relative flex items-center pb-1.5 leading-6 cursor-pointer')}
@@ -31,7 +32,15 @@ const TabHeader: FC<ITabHeaderProps> = ({
       <div className='text-base font-semibold'>{name}</div>
       {extra || ''}
     </div>
-      ))}
+  )
+  return (
+    <div className='flex justify-between border-b border-gray-200 '>
+      <div className='flex space-x-4'>
+        {items.filter(item => !item.isRight).map(renderItem)}
+      </div>
+      <div className='flex space-x-4'>
+        {items.filter(item => item.isRight).map(renderItem)}
+      </div>
     </div>
   )
 }

web/app/components/share/text-generation/index.tsx

@@ -316,6 +316,7 @@ const TextGeneration: FC<IMainProps> = ({
               {
                 id: 'saved',
                 name: t('share.generation.tabs.saved'),
+                isRight: true,
                 extra: savedMessages.length > 0
                   ? (
                     <div className='ml-1 flext items-center h-5 px-1.5 rounded-md border border-gray-200 text-gray-500 text-xs font-medium'>