테마 적용
This commit is contained in:
@@ -27,18 +27,18 @@ export function StockHeader({
|
||||
const colorClass = isRise
|
||||
? "text-red-500"
|
||||
: isFall
|
||||
? "text-blue-500"
|
||||
? "text-blue-600 dark:text-blue-400"
|
||||
: "text-foreground";
|
||||
|
||||
return (
|
||||
<div className="px-3 py-2 sm:px-4 sm:py-3">
|
||||
<div className="bg-white px-3 py-2 dark:bg-brand-900/22 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">
|
||||
<h1 className="truncate text-lg font-bold leading-tight text-foreground dark:text-brand-50 sm:text-xl">
|
||||
{stock.name}
|
||||
</h1>
|
||||
<span className="mt-0.5 block text-xs text-muted-foreground sm:text-sm">
|
||||
<span className="mt-0.5 block text-xs text-muted-foreground dark:text-brand-100/70 sm:text-sm">
|
||||
{stock.symbol}/{stock.market}
|
||||
</span>
|
||||
</div>
|
||||
@@ -53,16 +53,16 @@ export function StockHeader({
|
||||
|
||||
{/* ========== 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>
|
||||
<div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
|
||||
<p className="text-[11px] text-muted-foreground dark:text-brand-100/70">고가</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 className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
|
||||
<p className="text-[11px] text-muted-foreground dark:text-brand-100/70">저가</p>
|
||||
<p className="font-medium text-blue-600 dark:text-blue-400">{low || "--"}</p>
|
||||
</div>
|
||||
<div className="rounded-md bg-muted/40 px-2 py-1.5">
|
||||
<p className="text-[11px] text-muted-foreground">거래량(24H)</p>
|
||||
<div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
|
||||
<p className="text-[11px] text-muted-foreground dark:text-brand-100/70">거래량(24H)</p>
|
||||
<p className="font-medium">{volume || "--"}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -72,15 +72,15 @@ export function StockHeader({
|
||||
{/* ========== 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="text-muted-foreground text-xs dark:text-brand-100/70">고가</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>
|
||||
<span className="text-muted-foreground text-xs dark:text-brand-100/70">저가</span>
|
||||
<span className="font-medium text-blue-600 dark:text-blue-400">{low || "--"}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-muted-foreground text-xs">거래량(24H)</span>
|
||||
<span className="text-muted-foreground text-xs dark:text-brand-100/70">거래량(24H)</span>
|
||||
<span className="font-medium">{volume || "--"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user