64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
||
import Warning from "../../../assets/gifs/warning.gif";
|
||
import useAxios from "../../../hooks/useAxios";
|
||
import Alert from "../../../components/alert/Alert";
|
||
import Button from "../../../components/button";
|
||
|
||
type TermsContent = {
|
||
title: string;
|
||
introduction: string;
|
||
notice: string;
|
||
preamble: string;
|
||
clauses: string[];
|
||
};
|
||
|
||
const Rules = () => {
|
||
const axios = useAxios();
|
||
const { data, isLoading, isError, refetch } = useQuery({
|
||
queryKey: ["siteTerms"],
|
||
queryFn: async () => {
|
||
const response = await axios.get<{ result: TermsContent }>("/home/terms");
|
||
return response.data.result;
|
||
},
|
||
staleTime: 0,
|
||
});
|
||
|
||
if (isLoading) {
|
||
return <p role="status" className="p-4 text-center">در حال دریافت قوانین و مقررات...</p>;
|
||
}
|
||
|
||
if (isError || !data) {
|
||
return (
|
||
<div className="p-4 flex flex-col items-center gap-3">
|
||
<Alert type="warning">دریافت قوانین و مقررات انجام نشد. دوباره تلاش کنید.</Alert>
|
||
<Button onClick={() => refetch()}>تلاش دوباره</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="relative w-full h-full flex flex-col px-4 py-4 text-start" dir="rtl">
|
||
<h1 className="font-bold text-xl md:text-2xl text-center">{data.title}</h1>
|
||
{data.introduction && (
|
||
<p className="font-normal text-sm mt-2 md:text-lg text-start whitespace-pre-line">{data.introduction}</p>
|
||
)}
|
||
{data.notice && (
|
||
<p className="font-bold text-sm mt-2 md:text-lg text-yellow-500 text-start whitespace-pre-line">{data.notice}</p>
|
||
)}
|
||
{data.preamble && (
|
||
<p className="font-normal text-sm mt-2 md:text-lg text-start whitespace-pre-line">{data.preamble}</p>
|
||
)}
|
||
<ul className="w-full h-full mt-2">
|
||
{data.clauses.map((clause, index) => (
|
||
<li key={index} className="flex flex-row mt-2 gap-2 w-full bg-gray-800 p-2 rounded-md items-center">
|
||
<img src={Warning} alt="" className="w-[2rem] shrink-0" />
|
||
<p className="font-normal max-sm:text-xs max-md:text-sm md:text-lg text-start whitespace-pre-line">{clause}</p>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Rules;
|