46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
/*
|
|
* @Description:
|
|
* @Version: 0.0.1
|
|
* @Author: yujiangping
|
|
* @Date: 2025-11-18 16:27:41
|
|
* @LastEditors: yujiangping
|
|
* @LastEditTime: 2025-11-19 19:59:36
|
|
*/
|
|
import { Divider } from 'antd';
|
|
import type { ReactElement } from 'react';
|
|
|
|
export interface InfoItem {
|
|
key: string;
|
|
label: string;
|
|
value: string | number | undefined | ReactElement;
|
|
icon?: string;
|
|
}
|
|
|
|
interface InfoPanelProps {
|
|
title: string;
|
|
items: InfoItem[];
|
|
className?: string;
|
|
}
|
|
|
|
const InfoPanel = ({ title, items, className = '' }: InfoPanelProps) => {
|
|
return (
|
|
<div className={`rb:w-full ${className}`}>
|
|
<h2 className="rb:text-lg rb:font-medium">{title}</h2>
|
|
<Divider />
|
|
<div className='rb:flex rb:flex-col rb:items-start rb:gap-6'>
|
|
{items.map((item) => (
|
|
<div key={item.key} className='rb:flex rb:w-full rb:items-start rb:justify-start rb:gap-2'>
|
|
{item.icon && <img src={item.icon} className='rb:size-4 rb:mt-[2px]' alt="" />}
|
|
<div className='rb:flex rb:flex-col rb:text-left rb:gap-2'>
|
|
<span className='rb:text-gray-500 rb:text-sm'>{item.label}</span>
|
|
<span className='rb:text-gray-800'>{item.value ?? '-'}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InfoPanel;
|