refactor(search): add IconInput size variant and adopt across search bars

This commit is contained in:
zetaloop
2026-02-25 15:56:24 +08:00
parent 5812b7b0ed
commit f9d48af658
3 changed files with 36 additions and 15 deletions
+6 -8
View File
@@ -2,7 +2,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { IconInput } from "@/components/ui/icon-input"
import { listGames, listPlayers, listShops } from "@/lib/api"
import { GameIcon } from "@/lib/game-icons"
import { ArrowRight, Search, ShoppingBag, Star } from "lucide-react"
@@ -30,17 +30,15 @@ export default function HomePage() {
</div>
<div id="discover-search" className="w-full max-w-2xl mx-auto">
<form action="/search" className="relative flex items-center w-full max-w-xl mx-auto">
<Search className="absolute left-4 h-5 w-5 text-muted-foreground z-10" />
<Input
<form action="/search" className="w-full max-w-xl mx-auto">
<IconInput
inputSize="lg"
icon={<Search />}
type="text"
name="q"
placeholder="搜索陪玩、店铺、游戏..."
className="w-full h-12 pl-12 pr-24 rounded-xl border-border bg-card text-base shadow-[var(--shadow-card)] transition-shadow focus:shadow-[var(--shadow-card-hover)]"
className="w-full border-border bg-card shadow-[var(--shadow-card)] transition-shadow focus:shadow-[var(--shadow-card-hover)]"
/>
<Button type="submit" className="absolute right-1.5 rounded-lg px-6 h-9">
</Button>
</form>
</div>
</div>