chore: drawer ux

src/pages/llmodels/components/hf-model-item.tsx

@@ -4,7 +4,7 @@ import {
   FolderOutlined,
   HeartOutlined
 } from '@ant-design/icons';
-import { Space, Tag } from 'antd';
+import { Button, Space, Tag } from 'antd';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import _ from 'lodash';
@@ -15,7 +15,8 @@ interface HFModelItemProps {
   title: string;
   downloads: number;
   likes: number;
-  lastModified: string;
+  task?: string;
+  updatedAt: string;
   active: boolean;
   source?: string;
   tags?: string[];
@@ -29,15 +30,30 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
       })}
     >
       <div className="title">
-        <FolderOutlined className="m-r-5" />
+        <FolderOutlined
+          className="m-r-5"
+          style={{ color: 'var(--ant-color-text-tertiary)' }}
+        />
         {props.title}
       </div>
       <div className="info">
         {props.source === modelSourceMap.huggingface_value ? (
           <Space size={16}>
+            {props.task && (
+              <Tag
+                color="rgb(236, 240, 242)"
+                style={{
+                  marginRight: 0
+                }}
+              >
+                <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                  {props.task}
+                </span>
+              </Tag>
+            )}
             <span>
               {dayjs().to(
-                dayjs(dayjs(props.lastModified).format('YYYY-MM-DD HH:mm:ss'))
+                dayjs(dayjs(props.updatedAt).format('YYYY-MM-DD HH:mm:ss'))
               )}
             </span>
             <span>
@@ -50,22 +66,29 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
             </span>
           </Space>
         ) : (
-          <Space size={10}>
-            {_.map(props.tags, (tag: string) => {
-              return (
-                <Tag
-                  style={{
-                    backgroundColor: 'var(--color-white-1)',
-                    marginRight: 0
-                  }}
-                >
-                  <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
-                    {tag}
-                  </span>
-                </Tag>
-              );
-            })}
-          </Space>
+          <div className="flex-between">
+            <Space size={10}>
+              {_.map(props.tags, (tag: string) => {
+                return (
+                  <Tag
+                    style={{
+                      backgroundColor: 'var(--color-white-1)',
+                      marginRight: 0
+                    }}
+                  >
+                    <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                      {tag}
+                    </span>
+                  </Tag>
+                );
+              })}
+            </Space>
+            <div className="btn">
+              <Button size="middle">
+                {props.active ? 'Selected' : 'Select'}
+              </Button>
+            </div>
+          </div>
         )}
       </div>
     </div>