feat: improve search ux

2026-07-20 19:46:32 +08:00 · 2022-07-27 18:12:34 +08:00
parent e273d1e606
commit a220ea517f
4 changed files with 25 additions and 16 deletions
@@ -0,0 +1,63 @@
+import React from 'react';
+import clsx from 'clsx';
+import style9 from 'style9';
+
+import { BaseButton } from './base-button';
+import { SvgIconProps } from '../svg-icon';
+
+const styles = style9.create({
+    item: {
+        display: 'flex',
+        alignItems: 'center',
+        width: '220px',
+        paddingLeft: '22px',
+        paddingTop: '4px',
+        paddingBottom: '4px',
+        marginTop: '6px',
+        marginBottom: '6px',
+        borderRadius: '5px',
+        color: '#98ACBD',
+    },
+    item_hover: {
+        backgroundColor: 'rgba(152, 172, 189, 0.1)',
+    },
+    item_text: {
+        fontSize: '15px',
+        lineHeight: '17px',
+        textAlign: 'justify',
+        letterSpacing: '1.5px',
+        marginLeft: '8px',
+        color: '#4C6275',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+    },
+});
+
+type ListButtonProps = {
+    className?: string;
+    onClick: () => void;
+    onMouseOver?: () => void;
+    content?: string;
+    children?: () => JSX.Element;
+    hover?: boolean;
+    icon?: React.FC<SvgIconProps>;
+};
+
+export const ListButton = (props: ListButtonProps) => {
+    const MenuIcon = props.icon;
+    return (
+        <BaseButton
+            onClick={props.onClick}
+            onMouseOver={props.onMouseOver}
+            className={clsx(
+                styles('item', { item_hover: props.hover }),
+                props.className
+            )}
+        >
+            {MenuIcon && <MenuIcon sx={{ width: 20, height: 20 }} />}
+            <span className={styles('item_text')}>{props.content}</span>
+            {props.children}
+        </BaseButton>
+    );
+};