f33415b751
### What problem does this PR solve? Fixed vertical alignment issues between icons and text in API-Key and System Model Settings buttons. This improves visual consistency across the settings interface. ### Type of change - [x] Refactoring Before: Icons and text were slightly misaligned vertically <img width="635" alt="Screenshot 2025-01-23 at 20 22 46" src="https://github.com/user-attachments/assets/28f15637-d3fd-45a2-aae8-ca72fb12a88e" /> After: Icons and text are now properly centered with consistent spacing <img width="540" alt="Screenshot 2025-01-23 at 20 23 02" src="https://github.com/user-attachments/assets/98bb0ca5-6995-42d8-bd23-8a8f44ec0209" />
40 lines
929 B
TypeScript
40 lines
929 B
TypeScript
import { useTranslate } from '@/hooks/common-hooks';
|
|
import { SettingOutlined } from '@ant-design/icons';
|
|
import { Button, Flex, Typography } from 'antd';
|
|
|
|
const { Title, Paragraph } = Typography;
|
|
|
|
interface IProps {
|
|
title: string;
|
|
description: string;
|
|
showRightButton?: boolean;
|
|
clickButton?: () => void;
|
|
}
|
|
|
|
const SettingTitle = ({
|
|
title,
|
|
description,
|
|
clickButton,
|
|
showRightButton = false,
|
|
}: IProps) => {
|
|
const { t } = useTranslate('setting');
|
|
|
|
return (
|
|
<Flex align="center" justify={'space-between'}>
|
|
<div>
|
|
<Title level={5}>{title}</Title>
|
|
<Paragraph>{description}</Paragraph>
|
|
</div>
|
|
{showRightButton && (
|
|
<Button type={'primary'} onClick={clickButton}>
|
|
<Flex align="center" gap={4}>
|
|
<SettingOutlined />
|
|
{t('systemModelSettings')}
|
|
</Flex>
|
|
</Button>
|
|
)}
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default SettingTitle;
|