hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

page home responsive & change component element & page blog item

Browse Source
This commit is contained in:
Ehsan
2024-08-15 10:10:57 +03:30
parent 1341253384
commit fd3b82143b
44 changed files with 4149 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/comment/ItemUser.js
+161
View File
@@ -0,0 +1,161 @@
import Image from "next/image";
import { Button, Skeleton } from "@mui/material";
import Field from "./Field";
// Icons
import BoldDisLikeComment from "@/components/icons/BoldDisLikeComment";
import BoldLikeComment from "@/components/icons/BoldLikeComment";
import DisLikeComment from "@/components/icons/DisLikeComment";
import ArrowUpComment from "@/components/icons/ArrowUpComment";
import LikeComment from "@/components/icons/LikeComment";
function ItemUser({ update, setUpdate, list, setList, data, loading }) {
const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
if (nameIsLike === 'is_like' && data.is_dislike) {
data.is_dislike = false;
data.dislike--;
} else if (nameIsLike === 'is_dislike' && data.is_like) {
data.is_like = false;
data.like--;
}
data[nameLike] = lengthLike;
data[nameIsLike] = !data[nameIsLike];
setUpdate(!update);
}
return (
<li className="w-full">
<div className="flex items-center justify-start gap-2">
{loading ? (
<Skeleton variant="circular" className="!min-w-[40px] !min-h-[40px]" />
) : (
<Image
className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
src={data.profile}
width={40}
height={40}
alt="profile"
/>
)}
<div className="flex flex-col items-start justify-center gap-4">
{loading ? (
<Skeleton variant="text" className="!min-w-[70px]" />
) : (
<>
<p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">{data.name}</p>
</>
)}
</div>
</div>
<div className="mr-12 mt-2">
{loading ? (
<>
<Skeleton variant="text" className="!w-full !mt-8" />
<Skeleton variant="text" className="!w-1/3" />
</>
) : (
<p className="text-[#495057] text-[14px] font-normal leading-[30px]">{data.comment}</p>
)}
<div className="flex items-center justify-start mt-2 gap-[28px]">
<div className="flex items-center justify-start gap-1">
<div
className="cursor-pointer"
onClick={() =>
handleLike(data.is_like ? data.like - 1 : data.like + 1, data, 'like', 'is_like')
}
>
{data.is_like ? (
<BoldLikeComment />
) : (
<LikeComment />
)}
</div>
{loading ? (
<Skeleton variant="text" className="!min-w-[8px]" />
) : (
<p className="text-[#6C757D] text-[12px] font-normal select-none">{data.like}</p>
)}
</div>
<div className="flex items-center justify-start gap-1">
<div
className="cursor-pointer"
onClick={() =>
handleLike(data.is_dislike ? data.dislike - 1 : data.dislike + 1, data, 'dislike', 'is_dislike')
}
>
{data.is_dislike ? (
<BoldDisLikeComment />
) : (
<DisLikeComment />
)}
</div>
{loading ? (
<Skeleton variant="text" className="!min-w-[8px]" />
) : (
<p className="text-[#6C757D] text-[12px] font-normal select-none">{data.dislike}</p>
)}
</div>
<Button
className="!text-[#495057] !text-[12px] !font-medium"
onClick={() => {
data.is_open_answer = !data.is_open_answer;
setUpdate(!update);
}}
variant="text"
>پاسخ</Button>
</div>
<div
className={`flex flex-col mt-2 justify-center overflow-hidden transition duration-500 items-start gap-2 mb-2
${data.is_open_answer ? 'max-h-fit' : 'max-h-0'}`}
>
<Field
type='text'
title='پاسخ شما...'
isPlaceHolder={true}
/>
<Button
variant="contained"
className="!p-2 !h-10 !text-[12px] !font-medium !text-[#FFF] sm:!py-[10px] md:!px-[12px] !rounded-[8px] !bg-[#5559CE]
!shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]"
>
ارسال پاسخ
</Button>
</div>
{!!data.replays.length && (
<div className="flex items-center justify-start gap-1 my-2">
<Button
className="!text-[#0FA1B3] !text-[12px] !font-medium"
onClick={() => {
data.is_open_reply = !data.is_open_reply;
setUpdate(!update);
}}
>
مشاهده پاسخ ها ({data.replays.length})
<div className={`!mr-1 ${data.is_open_reply ? '!rotate-0' : '!rotate-180'}`}>
<ArrowUpComment />
</div>
</Button>
</div>
)}
<ul
className={`flex flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12
${loading && 'w-full'}
${data.is_open_reply ? 'max-h-fit mt-12' : 'max-h-0'}`}
>
{data.replays.map((item, idx) => (
<ItemUser
key={idx}
data={item}
update={update}
loading={loading}
setUpdate={setUpdate}
/>
))}
</ul>
</div>
</li>
)
}
export default ItemUser