feat: catalog page

2025-01-03 20:51:22 +08:00
parent 95058f7890
commit 39fff0e57d
11 changed files with 699 additions and 52 deletions
@@ -0,0 +1,62 @@
+import IMG from '@/assets/images/small-logo-200x200.png';
+import AutoTooltip from '@/components/auto-tooltip';
+import { Button, Tag, Typography } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import '../style/catalog-item.less';
+
+interface CatalogItemProps {
+  activeId: number;
+  itemId: number;
+  onDeploy: () => void;
+}
+const CatalogItem: React.FC<CatalogItemProps> = (props) => {
+  const { onDeploy, itemId, activeId } = props;
+
+  const handleOnDeploy = () => {
+    onDeploy();
+  };
+  return (
+    <div
+      className={classNames('catalog-item', { active: activeId === itemId })}
+    >
+      <div className="content">
+        <div className="title">
+          <div className="img">
+            <img src={IMG} alt="" />
+          </div>
+          <AutoTooltip ghost style={{ flex: 1 }}>
+            gpustack/stable-diffusion-v3-5-medium-GGUF
+          </AutoTooltip>
+        </div>
+        <Typography.Paragraph className="desc" ellipsis={{ rows: 2 }}>
+          this is description this is description this is description this is
+          this is description this isthis is description this isthis is
+          description this is this is description this isthis is description
+          this isthis is description this isthis is description this isthis is
+          description this isthis is description this isthis is description this
+          is this is description this isthis is description this isthis is
+          description this isthis is description this is
+        </Typography.Paragraph>
+      </div>
+      <div className="item-footer">
+        <div className="tags">
+          <Tag color="blue" className="tag-item">
+            Audio
+          </Tag>
+          <Tag color="purple" className="tag-item">
+            GGUF
+          </Tag>
+          <Tag color="orange" className="tag-item">
+            Qwen
+          </Tag>
+        </div>
+        <Button size="small" type="primary" onClick={handleOnDeploy}>
+          Deploy
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(CatalogItem);