87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useAtomValue } from "jotai";
|
|
import { searchingModelText } from "@/_helpers/JotaiWrapper";
|
|
import { Product } from "@/_models/Product";
|
|
import DownloadedModelCard from "../DownloadedModelCard";
|
|
import AvailableModelCard from "../AvailableModelCard";
|
|
import useDeleteModel from "@/_hooks/useDeleteModel";
|
|
import useGetAvailableModels from "@/_hooks/useGetAvailableModels";
|
|
import useDownloadModel from "@/_hooks/useDownloadModel";
|
|
|
|
const ModelListContainer: React.FC = () => {
|
|
const searchText = useAtomValue(searchingModelText);
|
|
const { deleteModel } = useDeleteModel();
|
|
const { downloadModel } = useDownloadModel();
|
|
|
|
const {
|
|
availableModels,
|
|
downloadedModels,
|
|
getAvailableModelExceptDownloaded,
|
|
} = useGetAvailableModels();
|
|
|
|
const onDeleteClick = async (product: Product) => {
|
|
await deleteModel(product);
|
|
await getAvailableModelExceptDownloaded();
|
|
};
|
|
|
|
const onDownloadClick = async (model: Product) => {
|
|
await downloadModel(model);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col w-full h-full pl-[63px] pr-[89px] pt-[60px] overflow-y-auto">
|
|
<div className="pb-5 flex flex-col gap-2">
|
|
<Title title="Downloaded models" />
|
|
{downloadedModels
|
|
?.filter(
|
|
(e) =>
|
|
searchText.toLowerCase().trim() === "" ||
|
|
e.name.toLowerCase().includes(searchText.toLowerCase())
|
|
)
|
|
.map((item) => (
|
|
<DownloadedModelCard
|
|
key={item.id}
|
|
product={item}
|
|
onDeleteClick={onDeleteClick}
|
|
isRecommend={false}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="pb-5 flex flex-col gap-2">
|
|
<Title title="Browse available models" />
|
|
{availableModels
|
|
?.filter(
|
|
(e) =>
|
|
searchText.toLowerCase().trim() === "" ||
|
|
e.name.toLowerCase().includes(searchText.toLowerCase())
|
|
)
|
|
.map((item) => (
|
|
<AvailableModelCard
|
|
key={item.id}
|
|
product={item}
|
|
onDownloadClick={onDownloadClick}
|
|
isRecommend={false}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
type Props = {
|
|
title: string;
|
|
};
|
|
|
|
const Title: React.FC<Props> = ({ title }) => {
|
|
return (
|
|
<div className="flex gap-[10px]">
|
|
<span className="font-semibold text-xl leading-[25px] tracking-[-0.4px]">
|
|
{title}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ModelListContainer;
|