대시보드 중간 커밋

features/dashboard/components/search/StockSearchResults.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+// import { Activity, TrendingDown, TrendingUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { DashboardStockSearchItem } from "@/features/dashboard/types/dashboard.types";
+
+interface StockSearchResultsProps {
+  items: DashboardStockSearchItem[];
+  onSelect: (item: DashboardStockSearchItem) => void;
+  selectedSymbol?: string;
+}
+
+export function StockSearchResults({
+  items,
+  onSelect,
+  selectedSymbol,
+}: StockSearchResultsProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className="flex flex-col p-2">
+      {items.map((item) => {
+        const isSelected = item.symbol === selectedSymbol;
+        return (
+          <Button
+            key={item.symbol}
+            variant="outline"
+            className={cn(
+              "h-auto w-full flex-col items-start gap-1 p-3 text-left",
+              isSelected && "border-brand-500 bg-brand-50 hover:bg-brand-100",
+            )}
+            onClick={() => onSelect(item)}
+          >
+            <div className="flex w-full items-center justify-between gap-2">
+              <span className="font-semibold truncate">{item.name}</span>
+              <span className="text-xs text-muted-foreground shrink-0">
+                {item.symbol}
+              </span>
+            </div>
+            <div className="flex items-center gap-1 text-xs text-muted-foreground">
+              {item.market}
+            </div>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}