pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 05:31:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor AutocompleteSearch for mobile

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 21:19:08 +00:00
parent db792c7011
commit 444bc12a5b
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/search/AutocompleteSearch.tsx
View File

@@ -259,7 +259,7 @@ export function AutocompleteSearch({
<div
key={item.id}
onClick={() => handleResultClick(item)}
className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors ${
className={`flex items-start gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg cursor-pointer transition-colors ${
index === selectedIndex
? 'bg-accent/10 border border-accent/20'
: 'hover:bg-muted/50'
@@ -267,32 +267,32 @@ export function AutocompleteSearch({
>
{item.type === 'suggestion' ? (
<>
<Clock className="w-4 h-4 text-muted-foreground" />
<div className="flex-1">
<div className="font-medium">{item.title}</div>
<Clock className="w-4 h-4 text-muted-foreground flex-shrink-0 mt-0.5" />
<div className="flex-1 min-w-0">
<div className="font-medium truncate">{item.title}</div>
</div>
</>
) : (
<>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
<span className="font-semibold text-foreground truncate">{item.title}</span>
<Badge variant="outline" className={`text-xs font-medium ${getTypeColor(item.type)}`}>
<div className="flex flex-col sm:flex-row sm:items-center gap-1.5 sm:gap-2">
<div className="flex items-center gap-1.5 sm:gap-2 min-w-0">
<span className="font-semibold text-foreground text-sm sm:text-base line-clamp-1">{item.title}</span>
<Badge variant="outline" className={`text-[10px] sm:text-xs font-medium whitespace-nowrap ${getTypeColor(item.type)}`}>
{getTypeLabel(item.type)}
</Badge>
</div>
{item.subtitle && (
<Badge variant="secondary" className="text-xs flex-shrink-0">
<Badge variant="secondary" className="text-[10px] sm:text-xs whitespace-nowrap w-fit">
{item.subtitle}
</Badge>
)}
</div>
</div>
{((item as SearchResult).rating ?? 0) > 0 && (
<div className="flex items-center gap-1 ml-3">
<div className="flex items-center gap-1 flex-shrink-0">
<Zap className="w-3 h-3 text-yellow-500" />
<span className="text-sm font-medium">{(item as SearchResult).rating!.toFixed(1)}</span>
<span className="text-xs sm:text-sm font-medium">{(item as SearchResult).rating!.toFixed(1)}</span>
</div>
)}
</>