80 lines
2.5 KiB
React
80 lines
2.5 KiB
React
|
"use client";
|
||
|
|
|
||
|
|
import AppContext from "@ctx/AppContext";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import { useContext } from "react";
|
||
|
|
import { BottomSheet } from "react-spring-bottom-sheet";
|
||
|
|
|
||
|
|
const BottomSheetComment = ({
|
||
|
|
handleCreateReview,
|
||
|
|
name,
|
||
|
|
content,
|
||
|
|
setContent,
|
||
|
|
handleStarClick,
|
||
|
|
rate,
|
||
|
|
}) => {
|
||
|
|
const CTX = useContext(AppContext);
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
const renderStars = () => {
|
||
|
|
return [...Array(5)].map((_, index) => {
|
||
|
|
const value = index + 1;
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
key={index}
|
||
|
|
onClick={() => handleStarClick(value)}
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
fill={value <= rate ? "yellow" : "gray"}
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
strokeWidth={0.5}
|
||
|
|
stroke="currentColor"
|
||
|
|
className="w-8 h-8 cursor-pointer"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
d="M11.048 2.927c.3-.921 1.654-.921 1.954 0l1.614 4.958a1 1 0 00.95.69h5.204c.969 0 1.371 1.24.588 1.81l-4.205 3.053a1 1 0 00-.364 1.118l1.614 4.958c.3.921-.755 1.688-1.538 1.118L12 17.347l-4.205 3.053c-.783.57-1.838-.197-1.538-1.118l1.614-4.958a1 1 0 00-.364-1.118L3.302 10.385c-.783-.57-.38-1.81.588-1.81h5.204a1 1 0 00.95-.69l1.614-4.958z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<BottomSheet
|
||
|
|
open={CTX.state.bottomSheetCommentOpen}
|
||
|
|
onDismiss={() => CTX.setBottomSheetCommentOpen(false)}
|
||
|
|
className={"z-50 relative "}
|
||
|
|
>
|
||
|
|
<div className="p-3 text-center">
|
||
|
|
<p className="pb-3 mb-0 text-sm rtl">
|
||
|
|
شما در حال اضافه کردن نظر برای <strong> {name} </strong> هستید
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="px-4 pb-10 mt-5 rtl">
|
||
|
|
<h3 className="text-sm">دیدگاه خود را وارد کنید</h3>
|
||
|
|
<textarea
|
||
|
|
className="mt-2 form-control"
|
||
|
|
cols="30"
|
||
|
|
rows="8"
|
||
|
|
onChange={(e) => setContent(e.target.value)}
|
||
|
|
value={content}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="mt-4">
|
||
|
|
<h3 className="mb-2 text-sm">امتیاز را انتخاب کنید</h3>
|
||
|
|
<div className="flex">{renderStars()}</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-end" onClick={() => handleCreateReview()}>
|
||
|
|
<button className="w-full py-3 mt-5 text-sm btn btn-primary rounded-3xl">
|
||
|
|
ارسال دیدگاه (برای ارسال دیدگاه ابتدا باید ورود کنید)
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</BottomSheet>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BottomSheetComment;
|