83 lines
2.9 KiB
JavaScript
83 lines
2.9 KiB
JavaScript
"use client";
|
|
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { Input, List } from "antd-mobile";
|
|
import { useRouter } from "next/navigation";
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faAngleLeft } from '@fortawesome/free-solid-svg-icons';
|
|
export default function Search() {
|
|
const router = useRouter();
|
|
// 获取屏幕高度
|
|
// const scrollHeight = 600;
|
|
const [searchValue, setSearchValue] = useState("");
|
|
useEffect(() => {}, []);
|
|
return (
|
|
<div className="">
|
|
<div className="flex items-center p-4">
|
|
<FontAwesomeIcon icon={faAngleLeft} size="xl" className="mr-3"onClick={() => {
|
|
router.back();
|
|
}}/>
|
|
<div className="flex items-center w-full">
|
|
<div className="bg-[#FFFFFF1A] rounded-lg px-4 py-1 w-full">
|
|
<Input
|
|
placeholder="搜索Ta的昵称或id"
|
|
value={searchValue}
|
|
onChange={(val) => {
|
|
setSearchValue(val);
|
|
}}
|
|
/>
|
|
</div>
|
|
{searchValue && (
|
|
<p
|
|
className="text-base whitespace-no-wrap ml-2 text-primary font-bold"
|
|
onClick={() => {
|
|
setSearchValue("");
|
|
}}
|
|
>
|
|
清空
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<List className="px-4 overflow-y-auto scrollbarBox_hidden">
|
|
<List.Item className="!p-0">
|
|
<div className="flex items-center">
|
|
<img
|
|
className="flex-none w-10 h-10 rounded-full mr-2"
|
|
src="https://picsum.photos/seed/picsum/200/300"
|
|
alt=""
|
|
/>
|
|
<div className="flex-1">
|
|
<div className="flex items-center">
|
|
<span className="text-md mr-2 text-base text-white font-medium">用户名</span>
|
|
<span className="py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full text-white text-xs font-medium">
|
|
ID 845457
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-[#FFFFFF80]">御姐风细跟高跟鞋太绝了</p>
|
|
</div>
|
|
</div>
|
|
</List.Item>
|
|
<List.Item className="!p-0">
|
|
<div className="flex items-center">
|
|
<img
|
|
className="flex-none w-10 h-10 rounded-full mr-2"
|
|
src="https://picsum.photos/seed/picsum/200/300"
|
|
alt=""
|
|
/>
|
|
<div className="flex-1">
|
|
<div className="flex items-center">
|
|
<span className="text-md mr-2 text-base text-white font-medium">用户名</span>
|
|
<span className="py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full text-white text-xs font-medium">
|
|
ID 845457
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-[#FFFFFF80]">御姐风细跟高跟鞋太绝了</p>
|
|
</div>
|
|
</div>
|
|
</List.Item>
|
|
</List>
|
|
</div>
|
|
);
|
|
}
|