130 lines
4.5 KiB
JavaScript
130 lines
4.5 KiB
JavaScript
"use client";
|
|
|
|
import React, { useEffect, useState, useMemo } from "react";
|
|
import Photos from "../Photos";
|
|
import { useRouter } from "next/navigation";
|
|
import PaySpacePost from "../PaySpacePost";
|
|
import { Image } from "antd-mobile";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
|
|
export default function PostItem({
|
|
type,
|
|
follow,
|
|
date = new Date(),
|
|
data = {},
|
|
}) {
|
|
const router = useRouter();
|
|
const [isOpenText, setIsOpenText] = useState(false);
|
|
useEffect(() => {
|
|
return () => {
|
|
router.prefetch("/profile");
|
|
};
|
|
}, []);
|
|
const getDays = useMemo(() => {
|
|
const today = new Date();
|
|
const days = Math.floor((today - date) / (1000 * 60 * 60 * 24));
|
|
return days;
|
|
}, []);
|
|
return (
|
|
<div>
|
|
{type == "space" && (
|
|
<Image src="/images/top_post.png" width={76} className="mb-2" />
|
|
)}
|
|
<div className="flex">
|
|
<img
|
|
className="flex-none w-8 h-8 rounded-full mr-2"
|
|
src={data.streamer_ext?.avatar.images[0].urls[0]}
|
|
alt=""
|
|
onClick={() => router.push("/profile")}
|
|
/>
|
|
|
|
<div className="flex-1">
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-bold text-md">{data.streamer_ext?.name}</span>
|
|
{type == "post" && (
|
|
<span className="rounded-full bg-[#FFFFFF1A] px-2 py-1 text-xs text-white font-medium">
|
|
{data.is_followed ? "已关注" : "关注"}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<p className={`mb-2 mt-2 ${!isOpenText ? "text-ellipsis-3" : ""}`}>
|
|
{data.text}
|
|
</p>
|
|
{
|
|
data.text?.length>50 &&
|
|
<div
|
|
className="font-bold text-btn my-4 text-base"
|
|
onClick={() => setIsOpenText(!isOpenText)}
|
|
>
|
|
{isOpenText ? "收起" : "全文"}
|
|
</div>
|
|
}
|
|
</div>
|
|
{data.media_component && <Photos media={data.media_component} />}
|
|
{type == "space" && (
|
|
<PaySpacePost type="superFan" price="19.89" status={0} />
|
|
)}
|
|
<div className="flex justify-between items-center mt-2">
|
|
{type == "post" ? (
|
|
<div className="flex items-center">
|
|
{
|
|
data.is_active_within_a_week &&
|
|
<>
|
|
<Image
|
|
src="/icons/space_new_post.png"
|
|
width={18}
|
|
className="w-4 h-full mr-1"
|
|
placeholder=""
|
|
/>
|
|
<span className="mr-1 text-primary text-xs">
|
|
{data.days_elapsed_since_the_last_zones_update < 7
|
|
? `空间${
|
|
data.days_elapsed_since_the_last_zones_update === 0
|
|
? "今日"
|
|
: "new" === 1
|
|
? "昨日"
|
|
: "new" === 2
|
|
? "前天"
|
|
: data.days_elapsed_since_the_last_zones_update + "天前"
|
|
}有更新`
|
|
: "1" === 2
|
|
? "空间今日有更新"
|
|
: ""}
|
|
</span>
|
|
<FontAwesomeIcon icon={faAngleRight} color="#FF669E" size="sm" />
|
|
</>
|
|
}
|
|
</div>
|
|
) : (
|
|
<div className="text-[#ffffff88] text-xs">
|
|
<span className="mr-2">
|
|
{getDays < 3
|
|
? `${
|
|
getDays === 0 ? "今日" : "new" === 1 ? "昨日" : "前天"
|
|
}`
|
|
: date.getMonth() + 1 + "月" + date.getDate() + "日"}
|
|
</span>
|
|
<span>{date.getHours() + ":" + date.getMinutes()}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center">
|
|
<div className="flex items-center mr-4">
|
|
<Image
|
|
src={data.is_thumbed_up ? "/icons/thumbup.png":"/icons/notthumbup.png"}
|
|
width={32}
|
|
className="w-4 h-full"
|
|
placeholder=""
|
|
/>
|
|
<span className="text-xs">点赞</span>
|
|
</div>
|
|
<span className="mr-2">···</span>
|
|
</div>
|
|
</div>
|
|
{/* <div className="rounded-full h-px bg-gray-200 mt-2"></div> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|