chore: tab and close btn

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

@@ -16,6 +16,8 @@ export type ITabHeaderProps = {
   items: Item[]
   value: string
   itemClassName?: string
+  itemWrapClassName?: string
+  activeItemClassName?: string
   onChange: (value: string) => void
 }
 
@@ -23,6 +25,8 @@ const TabHeader: FC<ITabHeaderProps> = ({
   items,
   value,
   itemClassName,
+  itemWrapClassName,
+  activeItemClassName,
   onChange,
 }) => {
   const renderItem = ({ id, name, icon, extra, disabled }: Item) => (
@@ -30,8 +34,9 @@ const TabHeader: FC<ITabHeaderProps> = ({
       key={id}
       className={cn(
         'system-md-semibold relative flex cursor-pointer items-center border-b-2 border-transparent pb-2 pt-2.5',
-        id === value ? 'border-components-tab-active text-text-primary' : 'text-text-tertiary',
+        id === value ? cn('border-components-tab-active text-text-primary', activeItemClassName) : 'text-text-tertiary',
         disabled && 'cursor-not-allowed opacity-30',
+        itemWrapClassName,
       )}
       onClick={() => !disabled && onChange(id)}
     >

web/app/components/explore/try-app/index.tsx

@@ -3,6 +3,8 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import Modal from '@/app/components/base/modal/index'
 import Tab, { TypeEnum } from './tab'
+import Button from '../../base/button'
+import { RiCloseLine } from '@remixicon/react'
 
 type Props = {
   appId: string
@@ -19,12 +21,23 @@ const TryApp: FC<Props> = ({
     <Modal
       isShow
       onClose={onClose}
-      className='h-[calc(100vh-32px)] max-w-[calc(100vw-32px)]'
+      className='h-[calc(100vh-32px)] max-w-[calc(100vw-32px)] p-2'
     >
-      <Tab
+      <div className='flex items-center justify-between pl-4'>
-        value={type}
+        <Tab
-        onChange={setType}
+          value={type}
-      />
+          onChange={setType}
+        />
+        <Button
+          size='large'
+          variant='tertiary'
+          className='flex size-7 items-center justify-center rounded-[10px] p-0 text-components-button-tertiary-text'
+          onClick={onClose}
+        >
+          <RiCloseLine className='size-5' onClick={onClose} />
+        </Button>
+      </div>
+
       {appId}
     </Modal>
   )

web/app/components/explore/try-app/tab.tsx

@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import TabHeader from '../../base/tab-header'
+import { useTranslation } from 'react-i18next'
 
 export enum TypeEnum {
   TRY = 'try',
@@ -17,18 +18,20 @@ const Tab: FC<Props> = ({
   value,
   onChange,
 }) => {
+  const { t } = useTranslation()
   const tabs = [
-    { id: TypeEnum.TRY, name: 'Try App' },
+    { id: TypeEnum.TRY, name: t('explore.tryApp.tabHeader.try') },
-    { id: TypeEnum.DETAIL, name: 'App Details' },
+    { id: TypeEnum.DETAIL, name: t('explore.tryApp.tabHeader.detail') },
   ]
   return (
-    <div>
+    <TabHeader
-      <TabHeader
+      items={tabs}
-        items={tabs}
+      value={value}
-        value={value}
+      onChange={onChange as (value: string) => void}
-        onChange={onChange as (value: string) => void}
+      itemClassName='ml-0 system-md-semibold-uppercase'
-      />
+      itemWrapClassName='pt-2'
-    </div>
+      activeItemClassName='border-util-colors-blue-brand-blue-brand-500'
+    />
   )
 }
 export default React.memo(Tab)

web/i18n/en-US/explore.ts

@@ -30,6 +30,12 @@ const translation = {
     addToWorkspace: 'Use template',
     try: 'Details',
   },
+  tryApp: {
+    tabHeader: {
+      try: 'Try it',
+      detail: 'Orchestration Details',
+    },
+  },
   appCustomize: {
     title: 'Create app from {{name}}',
     subTitle: 'App icon & name',

web/i18n/zh-Hans/explore.ts

@@ -31,6 +31,12 @@ const translation = {
     try: '详情',
     customize: '自定义',
   },
+  tryApp: {
+    tabHeader: {
+      try: '试用',
+      detail: '编排详情',
+    },
+  },
   appCustomize: {
     title: '从 {{name}} 创建应用程序',
     subTitle: '应用程序图标和名称',