Sort by recommended tags

janhq · Dec 4, 2023 · eef7fd7 · eef7fd7
1 parent f58702f
commit eef7fd7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/web/screens/ExploreModels/ExploreModelItem/index.tsx b/web/screens/ExploreModels/ExploreModelItem/index.tsx
@@ -46,21 +46,23 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
                 <span className="font-semibold text-muted-foreground">
                   Author
                 </span>
-                <p className="mt-2 font-medium">{model.metadata.author}</p>
+                <p className="mt-2 line-clamp-1 font-medium">
+                  {model.metadata.author}
+                </p>
               </div>
               <div>
                 <span className="mb-1 font-semibold text-muted-foreground">
                   Model ID
                 </span>
-                <p className="mt-2 font-medium">{model.id}</p>
+                <p className="mt-2 line-clamp-1 font-medium">{model.id}</p>
               </div>
               <div>
                 <span className="mb-1 font-semibold text-muted-foreground">
                   Tags
                 </span>
                 <div className="mt-2 flex space-x-2">
                   {model.metadata.tags.map((tag, i) => (
-                    <Badge key={i} themes="primary">
+                    <Badge key={i} themes="primary" className="line-clamp-1">
                       {tag}
                     </Badge>
                   ))}

diff --git a/web/screens/ExploreModels/ExploreModelList/index.tsx b/web/screens/ExploreModels/ExploreModelList/index.tsx
@@ -10,7 +10,10 @@ const ExploreModelList: React.FC<Props> = ({ models }) => {
   return (
     <div className="relative h-full w-full flex-shrink-0">
       {models
-        ?.sort((a, b) => a.metadata.size - b.metadata.size)
+        ?.sort((a) => {
+          if (a.metadata.tags.includes('Recommended')) return -1
+          return 0
+        })
         ?.map((model) => <ExploreModelItem key={model.id} model={model} />)}
     </div>
   )