90 lines
3.1 KiB
TypeScript
90 lines
3.1 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="px-3 py-2 sm:px-4 sm:py-3">
|
|
{/* ========== STOCK SUMMARY ========== */}
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<h1 className="truncate text-lg font-bold leading-tight sm:text-xl">
|
|
{stock.name}
|
|
</h1>
|
|
<span className="mt-0.5 block text-xs text-muted-foreground sm:text-sm">
|
|
{stock.symbol}/{stock.market}
|
|
</span>
|
|
</div>
|
|
|
|
<div className={cn("shrink-0 text-right", colorClass)}>
|
|
<span className="block text-2xl font-bold tracking-tight">{price}</span>
|
|
<span className="text-xs font-medium sm:text-sm">
|
|
{changeRate}% <span className="ml-1 text-[11px] sm:text-xs">{change}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ========== STATS ========== */}
|
|
<div className="mt-2 grid grid-cols-3 gap-2 text-xs md:hidden">
|
|
<div className="rounded-md bg-muted/40 px-2 py-1.5">
|
|
<p className="text-[11px] text-muted-foreground">고가</p>
|
|
<p className="font-medium text-red-500">{high || "--"}</p>
|
|
</div>
|
|
<div className="rounded-md bg-muted/40 px-2 py-1.5">
|
|
<p className="text-[11px] text-muted-foreground">저가</p>
|
|
<p className="font-medium text-blue-500">{low || "--"}</p>
|
|
</div>
|
|
<div className="rounded-md bg-muted/40 px-2 py-1.5">
|
|
<p className="text-[11px] text-muted-foreground">거래량(24H)</p>
|
|
<p className="font-medium">{volume || "--"}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator className="mt-2 md:hidden" />
|
|
|
|
{/* ========== DESKTOP STATS ========== */}
|
|
<div className="hidden items-center justify-end gap-6 pt-1 text-sm md:flex">
|
|
<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>
|
|
);
|
|
}
|