feat: add blank state component (#3413)

web/containers/BlankState/index.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react'
+
+import LogoMark from '@/containers/Brand/Logo/Mark'
+
+type Props = {
+  title: string
+  description?: string
+  action?: ReactNode
+}
+
+const BlankState = ({ title, description, action }: Props) => {
+  return (
+    <div className="mx-auto mt-10 flex h-full w-3/4 flex-col items-center justify-center text-center">
+      <LogoMark className="mx-auto mb-4 animate-wave" width={32} height={32} />
+      <h1 className="text-base font-semibold">{title}</h1>
+      {description && (
+        <p className="mt-1 text-[hsla(var(--text-secondary))]">{description}</p>
+      )}
+      {action && action}
+    </div>
+  )
+}
+
+export default BlankState

web/screens/Hub/index.tsx

@@ -7,6 +7,7 @@ import { ScrollArea, Button, Select } from '@janhq/joi'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { UploadIcon } from 'lucide-react'
 
+import BlankState from '@/containers/BlankState'
 import CenterPanelContainer from '@/containers/CenterPanelContainer'
 import ModelSearch from '@/containers/ModelSearch'
 
@@ -92,6 +93,9 @@ const HubScreen = () => {
           </div>
         </div>
         <div className="p-4 py-0 sm:px-16">
+          {!filteredModels.length ? (
+            <BlankState title="No search results found" />
+          ) : (
             <div className="mb-4 flex w-full justify-end">
               <Select
                 value={sortSelected}
@@ -101,6 +105,7 @@ const HubScreen = () => {
                 options={sortMenus}
               />
             </div>
+          )}
           <ModelList models={filteredModels} />
         </div>
       </ScrollArea>

web/screens/Settings/MyModels/index.tsx

@@ -18,6 +18,7 @@ import {
 
 import { twMerge } from 'tailwind-merge'
 
+import BlankState from '@/containers/BlankState'
 import ModelSearch from '@/containers/ModelSearch'
 
 import SetupRemoteModel from '@/containers/SetupRemoteModel'
@@ -183,7 +184,12 @@ const MyModels = () => {
           </div>
 
           <div className="relative w-full">
-            {groupByEngine.map((engine, i) => {
+            {!groupByEngine.length ? (
+              <div className="mt-8">
+                <BlankState title="No search results found" />
+              </div>
+            ) : (
+              groupByEngine.map((engine, i) => {
                 const engineLogo = getLogoEngine(engine as InferenceEngine)
                 const showModel = showEngineListModel.includes(engine)
                 const onClickChevron = () => {
@@ -242,13 +248,16 @@ const MyModels = () => {
                             .filter((x) => x.engine === engine)
                             .map((model) => {
                               if (!showModel) return null
-                            return <MyModelList key={model.id} model={model} />
+                              return (
+                                <MyModelList key={model.id} model={model} />
+                              )
                             })
                         : null}
                     </div>
                   </div>
                 )
-            })}
+              })
+            )}
           </div>
         </div>
       </ScrollArea>