| </div> | </div> | ||||
| <div className='flex flex-row gap-2'> | <div className='flex flex-row gap-2'> | ||||
| <AppTypeCard | <AppTypeCard | ||||
| beta | |||||
| active={appMode === 'advanced-chat'} | active={appMode === 'advanced-chat'} | ||||
| title={t('app.types.advanced')} | title={t('app.types.advanced')} | ||||
| description={t('app.newApp.advancedShortDescription')} | description={t('app.newApp.advancedShortDescription')} | ||||
| setAppMode('advanced-chat') | setAppMode('advanced-chat') | ||||
| }} /> | }} /> | ||||
| <AppTypeCard | <AppTypeCard | ||||
| beta | |||||
| active={appMode === 'workflow'} | active={appMode === 'workflow'} | ||||
| title={t('app.types.workflow')} | title={t('app.types.workflow')} | ||||
| description={t('app.newApp.workflowShortDescription')} | description={t('app.newApp.workflowShortDescription')} | ||||
| type AppTypeCardProps = { | type AppTypeCardProps = { | ||||
| icon: React.JSX.Element | icon: React.JSX.Element | ||||
| beta?: boolean | |||||
| title: string | title: string | ||||
| description: string | description: string | ||||
| active: boolean | active: boolean | ||||
| onClick: () => void | onClick: () => void | ||||
| } | } | ||||
| function AppTypeCard({ icon, title, beta = false, description, active, onClick }: AppTypeCardProps) { | |||||
| function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardProps) { | |||||
| const { t } = useTranslation() | const { t } = useTranslation() | ||||
| return <div | return <div | ||||
| className={ | className={ | ||||
| } | } | ||||
| onClick={onClick} | onClick={onClick} | ||||
| > | > | ||||
| {beta && <div className='system-2xs-medium-uppercase absolute | |||||
| right-3 top-3 min-w-[18px] rounded-[5px] border | |||||
| border-divider-deep px-[5px] py-[3px] text-text-tertiary'>{t('common.menus.status')}</div>} | |||||
| {icon} | {icon} | ||||
| <div className='system-sm-semibold mb-0.5 mt-2 text-text-secondary'>{title}</div> | <div className='system-sm-semibold mb-0.5 mt-2 text-text-secondary'>{title}</div> | ||||
| <div className='system-xs-regular text-text-tertiary'>{description}</div> | <div className='system-xs-regular text-text-tertiary'>{description}</div> |