Feat: settings dark mode (#15184)

This commit is contained in:
KVOJJJin
2025-03-07 11:56:20 +08:00
committed by GitHub
parent 69746f2f0b
commit f588ccff72
34 changed files with 450 additions and 427 deletions

View File

@@ -3,8 +3,9 @@ import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
RiDeleteBinLine,
RiEditLine,
} from '@remixicon/react'
import { Edit02 } from '@/app/components/base/icons/src/vender/line/general'
import Button from '@/app/components/base/button'
import type { ApiBasedExtension } from '@/models/common'
import { useModalContext } from '@/context/modal-context'
import { deleteApiBasedExtension } from '@/service/common'
@@ -36,25 +37,25 @@ const Item: FC<ItemProps> = ({
}
return (
<div className='group flex items-center mb-2 px-4 py-2 border-[0.5px] border-transparent rounded-xl bg-gray-50 hover:border-gray-200 hover:shadow-xs'>
<div className='group flex items-center mb-2 px-4 py-2 border-[0.5px] border-transparent rounded-xl bg-components-input-bg-normal hover:border-components-input-border-active hover:shadow-xs'>
<div className='grow'>
<div className='mb-0.5 text-[13px] font-medium text-gray-700'>{data.name}</div>
<div className='text-xs text-gray-500'>{data.api_endpoint}</div>
<div className='mb-0.5 text-[13px] font-medium text-text-secondary'>{data.name}</div>
<div className='text-xs text-text-tertiary'>{data.api_endpoint}</div>
</div>
<div className='hidden group-hover:flex items-center'>
<div
className='flex items-center mr-1 px-3 h-7 bg-white text-xs font-medium text-gray-700 rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer'
<Button
className='mr-1'
onClick={handleOpenApiBasedExtensionModal}
>
<Edit02 className='mr-[5px] w-3.5 h-3.5' />
<RiEditLine className='mr-1 w-4 h-4' />
{t('common.operation.edit')}
</div>
<div
className='flex items-center justify-center w-7 h-7 bg-white text-gray-700 rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer'
</Button>
<Button
onClick={() => setShowDeleteConfirm(true)}
>
<RiDeleteBinLine className='w-4 h-4' />
</div>
<RiDeleteBinLine className='mr-1 w-4 h-4' />
{t('common.operation.delete')}
</Button>
</div>
{
showDeleteConfirm