72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { LoaderIcon } from "react-hot-toast";
|
||
import Alert from "../../../components/alert/Alert";
|
||
import Button from "../../../components/button";
|
||
import { ProfileDetailsProps } from "../../../types/props";
|
||
import ConfigItem from "./components/ConfigItem";
|
||
import ConfigItemLoading from "./components/ConfigItemLoading";
|
||
import ProfileImage from "./components/ProfileImage";
|
||
import { Fragment } from "react/jsx-runtime";
|
||
|
||
const ProductConfigList = ({
|
||
data,
|
||
isLoading,
|
||
isFetching,
|
||
error,
|
||
userTitle,
|
||
}: ProfileDetailsProps) => {
|
||
return (
|
||
<div className="w-full h-full p-5 glass flex flex-col gap-3">
|
||
<ProfileImage />
|
||
<div className="w-full h-full flex justify-center items-center">
|
||
<Button extra="!py-3 max-md:!py-1 max-md:px-2 !bg-gray-800 !text-white">
|
||
{isLoading || isFetching ? (
|
||
<LoaderIcon className="m-1.5" />
|
||
) : error ? (
|
||
"error"
|
||
) : (
|
||
userTitle
|
||
)}
|
||
</Button>
|
||
</div>
|
||
|
||
<p className="max-md:text-lg text-xl font-bold text-center">
|
||
لیست کانفیگ ها
|
||
</p>
|
||
<div
|
||
className="w-full h-full p-3 flex flex-col gap-3
|
||
justify-center items-center"
|
||
>
|
||
{isLoading || isFetching ? (
|
||
Array(3)
|
||
.fill(null)
|
||
.map((_, i) => (
|
||
<Fragment key={i}>
|
||
<ConfigItemLoading />
|
||
</Fragment>
|
||
))
|
||
) : error ? (
|
||
<Alert type="danger" message="خطایی با این موضوع رخ داد: ">
|
||
{error.message}
|
||
</Alert>
|
||
) : (
|
||
data?.result?.configs?.map((item) => {
|
||
return (
|
||
<Fragment key={item.id}>
|
||
<ConfigItem
|
||
configName={item.title}
|
||
dateBuy={item.created_at || "تاریخ نامعتبر"}
|
||
isDisabled={false}
|
||
isShowTraffic={item.show_traffic}
|
||
textCopy={item.url}
|
||
/>
|
||
</Fragment>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ProductConfigList;
|