"use client";

import { ArrowUpRight, CircleDollarSign } from "lucide-react";
import { useState } from "react";
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { Card } from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

type TimePeriod = "1D" | "1W" | "1M" | "1Y" | "MAX";

export function StockMarket1() {
  const [timePeriod, setTimePeriod] = useState<TimePeriod>("1W");

  const handleTimePeriodChange = (period: TimePeriod) => {
    setTimePeriod(period);
  };

  return (
    <Card className="flex w-full max-w-sm min-w-72 flex-col gap-4 overflow-hidden p-4">
      {/* Header */}
      <div className="flex items-center gap-1.5">
        <CircleDollarSign className="size-6 text-muted-foreground" />
        <h3 className="text-sm font-medium text-foreground">Stock Market</h3>
      </div>

      {/* Time Period Selector */}
      <ButtonGroup className="w-full [&>button]:flex-1">
        <Button
          variant="outline"
          size="sm"
          className={cn(timePeriod === "1D" && "opacity-60")}
          onClick={() => handleTimePeriodChange("1D")}
        >
          1D
        </Button>
        <Button
          variant="outline"
          size="sm"
          className={cn(timePeriod === "1W" && "opacity-60")}
          onClick={() => handleTimePeriodChange("1W")}
        >
          1W
        </Button>
        <Button
          variant="outline"
          size="sm"
          className={cn(timePeriod === "1M" && "opacity-60")}
          onClick={() => handleTimePeriodChange("1M")}
        >
          1M
        </Button>
        <Button
          variant="outline"
          size="sm"
          className={cn(timePeriod === "1Y" && "opacity-60")}
          onClick={() => handleTimePeriodChange("1Y")}
        >
          1Y
        </Button>
        <Button
          variant="outline"
          size="sm"
          className={cn(timePeriod === "MAX" && "opacity-60")}
          onClick={() => handleTimePeriodChange("MAX")}
        >
          Max
        </Button>
      </ButtonGroup>

      {/* Stock Market Value */}
      <div className="flex flex-col gap-1.5">
        <div className="flex items-center justify-between gap-2">
          <span className="text-2xl font-medium tracking-tight text-foreground tabular-nums">
            $120,748.00
          </span>
          <Badge
            className={cn(
              "border-success/25 bg-success-foreground text-success tabular-nums"
            )}
          >
            +1.25%
            <ArrowUpRight />
          </Badge>
        </div>

        <span className="text-xs font-medium text-muted-foreground">
          Shadcn Inc. (SDCN)
        </span>
      </div>

      {/* Chart */}
      <StockMarketChart />

      <Separator />

      {/* Stock Market Items */}
      <div className="grid grid-cols-[1fr_auto_1fr] gap-2.5">
        <div className="flex flex-1 flex-col items-center gap-1">
          <span className="text-xs font-normal text-muted-foreground">Market Cap</span>
          <span className="text-sm font-medium tabular-nums">$119K</span>
        </div>

        <Separator orientation="vertical" />

        <div className="flex flex-1 flex-col items-center gap-1">
          <span className="text-xs font-normal text-muted-foreground">Volume</span>
          <span className="text-sm font-medium tabular-nums">$122K</span>
        </div>
      </div>
    </Card>
  );
}

const chartData = [
  { month: "January", stock: 186000 },
  { month: "February", stock: 301000 },
  { month: "March", stock: 237000 },
  { month: "April", stock: 73000 },
  { month: "May", stock: 209000 },
  { month: "June", stock: 214000 },
];

const chartConfig = {
  stock: {
    label: "Stock",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig;

function StockMarketChart() {
  return (
    <ChartContainer config={chartConfig} className="my-1 h-50 max-w-full overflow-hidden">
      <AreaChart
        accessibilityLayer
        data={chartData}
        margin={{
          left: 12,
          right: 12,
        }}
      >
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="month"
          tickLine={false}
          axisLine={false}
          tickMargin={8}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <ChartTooltip
          cursor={false}
          content={<ChartTooltipContent indicator="dot" hideLabel />}
        />
        <Area
          dataKey="stock"
          type="linear"
          fill="var(--color-stock)"
          fillOpacity={0.4}
          stroke="var(--color-stock)"
        />
      </AreaChart>
    </ChartContainer>
  );
}
Stock Market 1

More Components

Placeholder title

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

Join 3,000+ builders shipping with shadcncraft

Real support from the team behind shadcncraft
