CardsActivityGoal() — ui Function Reference

Architecture documentation for the CardsActivityGoal() function in activity-goal.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ CardsActivityGoal() — ui Function Reference

Dependency Diagram

graph TD
  c9f83df3_6762_78c0_81b4_b0e4891aa5ac["CardsActivityGoal()"]
  432b697e_7938_3708_34fe_32ab23ce3dce["activity-goal.tsx"]
  c9f83df3_6762_78c0_81b4_b0e4891aa5ac -->|defined in| 432b697e_7938_3708_34fe_32ab23ce3dce
  style c9f83df3_6762_78c0_81b4_b0e4891aa5ac fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/cards/activity-goal.tsx lines 70–132

export function CardsActivityGoal() {
  const [goal, setGoal] = React.useState(350)

  function onClick(adjustment: number) {
    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
  }

  return (
    <Card className="h-full gap-5">
      <CardHeader>
        <CardTitle>Move Goal</CardTitle>
        <CardDescription>Set your daily activity goal.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-1 flex-col">
        <div className="flex items-center justify-center gap-4">
          <Button
            variant="outline"
            size="icon"
            className="size-7 rounded-full"
            onClick={() => onClick(-10)}
            disabled={goal <= 200}
          >
            <MinusIcon />
            <span className="sr-only">Decrease</span>
          </Button>
          <div className="text-center">
            <div className="text-4xl font-bold tracking-tighter tabular-nums">
              {goal}
            </div>
            <div className="text-muted-foreground text-xs uppercase">
              Calories/day
            </div>
          </div>
          <Button
            variant="outline"
            size="icon"
            className="size-7 rounded-full"
            onClick={() => onClick(10)}
            disabled={goal >= 400}
          >
            <PlusIcon />
            <span className="sr-only">Increase</span>
          </Button>
        </div>
        <div className="flex-1">
          <ChartContainer
            config={chartConfig}
            className="aspect-auto h-full w-full"
          >
            <BarChart data={data}>
              <Bar dataKey="goal" radius={4} fill="var(--color-goal)" />
            </BarChart>
          </ChartContainer>
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full" variant="secondary">
          Set Goal
        </Button>
      </CardFooter>
    </Card>
  )
}