tiefen_space_h5/app/my/editUserProfile/selectUserProfileItem/page.js

68 lines
2.3 KiB
JavaScript
Raw Normal View History

2024-07-02 23:08:38 +08:00
"use client";
import React from "react";
import { Avatar, Divider } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";
export default function SelectUserProfileItem() {
const router = useRouter();
return (
<div>
<div className="p-4 fixed top-0 z-10 w-full">
<div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
<FontAwesomeIcon
icon={faAngleLeft}
size="xl"
onClick={() => {
router.back();
}}
/>
</div>
<p className="text-base text-center leading-9">修改资料</p>
</div>
{/* 内容 */}
<div className="pt-16 px-4">
<div className="flex justify-between items-center mt-2">
<span className="text-base font-medium">头像</span>
<div className="flex items-center">
<Avatar
src="https://picsum.photos/seed/picsum/200/300"
style={{ "--border-radius": "50px", "--size": "2rem" }}
/>
<FontAwesomeIcon icon={faAngleRight} size="xl" className=" ml-2" />
</div>
</div>
<Divider className="my-2" />
<div
className="flex justify-between items-center mt-2"
onClick={() => {
router.push("/my/editUserProfile/editUserName");
}}
>
<span className="text-base font-medium">昵称</span>
<div>
<span className="text-base font-medium">铁粉空间</span>
<FontAwesomeIcon
icon={faAngleRight}
size="xl"
className=" ml-2"
onClick={() => {
router.push("my/editUserProfile/editUserName");
}}
/>
</div>
</div>
<Divider className="my-2" />
<div className="flex justify-between items-center mt-2">
<span className="text-base font-medium">ID</span>
<span className="text-base text-[#FFFFFF80] font-medium">
45676456
</span>
</div>
<Divider className="my-2" />
</div>
</div>
);
}