75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
/*
|
|
* Copyright 2025 coze-dev Authors
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import React, { type ReactNode, type CSSProperties } from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
import { Space } from '@coze-arch/bot-semi';
|
|
|
|
import s from './index.module.less';
|
|
|
|
export interface LinkListItem {
|
|
extra?: string;
|
|
icon?: ReactNode;
|
|
label: string;
|
|
link?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export const LinkList = ({
|
|
className,
|
|
style,
|
|
data,
|
|
pointerClassName,
|
|
itemClassName,
|
|
}: {
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
data: LinkListItem[];
|
|
pointerClassName?: string;
|
|
itemClassName?: string;
|
|
}) => (
|
|
<div className={classNames(s['link-list'], className)} style={style}>
|
|
{data?.map(item => (
|
|
<div
|
|
className={classNames(s['link-list-item'], itemClassName)}
|
|
key={`link-list-${item.label}`}
|
|
>
|
|
{!!item.extra && <span style={{ marginRight: 4 }}>{item.extra}</span>}
|
|
<div
|
|
className={classNames(
|
|
s['click-area'],
|
|
(item.link || item.onClick) && s.pointer,
|
|
(item.link || item.onClick) && pointerClassName,
|
|
)}
|
|
onClick={() => {
|
|
if (item.link) {
|
|
window.open(item.link);
|
|
} else {
|
|
item.onClick?.();
|
|
}
|
|
}}
|
|
>
|
|
<Space spacing={4}>
|
|
{item.icon}
|
|
{item.label}
|
|
</Space>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|