Added bannner and search ui hub screen

yuan505 · Dec 4, 2023 · 5d5139a · 5d5139a
1 parent f7e3dfc
commit 5d5139a
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 4 deletions.
diff --git a/uikit/src/button/index.tsx b/uikit/src/button/index.tsx
@@ -14,6 +14,7 @@ const buttonVariants = cva('btn', {
       outline: 'btn-outline',
       secondary: 'btn-secondary',
       ghost: 'btn-ghost',
+      success: 'btn-success',
     },
     size: {
       sm: 'btn-sm',

diff --git a/uikit/src/button/styles.scss b/uikit/src/button/styles.scss
@@ -19,6 +19,10 @@
     @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
   }
 
+  &-success {
+    @apply bg-green-500 text-white hover:bg-green-500/80;
+  }
+
   &-ghost {
     @apply hover:bg-primary hover:text-primary-foreground;
   }

diff --git a/web/public/images/hub-banner.png b/web/public/images/hub-banner.png
diff --git a/web/screens/ExploreModels/ExploreModelItem/index.tsx b/web/screens/ExploreModels/ExploreModelItem/index.tsx
@@ -15,7 +15,7 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
   return (
     <div
       ref={ref}
-      className="mb-4 flex flex-col rounded-md border border-border bg-background/60"
+      className="mb-6 flex flex-col overflow-hidden rounded-xl border border-border bg-background/60"
     >
       <ExploreModelItemHeader model={model} />
       <div className="flex flex-col p-4">

diff --git a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
@@ -24,6 +24,7 @@ type Props = {
 }
 
 const ExploreModelItemHeader: React.FC<Props> = ({ model }) => {
+  console.log(model)
   const { downloadModel } = useDownloadModel()
   const { downloadedModels } = useGetDownloadedModels()
   const { modelDownloadStateAtom, downloadStates } = useDownloadState()
@@ -57,6 +58,8 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model }) => {
   if (isDownloaded) {
     downloadButton = (
       <Button
+        themes="success"
+        className="min-w-[80px]"
         onClick={() => {
           setMainViewState(MainViewState.MyModels)
         }}
@@ -90,9 +93,11 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model }) => {
     <div className="flex items-center justify-between rounded-t-md border-b border-border bg-background/50 px-4 py-2">
       <div className="flex items-center gap-2">
         <span className="font-medium">{model.name}</span>
+      </div>
+      <div className="space-x-2">
         {performanceTag && renderBadge(performanceTag)}
+        {downloadButton}
       </div>
-      {downloadButton}
     </div>
   )
 }

diff --git a/web/screens/ExploreModels/index.tsx b/web/screens/ExploreModels/index.tsx
@@ -1,4 +1,12 @@
-import { ScrollArea } from '@janhq/uikit'
+import { useState } from 'react'
+
+import { Input, ScrollArea } from '@janhq/uikit'
+
+import { SearchIcon } from 'lucide-react'
+
+import { Code2Icon, UserIcon } from 'lucide-react'
+
+import { twMerge } from 'tailwind-merge'
 
 import Loader from '@/containers/Loader'
 
@@ -8,14 +16,61 @@ import ExploreModelList from './ExploreModelList'
 
 const ExploreModelsScreen = () => {
   const { loading, models } = useGetConfiguredModels()
+  const [searchValue, setsearchValue] = useState('')
+  const [tabActive, setTabActive] = useState('Model')
   if (loading) return <Loader description="loading ..." />
 
   return (
     <div className="flex h-full w-full overflow-y-auto bg-background">
       <div className="h-full w-full p-4">
         <div className="h-full" data-test-id="testid-explore-models">
           <ScrollArea>
-            <ExploreModelList models={models} />
+            <div className="relative">
+              <img src="./images/hub-banner.png" alt="Hub Banner" />
+              <div className="absolute left-1/2 top-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2">
+                <SearchIcon
+                  size={20}
+                  className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+                />
+                <Input
+                  placeholder="Search models"
+                  className="bg-white pl-9 dark:bg-background"
+                  onChange={(e) => {
+                    setsearchValue(e.target.value)
+                  }}
+                />
+              </div>
+            </div>
+            <div className="mx-auto w-4/5 py-6">
+              <div className="flex items-center justify-between">
+                <div className="inline-flex overflow-hidden rounded-lg border border-border">
+                  <div
+                    className={twMerge(
+                      'flex cursor-pointer items-center space-x-2 border-r border-border px-3 py-2',
+                      tabActive === 'Model' && 'bg-secondary'
+                    )}
+                    onClick={() => setTabActive('Model')}
+                  >
+                    <Code2Icon size={20} className="text-muted-foreground" />
+                    <span>Model</span>
+                  </div>
+                  <div
+                    className={twMerge(
+                      'pointer-events-none flex cursor-pointer items-center space-x-2 px-3 py-2',
+                      tabActive === 'Assistant' && 'bg-secondary'
+                    )}
+                    onClick={() => setTabActive('Assistant')}
+                  >
+                    <UserIcon size={20} className="text-muted-foreground" />
+                    <span>Assistant</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-6">
+                <ExploreModelList models={models} />
+              </div>
+            </div>
           </ScrollArea>
         </div>
       </div>