From db99a8d8bbc216f3b7c4d2e4695bf7c83590e27b Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 8 Jan 2024 13:57:35 +0700
Subject: [PATCH] feat: hub recommendation labels

---
 .../ExploreModelItemHeader/index.tsx              | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
index ceab733bd..2f871b170 100644
--- a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
+++ b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
@@ -2,7 +2,7 @@
 import { useCallback, useMemo } from 'react'
 
 import { Model } from '@janhq/core'
-import { Button } from '@janhq/uikit'
+import { Badge, Button } from '@janhq/uikit'
 
 import { atom, useAtomValue } from 'jotai'
 
@@ -101,6 +101,19 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
           <span className="mr-4 font-semibold text-muted-foreground">
             {toGibibytes(model.metadata.size)}
           </span>
+          {model.metadata.size && (
+            <>
+              <Badge className="rounded-md bg-green-500 text-white">
+                Recommended
+              </Badge>
+              <Badge className="rounded-md bg-yellow-500 text-white">
+                Slow on your device
+              </Badge>
+              <Badge className="rounded-md bg-red-500 text-white">
+                Not enough RAM
+              </Badge>
+            </>
+          )}
           {downloadButton}
           <ChevronDownIcon
             className={twMerge(