Refactor: Update ProductConfigList component

- Import IoAlertCircleSharp from react-icons/io5
- Import Link from react-router-dom
- Add conditional rendering for the title based on data length
- Add Link and button for redirecting to the store when no configs exist
This commit is contained in:
ALi Josheghani
2024-09-14 22:02:48 +03:30
parent c50b1346fe
commit 75900eaef6

View File

@@ -6,7 +6,8 @@ import ConfigItem from "./components/ConfigItem";
import ConfigItemLoading from "./components/ConfigItemLoading"; import ConfigItemLoading from "./components/ConfigItemLoading";
import ProfileImage from "./components/ProfileImage"; import ProfileImage from "./components/ProfileImage";
import { Fragment } from "react/jsx-runtime"; import { Fragment } from "react/jsx-runtime";
import { MdErrorOutline } from "react-icons/md"; import { IoAlertCircleSharp } from "react-icons/io5";
import { Link } from "react-router-dom";
const ProductConfigList = ({ const ProductConfigList = ({
data, data,
@@ -30,9 +31,11 @@ const ProductConfigList = ({
</Button> </Button>
</div> </div>
<p className="max-md:text-lg text-xl font-bold text-center"> {data?.result?.configs?.length !== 0 && (
لیست کانفیگ ها <p className="max-md:text-lg text-xl font-bold text-center">
</p> لیست کانفیگ ها
</p>
)}
<div <div
className="w-full h-full p-3 max-sm:px-0 flex flex-col gap-3 className="w-full h-full p-3 max-sm:px-0 flex flex-col gap-3
justify-center items-center" justify-center items-center"
@@ -50,10 +53,18 @@ const ProductConfigList = ({
{error.message} {error.message}
</Alert> </Alert>
) : data?.result?.configs?.length === 0 ? ( ) : data?.result?.configs?.length === 0 ? (
<div className="w-full h-full flex flex-col gap-3 justify-center items-center"> <Link to={'/configs/3'} className="w-full h-full flex flex-col gap-3 justify-center items-center">
<MdErrorOutline className="w-[5rem] h-[5rem]" /> <IoAlertCircleSharp className="max-md:w-[3.5rem] max-md:h-[3.5rem] w-[5rem] h-[5rem]" />
<p className="text-sm md:text-base"> کانفیگی وجود ندارد </p> <div
</div> className="w-full h-auto flex flex-col gap-5 justify-center items-center"
>
<p className="text-sm md:text-base">
{" "}
شما در حال حاضر سرویسی ندارید برای خرید کلیک کنید{" "}
</p>
<Button>برو به فروشگاه</Button>
</div>
</Link>
) : ( ) : (
data?.result?.configs?.map((item) => { data?.result?.configs?.map((item) => {
return ( return (