MSList/components/SearchBar.tsx
mei 36e4ee302b feat: 优化服务器卡片组件并添加新功能
- 更新服务器卡片样式,增加更多图标和链接类型
- 添加 Font Awesome 图标库支持
- 更新搜索栏 placeholder 文本
- 修改页面 metadata 信息
- 更新服务器列表数据,移除 jenkins 链接
2025-02-03 22:14:50 +08:00

23 lines
718 B
TypeScript

import { Search } from "lucide-react"
interface SearchBarProps {
searchTerm: string
setSearchTerm: (term: string) => void
}
export default function SearchBar({ searchTerm, setSearchTerm }: SearchBarProps) {
return (
<div className="relative w-full max-w-md mx-auto mb-6">
<input
type="text"
placeholder="搜索服务端..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full px-4 py-2 pl-10 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
/>
<Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
</div>
)
}