72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
|
// import { Badge } from "@/components/ui/badge";
|
||
|
|
import { Separator } from "@/components/ui/separator";
|
||
|
|
import { DashboardStockItem } from "@/features/dashboard/types/dashboard.types";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
interface StockHeaderProps {
|
||
|
|
stock: DashboardStockItem;
|
||
|
|
price: string;
|
||
|
|
change: string;
|
||
|
|
changeRate: string;
|
||
|
|
high?: string;
|
||
|
|
low?: string;
|
||
|
|
volume?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function StockHeader({
|
||
|
|
stock,
|
||
|
|
price,
|
||
|
|
change,
|
||
|
|
changeRate,
|
||
|
|
high,
|
||
|
|
low,
|
||
|
|
volume,
|
||
|
|
}: StockHeaderProps) {
|
||
|
|
const isRise = changeRate.startsWith("+") || parseFloat(changeRate) > 0;
|
||
|
|
const isFall = changeRate.startsWith("-") || parseFloat(changeRate) < 0;
|
||
|
|
const colorClass = isRise
|
||
|
|
? "text-red-500"
|
||
|
|
: isFall
|
||
|
|
? "text-blue-500"
|
||
|
|
: "text-foreground";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-between px-4 py-3">
|
||
|
|
{/* Left: Stock Info */}
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<h1 className="text-xl font-bold">{stock.name}</h1>
|
||
|
|
<span className="text-sm text-muted-foreground">
|
||
|
|
{stock.symbol}/{stock.market}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Separator orientation="vertical" className="h-6" />
|
||
|
|
|
||
|
|
<div className={cn("flex items-end gap-2", colorClass)}>
|
||
|
|
<span className="text-2xl font-bold tracking-tight">{price}</span>
|
||
|
|
<span className="text-sm font-medium mb-1">
|
||
|
|
{changeRate}% <span className="text-xs ml-1">{change}</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right: 24h Stats */}
|
||
|
|
<div className="hidden md:flex items-center gap-6 text-sm">
|
||
|
|
<div className="flex flex-col items-end">
|
||
|
|
<span className="text-muted-foreground text-xs">고가</span>
|
||
|
|
<span className="font-medium text-red-500">{high || "--"}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col items-end">
|
||
|
|
<span className="text-muted-foreground text-xs">저가</span>
|
||
|
|
<span className="font-medium text-blue-500">{low || "--"}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col items-end">
|
||
|
|
<span className="text-muted-foreground text-xs">거래량(24H)</span>
|
||
|
|
<span className="font-medium">{volume || "--"}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|