@siyahi/ui 0.1.9-next.2 → 0.1.9-next.21

package/agents/examples/distribution-bar-budget.tsx

@@ -0,0 +1,30 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, DistributionBar } from "@siyahi/ui";
+
+// Where a memory budget sits, on a fixed 0 to 12 GiB scale; made-up figures.
+const gib = (value: number) => `${value.toFixed(1)} GiB`;
+
+export default function DistributionBarBudgetExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>The agents group's budget</CardTitle>
+        <CardDescription>0 to 12 GiB; the lines mark its limits</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DistributionBar
+          max={12}
+          valueFormatter={gib}
+          markers={[
+            { at: 6, label: "High" },
+            { at: 8.7, label: "Max" },
+          ]}
+          segments={[
+            { name: "In RAM, under High", value: 6, color: "var(--chart-1)" },
+            { name: "In RAM, over High", value: 1.4, color: "var(--chart-2)" },
+            { name: "Pushed to zram", value: 2.6, color: "var(--chart-3)" },
+          ]}
+        />
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/distribution-bar-tug.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Delta,
+  DistributionBar,
+  type DistributionSegment,
+} from "@siyahi/ui";
+
+// Each closed position's net realized, ₹; made-up figures.
+const positions = [
+  { name: "INFY", value: 61000 },
+  { name: "TCS", value: 38000 },
+  { name: "HDFCBANK", value: 17000 },
+  { name: "ITC", value: -26000 },
+  { name: "WIPRO", value: -14000 },
+  { name: "SBIN", value: -6000 },
+];
+const won = positions.filter((p) => p.value > 0).reduce((sum, p) => sum + p.value, 0);
+const lost = positions.filter((p) => p.value < 0).reduce((sum, p) => sum + p.value, 0);
+// One scale both ways, so whichever side reaches farther is the net.
+const reach = Math.max(won, -lost);
+
+export default function DistributionBarTugExample() {
+  const [focus, setFocus] = useState<DistributionSegment | null>(null);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>The tug-of-war</CardTitle>
+        <CardDescription>Each closed position, losses left of break-even and gains right</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2">
+        <DistributionBar
+          min={-reach}
+          max={reach}
+          showLegend={false}
+          markers={[{ at: 0 }]}
+          highlighted={focus?.name ?? null}
+          onHover={setFocus}
+          segments={positions.map(({ name, value }) => ({
+            name,
+            value,
+            color: value > 0 ? "var(--positive)" : "var(--negative)",
+          }))}
+        />
+        <div className="grid grid-cols-3 text-xs text-muted-foreground tabular-nums">
+          <span>
+            losers <Delta value={lost} format="money" />
+          </span>
+          <span className="text-center">break-even</span>
+          <span className="text-right">
+            winners <Delta value={won} format="money" />
+          </span>
+        </div>
+      </CardContent>
+      <CardFooter className="min-h-12" aria-live="polite">
+        {focus ? (
+          <p className="flex items-center gap-2">
+            <span className="font-medium">{focus.name}</span>
+            <Delta value={focus.value} format="money" />
+          </p>
+        ) : (
+          <p className="text-muted-foreground">Hover a band to see its position.</p>
+        )}
+      </CardFooter>
+    </Card>
+  );
+}

package/agents/examples/dropdown-menu.tsx

@@ -0,0 +1,31 @@
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@siyahi/ui";
+import { EllipsisIcon } from "lucide-react";
+
+export default function DropdownMenuExample() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="outline" className="w-fit" />}>
+        <EllipsisIcon />
+        Actions
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Holding</DropdownMenuLabel>
+          <DropdownMenuItem>View lots</DropdownMenuItem>
+          <DropdownMenuItem>Export CSV</DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive">Hide</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/agents/examples/formatters.tsx

@@ -0,0 +1,42 @@
+import { SiyahiProvider, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, useFormat } from "@siyahi/ui";
+
+function Row({ label }: { label: string }) {
+  const { count, money, moneyCompact, pct, time } = useFormat();
+  return (
+    <TableRow>
+      <TableCell>{label}</TableCell>
+      <TableCell className="text-right">{count(153110)}</TableCell>
+      <TableCell className="text-right">{money(153110)}</TableCell>
+      <TableCell className="text-right">{moneyCompact(99999)}</TableCell>
+      <TableCell className="text-right">{moneyCompact(240000)}</TableCell>
+      <TableCell className="text-right">{moneyCompact(400000000)}</TableCell>
+      <TableCell className="text-right">{pct(0.1234)}</TableCell>
+      <TableCell className="text-right">{time("2026-10-20T09:00:00Z")}</TableCell>
+    </TableRow>
+  );
+}
+
+export default function FormattersExample() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Locale</TableHead>
+          <TableHead className="text-right">count</TableHead>
+          <TableHead className="text-right">money</TableHead>
+          <TableHead className="text-right">moneyCompact</TableHead>
+          <TableHead className="text-right">moneyCompact</TableHead>
+          <TableHead className="text-right">moneyCompact</TableHead>
+          <TableHead className="text-right">pct</TableHead>
+          <TableHead className="text-right">time</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <Row label="Default (en-IN, INR, Kolkata)" />
+        <SiyahiProvider locale={{ numberLocale: "en-US", currency: "USD", timeZone: "America/New_York" }}>
+          <Row label="en-US, USD, New York" />
+        </SiyahiProvider>
+      </TableBody>
+    </Table>
+  );
+}

package/agents/examples/heatmap-calendar.tsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import {
+  CalendarHeatmap,
+  CalendarHeatmapBlock,
+  CalendarHeatmapBody,
+  CalendarHeatmapFooter,
+  CalendarHeatmapLegend,
+  useFormat,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@siyahi/ui";
+
+// A year of trading days with a count of trades on each.
+const data = Array.from({ length: 365 }, (_, i) => {
+  const day = new Date(Date.UTC(2025, 9, 20 + i));
+  const weekday = day.getUTCDay();
+  const value = weekday === 0 || weekday === 6 ? 0 : (i * 7 + weekday * 3) % 6;
+  return { date: day.toISOString().slice(0, 10), value };
+});
+const busiest = Math.max(...data.map((day) => day.value));
+
+export default function HeatmapCalendarExample() {
+  // The page owns the pick: a second tap on the same day clears it.
+  const [picked, setPicked] = useState<(typeof data)[number] | null>(null);
+  const { count } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Trades per day</CardTitle>
+        <CardDescription>The last 12 months; counts use a single-hue fade of --chart-1</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <CalendarHeatmap data={data} labels={{ heatmapLabel: "Trades per day over the last 12 months" }}>
+          <CalendarHeatmapBody>
+            {({ activity, dayIndex, weekIndex }) => (
+              <CalendarHeatmapBlock
+                activity={activity}
+                dayIndex={dayIndex}
+                weekIndex={weekIndex}
+                selected={activity.date === picked?.date}
+                onCellClick={(cell) => setPicked(cell.date === picked?.date ? null : cell)}
+              />
+            )}
+          </CalendarHeatmapBody>
+          <CalendarHeatmapFooter className="items-center justify-between gap-x-6 gap-y-2 whitespace-normal">
+            <p aria-live="polite" className="text-sm">
+              {picked
+                ? `${picked.date}: ${count(picked.value)} trades`
+                : "Select a day for its trade count. Use arrow keys to move between days."}
+            </p>
+            <CalendarHeatmapLegend labels={{ less: "0 trades", more: `${count(busiest)} trades` }} />
+          </CalendarHeatmapFooter>
+        </CalendarHeatmap>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/heatmap-status.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  StatusHeatmap,
+  StatusHeatmapBlock,
+  StatusHeatmapBody,
+  StatusHeatmapFooter,
+  StatusHeatmapLegend,
+} from "@siyahi/ui";
+
+// One cell per day for the last 60 days, as a status the heatmap colours:
+// 3 healthy (quiet grey), 2 degraded (--warning), 1 critical (--destructive).
+const data = Array.from({ length: 60 }, (_, i) => {
+  const day = new Date(Date.UTC(2026, 7, 22 + i));
+  return { date: day.toISOString().slice(0, 10), value: i % 17 === 5 ? 1 : i % 11 === 3 ? 2 : 3 };
+});
+
+export default function HeatmapStatusExample() {
+  // The page owns the pick: a second tap on the same day clears it.
+  const [picked, setPicked] = useState<(typeof data)[number] | null>(null);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Price feed</CardTitle>
+        <CardDescription>Daily health: healthy, degraded or critical</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <StatusHeatmap data={data} statusValues={[3, 2, 1]}>
+          <StatusHeatmapBody>
+            {({ activity, dayIndex }) => (
+              <StatusHeatmapBlock
+                activity={activity}
+                dayIndex={dayIndex}
+                selected={activity.date === picked?.date}
+                onCellClick={(cell) => setPicked(cell.date === picked?.date ? null : cell)}
+              />
+            )}
+          </StatusHeatmapBody>
+          <StatusHeatmapFooter className="items-center justify-between gap-x-6 gap-y-2 whitespace-normal">
+            <p aria-live="polite" className="text-sm">
+              {picked
+                ? `${picked.date}: ${["unknown", "critical", "degraded", "healthy"][picked.value] ?? "unknown"}`
+                : "Select a day for its health. Use arrow keys to move between days."}
+            </p>
+            {/* No day lacks data, so the legend leaves out "No Data". */}
+            <StatusHeatmapLegend className="gap-3" />
+          </StatusHeatmapFooter>
+        </StatusHeatmap>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/heatmap-weekday.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import {
+  useFormat,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  WeekdayHeatmap,
+  WeekdayHeatmapBlock,
+  WeekdayHeatmapBody,
+  WeekdayHeatmapLegend,
+} from "@siyahi/ui";
+
+// Orders placed by weekday and hour of the trading session.
+const data = [1, 2, 3, 4, 5].flatMap((weekday) =>
+  [9, 10, 11, 12, 13, 14, 15].map((hour) => ({
+    weekday,
+    hour,
+    value: ((weekday * 5 + hour * 3) % 9) + (hour === 9 ? 6 : 0),
+  })),
+);
+const busiest = data.reduce((top, cell) => (cell.value > top.value ? cell : top));
+const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+const hourLabel = (hour: number) => `${String(hour).padStart(2, "0")}:00`;
+
+export default function HeatmapWeekdayExample() {
+  // The page owns the pick: a second tap on the same cell clears it.
+  const [picked, setPicked] = useState<(typeof data)[number] | null>(null);
+  const isPicked = (cell: { weekday: number; hour: number }) =>
+    cell.weekday === picked?.weekday && cell.hour === picked.hour;
+  const { count } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>When orders are placed</CardTitle>
+        <CardDescription>Weekday by hour in India Standard Time, market hours only</CardDescription>
+      </CardHeader>
+      {/* Seven hours by five days is a small grid: capped, it keeps square cells, and the legend and the answer
+          sit beside it instead of a wide empty card. */}
+      <CardContent>
+        <WeekdayHeatmap
+          data={data}
+          hours={[9, 10, 11, 12, 13, 14, 15]}
+          weekdays={[1, 2, 3, 4, 5]}
+          className="gap-4 lg:flex-row lg:items-center lg:gap-8"
+        >
+          <WeekdayHeatmapBody className="lg:w-md lg:shrink-0">
+            {({ activity }) => (
+              <WeekdayHeatmapBlock
+                activity={activity}
+                selected={isPicked(activity)}
+                onCellClick={(cell) => setPicked(isPicked(cell) ? null : cell)}
+              />
+            )}
+          </WeekdayHeatmapBody>
+          <div className="flex flex-col items-start gap-3 text-sm">
+            <WeekdayHeatmapLegend
+              className="ml-0"
+              labels={{ less: "0 orders", more: `${count(busiest.value)} orders an hour` }}
+            />
+            <p>
+              Busiest: {DAYS[busiest.weekday]} at {hourLabel(busiest.hour)}, {count(busiest.value)} orders
+            </p>
+            <p aria-live="polite" className="text-muted-foreground">
+              {picked
+                ? `${DAYS[picked.weekday]}, ${hourLabel(picked.hour)} IST: ${count(picked.value)} orders`
+                : "Select a cell for its order count. Use arrow keys to move between cells."}
+            </p>
+          </div>
+        </WeekdayHeatmap>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/input-states.tsx

@@ -0,0 +1,33 @@
+import { Input } from "@siyahi/ui";
+
+// A field is its label, the input and one line under it: a hint, or the error that replaces it.
+export default function InputStatesExample() {
+  return (
+    <div className="grid max-w-sm gap-5">
+      <div className="grid gap-1.5">
+        <label htmlFor="budget" className="text-sm font-medium">
+          Monthly budget
+        </label>
+        <Input id="budget" inputMode="numeric" defaultValue="25,000" aria-describedby="budget-hint" />
+        <p id="budget-hint" className="text-sm text-muted-foreground">
+          In rupees, before brokerage
+        </p>
+      </div>
+      <div className="grid gap-1.5">
+        <label htmlFor="folio" className="text-sm font-medium">
+          Folio number
+        </label>
+        <Input id="folio" defaultValue="12/34" aria-invalid aria-describedby="folio-error" />
+        <p id="folio-error" className="text-sm text-destructive">
+          A folio is digits only, such as 1234567
+        </p>
+      </div>
+      <div className="grid gap-1.5">
+        <label htmlFor="broker" className="text-sm font-medium text-muted-foreground">
+          Broker
+        </label>
+        <Input id="broker" defaultValue="Kite" disabled />
+      </div>
+    </div>
+  );
+}

package/agents/examples/input.tsx

@@ -0,0 +1,17 @@
+import { Input, InputGroup, InputGroupAddon, InputGroupInput, Textarea } from "@siyahi/ui";
+import { SearchIcon } from "lucide-react";
+
+export default function InputExample() {
+  return (
+    <div className="flex max-w-sm flex-col gap-3">
+      <Input placeholder="Folio number" aria-label="Folio number" />
+      <InputGroup>
+        <InputGroupAddon>
+          <SearchIcon />
+        </InputGroupAddon>
+        <InputGroupInput placeholder="Search symbols" aria-label="Search symbols" />
+      </InputGroup>
+      <Textarea placeholder="Note for this trade" aria-label="Note" />
+    </div>
+  );
+}

package/agents/examples/local-time.tsx

@@ -0,0 +1,14 @@
+import { LocalTime } from "@siyahi/ui";
+
+export default function LocalTimeExample() {
+  return (
+    <>
+      <p>
+        Prices as of <LocalTime value="2026-10-20T10:00:00Z" />. Hover the time to see it on your own clock.
+      </p>
+      <p>
+        Daily snapshot of <LocalTime value="2026-06-26T04:11:00Z" withDate />.
+      </p>
+    </>
+  );
+}

package/agents/examples/metric-strip.tsx

@@ -0,0 +1,46 @@
+import { MetricStrip, ToggleGroup, ToggleGroupItem, useFormat, type MetricStripItem } from "@siyahi/ui";
+
+export default function MetricStripExample() {
+  const { money, moneyCompact, pct, count } = useFormat();
+  // trend is each figure's month-end run, oldest first.
+  const items: MetricStripItem[] = [
+    {
+      label: "Portfolio value",
+      value: money(4512300),
+      change: 0.031,
+      note: "vs Sep",
+      trend: [3820000, 3950000, 4110000, 4020000, 4380000, 4512300],
+    },
+    {
+      label: "Invested",
+      value: moneyCompact(4025000),
+      change: 85000,
+      changeFormat: "money",
+      trend: [3600000, 3685000, 3770000, 3855000, 3940000, 4025000],
+    },
+    { label: "XIRR", value: pct(0.142), change: -0.004, trend: [0.151, 0.149, 0.152, 0.144, 0.146, 0.142] },
+    {
+      label: "Realised",
+      value: moneyCompact(-61200),
+      change: -61200,
+      changeFormat: "money",
+      trend: [14200, -3800, 9100, 2600, -18400, -61200],
+    },
+    { label: "Dividends", value: moneyCompact(38400), change: 0.18, trend: [4100, 0, 12800, 3300, 9900, 8300] },
+    { label: "Holdings", value: count(42), note: "3 bought in Oct", trend: [38, 39, 39, 40, 39, 42] },
+  ];
+  return (
+    <MetricStrip
+      title="Portfolio up 3.1% in October"
+      description="Month-end figures with the six-month run behind each"
+      action={
+        <ToggleGroup defaultValue={["1M"]} variant="outline" size="sm" aria-label="Period">
+          <ToggleGroupItem value="1M">1M</ToggleGroupItem>
+          <ToggleGroupItem value="1Y">1Y</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      items={items}
+      footer={<p className="text-muted-foreground">Valued at the last close, 31 Oct 2026</p>}
+    />
+  );
+}

package/agents/examples/overview-dashboard.tsx

@@ -0,0 +1,18 @@
+import ChartArea from "./chart-area";
+import DataTableExample from "./data-table";
+import MetricStrip from "./metric-strip";
+
+// What a page built with Siyahi looks like: a metric strip, a chart card and a data table, each the catalogue's own example.
+export default function OverviewDashboard() {
+  return (
+    <div className="flex flex-col gap-4">
+      <MetricStrip />
+      {/* Side by side only where the table's five columns fit beside the chart; at 1440 they would be cut off.
+          Each card keeps its own height: stretched to the taller one, the chart card ends in blank space. */}
+      <div className="grid items-start gap-4 2xl:grid-cols-2">
+        <ChartArea />
+        <DataTableExample />
+      </div>
+    </div>
+  );
+}

package/agents/examples/page-hero.tsx

@@ -0,0 +1,38 @@
+import { Button, PageHero } from "@siyahi/ui";
+import { ArrowRightIcon } from "lucide-react";
+
+// The catalogue's own ink drop, painted with currentColor so the hero tints it.
+function InkDrop() {
+  return (
+    <svg viewBox="0 0 16 16">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M8 .5C8 .5 2.5 6.3 2.5 10a5.5 5.5 0 0 0 11 0C13.5 6.3 8 .5 8 .5ZM4.75 10A3.25 3.25 0 0 0 8 13.25v-1.5A1.75 1.75 0 0 1 6.25 10Z"
+      />
+    </svg>
+  );
+}
+
+export default function PageHeroExample() {
+  return (
+    <PageHero
+      eyebrow="@siyahi/ui"
+      title="Siyahi"
+      lead="Ink for numbers. A design system for pages people read figures from: portfolios, ledgers, research."
+      detail="Stock shadcn/ui on Base UI and Tailwind v4, with a finance theme, charts and tables that fit a phone, Indian-aware formatters and a lint. Siyahi is Hindi for ink."
+      actions={
+        <>
+          <Button nativeButton={false} render={<a href="#/data" />}>
+            Browse the data components
+            <ArrowRightIcon />
+          </Button>
+          <Button variant="outline" nativeButton={false} render={<a href="#/overview/install" />}>
+            Install
+          </Button>
+        </>
+      }
+      mark={<InkDrop />}
+    />
+  );
+}

package/agents/examples/page-section.tsx

@@ -0,0 +1,52 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  DataList,
+  DataListItem,
+  InlineCode,
+  PageSection,
+  PageSubheading,
+} from "@siyahi/ui";
+import { ArrowDownIcon } from "lucide-react";
+
+export default function PageSectionExample() {
+  return (
+    <PageSection
+      id="toolkit"
+      eyebrow="Part 2"
+      title="The toolkit"
+      lead={
+        <p>
+          One command, <InlineCode>vp</InlineCode>, builds, tests and lints; it replaces the separate config of each.
+        </p>
+      }
+      action={
+        <Button variant="outline" size="sm">
+          <ArrowDownIcon data-icon="inline-start" />
+          Skip to the commands
+        </Button>
+      }
+    >
+      <PageSubheading>What each tool does</PageSubheading>
+      <Card>
+        <CardHeader>
+          <CardTitle>Vite+</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DataList>
+            <DataListItem label="In Java terms">Maven, the compiler plugin and Surefire in one binary.</DataListItem>
+            <DataListItem label="How it is set up">
+              One <InlineCode>vite.config.ts</InlineCode> at the root of the repo.
+            </DataListItem>
+            <DataListItem label="Remember">
+              <InlineCode>vp check</InlineCode>
+            </DataListItem>
+          </DataList>
+        </CardContent>
+      </Card>
+    </PageSection>
+  );
+}

package/agents/examples/popover.tsx

@@ -0,0 +1,23 @@
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@siyahi/ui";
+
+export default function PopoverExample() {
+  return (
+    <Popover>
+      <PopoverTrigger render={<Button variant="outline" className="w-fit" />}>How is this priced?</PopoverTrigger>
+      <PopoverContent align="start">
+        <PopoverHeader>
+          <PopoverTitle>Last close</PopoverTitle>
+          <PopoverDescription>Holdings are valued at the exchange's last closing price.</PopoverDescription>
+        </PopoverHeader>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/agents/examples/price-chart.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, PriceChart } from "@siyahi/ui";
+
+// A made-up daily close series for one year.
+const data = Array.from({ length: 250 }, (_, i) => {
+  const day = new Date(Date.UTC(2025, 9, 20 + Math.floor((i * 7) / 5)));
+  return { time: day.toISOString().slice(0, 10), value: 1500 + i * 1.2 + Math.sin(i / 9) * 60 + Math.sin(i / 3) * 18 };
+});
+
+export default function PriceChartExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>INFY</CardTitle>
+        <CardDescription>Daily close, one year</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <PriceChart data={data} height={256} />
+      </CardContent>
+      <CardFooter className="text-xs text-muted-foreground">
+        <span>
+          Chart by{" "}
+          <a
+            className="text-link underline-offset-4 hover:underline"
+            href="https://www.tradingview.com/lightweight-charts/"
+          >
+            TradingView Lightweight Charts
+          </a>
+        </span>
+      </CardFooter>
+    </Card>
+  );
+}