web/src/app/profile/address/page.jsx

97 lines
3.4 KiB
JavaScript

"use client";
import Navbar from "@comp/Navbar/page";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect } from "react";
import SideBarProfile from "../component/SideBarProfile/page";
import AppContext from "@ctx/AppContext";
import BottomSheetDeleteAddress from "plugins/bottomSheet/BottomSheetDeleteAddress";
const page = () => {
const CTX = useContext(AppContext);
const addressData = CTX.state.addressData;
console.log(addressData);
useEffect(() => {
if (addressData.length <= 0) {
CTX.fetchAddressUser();
}
}, []);
return (
<>
<Navbar theme={1} />
<div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 rtl gap-6 xs:px-[20px] lg:px-[100px] xl:[300px]">
<SideBarProfile />
<div className="lg:col-span-3 xl:col-span-4 ">
<div className="bg-gray-100 p-5 mt-5 rounded-lg overflow-hidden">
<div className="flex justify-between">
<p className="mb-0 font-bold">آدرس های شما</p>
<button
className="btn btn-primary text-sm rounded-lg py-1"
onClick={() => CTX.setBottomSheetAddressOpen(true)}
>
{" "}
افزودن آدرس
</button>
</div>
{addressData.length > 0 ? (
<div className="overflow-x-auto mt-5">
<table
className="table-auto w-full bg-white border-collapse rounded-lg"
dir="rtl"
>
<thead>
<tr className="bg-gray-300 ">
<th className="px-4 text-xs font-semibold text-gray-600 uppercase border-b py-5 text-center">
آدرس
</th>
<th className="px-4 text-xs font-semibold text-gray-600 uppercase border-b py-5 text-center">
عملیات
</th>
</tr>
</thead>
{addressData.map((e) => (
<tbody className="text-gray-600 text-sm">
<tr className="border-b">
<td className="px-4 py-3 text-center">
{e.province} ، {e.city} ، {e.address} ،{e.plaque} ،
{e.buildingUnit}{" "}
</td>
<td className="px-4 py-3 font-semibold text-center">
<button
className="btn bg-red-500 text-white !py-1 rounded-xl text-sm font-normal"
onClick={() =>
CTX.setBottomSheetDeleteAddressOpen(true)
}
>
حذف{" "}
</button>{" "}
</td>
</tr>
</tbody>
))}
</table>
</div>
) : (
<div className="flex justify-center my-[100px]">
<p className="mb-0 rounded-full w-fit shadow bg-white text-sm p-5 ">
شما آدرسی ندارید
</p>
</div>
)}
</div>
</div>
</div>
<BottomSheetDeleteAddress />
</>
);
};
export default page;