80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
"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;
|