135 lines
4.7 KiB
JavaScript
135 lines
4.7 KiB
JavaScript
"use client";
|
||
|
||
import React from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import OwnImage from "../OwnImage";
|
||
import OwnIcon from "../OwnIcon";
|
||
export default function FoundItem({ data = {} }) {
|
||
const router = useRouter();
|
||
return (
|
||
<div
|
||
onClick={() => {
|
||
router.push("/profile/" + data.mid);
|
||
}}
|
||
>
|
||
<div className="h-max flex items-center mb-3">
|
||
<OwnImage
|
||
className="flex-none w-12 h-12 rounded-full"
|
||
outClassName="flex-none w-12 h-12 rounded-full mr-1"
|
||
roundedFull
|
||
src={data?.avatar.images[0].urls[0]}
|
||
/>
|
||
<div className="flex flex-col ml-2 items-start">
|
||
<div className="flex items-center">
|
||
<span className="text-base font-medium text-white">
|
||
{data?.name}
|
||
</span>
|
||
<div className="flex py-0.5 px-1 rounded-full items-center ml-1 bg-[#FFFFFF26]">
|
||
{data?.gender === 1 ? (
|
||
<OwnIcon
|
||
src="/icons/info/male.png"
|
||
className="w-[14px] h-[14px]"
|
||
outClassName="mr-1"
|
||
/>
|
||
) : (
|
||
<OwnIcon
|
||
src="/icons/info/female.png"
|
||
className="w-[14px] h-[14px]"
|
||
outClassName="mr-1"
|
||
/>
|
||
)}
|
||
<span className="text-xs">{data?.age}岁</span>
|
||
</div>
|
||
<div className="flex py-0.5 px-1 rounded-full items-center ml-1 bg-[#FFFFFF26]">
|
||
<OwnIcon
|
||
src="/icons/info/location.png"
|
||
className="w-[14px] h-full"
|
||
outClassName="mr-1"
|
||
/>
|
||
<span className="text-xs">{data?.city}</span>
|
||
</div>
|
||
</div>
|
||
<span className="text-xs text-[#FFFFFF80]">
|
||
全网粉丝：{data?.fans}万
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-2 grid-rows-[16rem] rounded-2xl overflow-hidden h-64">
|
||
<div className="rounded-r overflow-hidden">
|
||
<OwnImage
|
||
src={data?.cover?.images[0]?.urls[0]}
|
||
className="w-full h-full"
|
||
outClassName="w-full h-full"
|
||
/>
|
||
</div>
|
||
<div className="grid grid-rows-2 ml-1 gap-1">
|
||
{data?.album?.images.map((item, index) => {
|
||
if (index > 1) return;
|
||
return (
|
||
<div key={index} className="w-full h-full mb-1 relative">
|
||
<OwnImage
|
||
src={item?.urls[0]}
|
||
className="w-full h-full"
|
||
outClassName="w-full h-full"
|
||
rounded="rounded-l"
|
||
/>
|
||
{index === 1 && data?.album?.images.length > 2 && (
|
||
<div className="flex items-center justify-center absolute top-0 w-full h-full bg-[rgba(0,0,0,0.5)]">
|
||
<span className="text-3xl font-semibold">
|
||
+{data?.album?.images.length - 2}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
{/* 下方标签区 */}
|
||
<div className="flex h-12 justify-between items-center">
|
||
<div className="flex gap-2">
|
||
{data?.is_active_within_a_week === 1 && (
|
||
<OwnIcon src="/images/space_new.png" className="h-6" />
|
||
)}
|
||
{data?.tag?.map((item, index) => {
|
||
if (index > 2) return;
|
||
if (data?.is_active_within_a_week === 1 && index > 1) return;
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="px-2 rounded-full bg-[#FF61B030] flex items-center"
|
||
>
|
||
<span className="text-[#FF669E] text-[11px]">{item}</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="flex flex-nowrap gap-2">
|
||
{data?.platforms?.map((item, index) => {
|
||
if (index > 5) return;
|
||
return (
|
||
<div key={index} className="flex">
|
||
{index < 5 && (
|
||
<OwnImage
|
||
src={item?.icon?.images[0]?.urls[0]}
|
||
className="w-full h-[18px]"
|
||
/>
|
||
)}
|
||
{index === 5 && (
|
||
<div className="flex items-center justify-center w-full h-full rounded bg-[rgba(0,0,0,0.5)]">
|
||
<span className="text-xs font-semibold">
|
||
+{data?.platforms.length - 5}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
{/* 分割线 */}
|
||
<div className="h-[3px] rounded-full bg-[#FFFFFF26] mb-3"></div>
|
||
</div>
|
||
);
|
||
}
|