Watchlist
Liste de symboles suivis avec prix, variation et resume des hausses et baisses. Installez Watchlist depuis le registre VLLNT UI avec la CLI shadcn.
Liste de symboles suivis avec prix, variation et resume des hausses et baisses. Fait partie de la famille data dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Watchlist a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/watchlist.jsonSource
import * as React from "react";
import { ArrowDownRight, ArrowUpRight, Star } from "lucide-react";
import { formatChange } from "../../lib/format";
import type { HeadingTag } from "../../lib/types";
import { cn } from "../../lib/utils";
export type WatchlistItem = {
change: number;
name?: string;
price: number | string;
starred?: boolean;
symbol: string;
volume?: string;
};
export type WatchlistProps = {
/** Heading tag for the title. Defaults to `h2`. */
as?: HeadingTag;
eyebrow?: string;
items: WatchlistItem[];
title?: string;
} & React.HTMLAttributes<HTMLDivElement>;
function formatPrice(price: number | string): string {
return typeof price === "number"
? price.toLocaleString(undefined, {
maximumFractionDigits: 2,
minimumFractionDigits: 2,
})
: price;
}
function WatchlistRow({ item }: { item: WatchlistItem }): React.JSX.Element {
const isPositive = item.change >= 0;
const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
return (
<li className="grid grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-3 rounded-xl px-3 py-2.5 transition-colors hover:bg-muted/40">
<span
aria-hidden="true"
className={cn(
"flex size-7 items-center justify-center rounded-full border",
item.starred
? "border-amber-400/40 bg-amber-400/10 text-amber-500"
: "border-border bg-background text-muted-foreground",
)}
>
<Star
className={cn("size-3.5", item.starred && "fill-current")}
strokeWidth={1.75}
/>
</span>
<div className="min-w-0">
<p className="truncate text-sm font-semibold text-foreground">
{item.symbol}
</p>
{item.name ? (
<p className="truncate text-xs text-muted-foreground">{item.name}</p>
) : null}
</div>
<div className="text-right">
<p className="text-sm font-semibold tabular-nums text-foreground">
{formatPrice(item.price)}
</p>
{item.volume ? (
<p className="text-[11px] text-muted-foreground tabular-nums">
{item.volume}
</p>
) : null}
</div>
<span
className={cn(
"inline-flex items-center gap-1 rounded-full border px-2 py-1 text-xs font-medium tabular-nums",
isPositive
? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400",
)}
>
<TrendIcon className="size-3" />
{formatChange(item.change)}
</span>
</li>
);
}
export const Watchlist = ({
as: Heading = "h2",
className,
eyebrow = "Tracked symbols",
items,
ref: reference,
title = "Watchlist",
...props
}: WatchlistProps & { ref?: React.Ref<HTMLDivElement> }) => {
if (items.length === 0) {
return null;
}
const advancing = items.filter((item) => item.change >= 0).length;
const declining = items.length - advancing;
return (
<section
aria-label={title}
className={cn(
"rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
className,
)}
ref={reference}
{...props}
>
<header className="mb-3 flex flex-wrap items-start justify-between gap-3">
<div>
<p className="text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground">
{eyebrow}
</p>
<Heading className="text-lg font-semibold text-foreground">
{title}
</Heading>
</div>
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<span className="inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-1 text-emerald-600 dark:text-emerald-400">
<ArrowUpRight className="size-3" />
{advancing} up
</span>
<span className="inline-flex items-center gap-1 rounded-full border border-rose-500/30 bg-rose-500/10 px-2 py-1 text-rose-600 dark:text-rose-400">
<ArrowDownRight className="size-3" />
{declining} down
</span>
</div>
</header>
<ul className="divide-y divide-border/60">
{items.map((item) => (
<WatchlistRow item={item} key={item.symbol} />
))}
</ul>
</section>
);
};
Watchlist.displayName = "Watchlist";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.