chore: depoly model ux

2024-08-09 10:26:46 +08:00
parent a04773d487
commit ab8483fc42
18 changed files with 568 additions and 49 deletions
@@ -0,0 +1,64 @@
+import { SearchOutlined } from '@ant-design/icons';
+import { Col, Empty, Row, Spin } from 'antd';
+import React from 'react';
+import '../style/search-result.less';
+import HFModelItem from './hf-model-item';
+
+interface SearchResultProps {
+  resultList: any[];
+  onSelect?: (item: any) => void;
+  current?: string;
+  source?: string;
+  style?: React.CSSProperties;
+  loading?: boolean;
+}
+
+const SearchResult: React.FC<SearchResultProps> = (props) => {
+  const { resultList, onSelect, source } = props;
+
+  const handleSelect = (e: any, item: any) => {
+    e.stopPropagation();
+    onSelect?.(item);
+  };
+  return (
+    <div style={{ ...props.style }} className="search-result-wrap">
+      <Spin spinning={props.loading} style={{ minHeight: 100 }}>
+        {resultList.length ? (
+          <Row gutter={[10, 10]}>
+            {resultList.map((item, index) => (
+              <Col span={12} key={item.name}>
+                <div onClick={(e) => handleSelect(e, item)}>
+                  <HFModelItem
+                    source={source}
+                    tags={item.tags}
+                    key={index}
+                    title={item.name}
+                    downloads={item.downloads}
+                    likes={item.likes}
+                    lastModified={item.lastModified}
+                    active={item.id === props.current}
+                  />
+                </div>
+              </Col>
+            ))}
+          </Row>
+        ) : (
+          !props.loading && (
+            <Empty
+              imageStyle={{ height: 'auto', marginTop: '20px' }}
+              image={
+                <SearchOutlined
+                  className="font-size-16"
+                  style={{ color: 'var(--ant-color-text-tertiary)' }}
+                ></SearchOutlined>
+              }
+              description="No models found"
+            />
+          )
+        )}
+      </Spin>
+    </div>
+  );
+};
+
+export default React.memo(SearchResult);