47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import HeaderTitle from "../HeaderTitle";
|
|
import SearchBar, { SearchType } from "../SearchBar";
|
|
import SimpleCheckbox from "../SimpleCheckbox";
|
|
import SimpleTag, { TagType } from "../SimpleTag";
|
|
import ExploreModelList from "../ExploreModelList";
|
|
|
|
const tags = [
|
|
"Roleplay",
|
|
"Llama",
|
|
"Story",
|
|
"Casual",
|
|
"Professional",
|
|
"CodeLlama",
|
|
"Coding",
|
|
];
|
|
const checkboxs = ["GGUF", "TensorRT", "Meow", "JigglyPuff"];
|
|
|
|
const ExploreModelContainer: React.FC = () => (
|
|
<div className="flex flex-col flex-1 px-16 pt-14 overflow-hidden">
|
|
<HeaderTitle title="Explore Models" />
|
|
<SearchBar
|
|
type={SearchType.Model}
|
|
placeholder="Owner name like TheBloke, etc.."
|
|
/>
|
|
<div className="flex flex-1 gap-x-10 mt-9 overflow-hidden">
|
|
<div className="w-64">
|
|
<h2 className="font-semibold text-xs mb-[15px]">Tags</h2>
|
|
<SearchBar placeholder="Filter by tags" />
|
|
<div className="flex flex-wrap gap-[9px] mt-[14px]">
|
|
{tags.map((item) => (
|
|
<SimpleTag key={item} title={item} type={item as TagType} />
|
|
))}
|
|
</div>
|
|
<hr className="my-10" />
|
|
<fieldset>
|
|
{checkboxs.map((item) => (
|
|
<SimpleCheckbox key={item} name={item} />
|
|
))}
|
|
</fieldset>
|
|
</div>
|
|
<ExploreModelList />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default ExploreModelContainer;
|