tiefen_space_h5/components/StreamerNavigator/index.js

78 lines
2.5 KiB
JavaScript
Raw Normal View History

2024-08-02 22:12:54 +08:00
"use client";
import React, { useEffect, useState } from "react";
import { Mask, Image,Button } from "antd-mobile";
import {getStreamerInfo} from "@/api/space";
import { useRouter } from "next/navigation";
import {remove} from "@/utils/storeInfo"
export default function StreamerNavigator({
visible,
mid,
setVisible
}) {
const [streamerInfo,setStreamerInfo] = useState(null);
const router = useRouter();
useEffect(()=>{
getStreamerInfo(mid).then(res=>{
setStreamerInfo(res);
})
},[])
const handleCloseMask = ()=>{
remove("inviter")
setVisible(false)
}
return (
<Mask visible={visible} onMaskClick={handleCloseMask}>
<div
className="fixed top-[12.5%] left-[12.5%] w-3/4 flex-1 justify-center items-center bg-[#00000080]"
>
<div
className="rounded-2xl bg-[#1E1C29] items-center overflow-hidden"
>
<div className="flex flex-col w-full">
<Image
src={streamerInfo?.streamer_ext?.cover?.images[0]?.urls[0]}
fit="cover"
style={{ aspectRatio: 1}}
className="w-full"
/>
<div className="p-4">
<div className="flex flex-row items-center">
<p
className="text-xl text-white font-medium mr-1"
>
{streamerInfo?.streamer_ext?.name}
</p>
<div className="w-5 h-5">
<Image src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/verification.png"} />
</div>
</div>
<p className="text-sm text-[#FFFFFFB2] mt-1 truncate ">
{streamerInfo?.streamer_ext?.bio}
</p>
<div
onClick={
streamerInfo?.streamer_ext?.zones?.length === 0
? () => {
handleCloseMask();
router.push("/profile/"+streamerInfo?.mid);
}
: () => {
handleCloseMask();
router.push("/space/person_space_introduce/"+streamerInfo?.mid);
}
}
className="w-full p-2 mt-4 text-base rounded-full bg-[#FF669E] text-center"
>
{streamerInfo?.streamer_ext?.zones?.length === 0 ? "查看主页" : "查看空间"}
</div>
</div>
</div>
</div>
</div>
</Mask>
);
}