82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
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'
|
|
|
|
import { useGetConfiguredModels } from '@/hooks/useGetConfiguredModels'
|
|
|
|
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>
|
|
<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>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ExploreModelsScreen
|