Heatmap Tracker

"use client"

import { HeatmapTracker } from "@/components/ui/heatmap-tracker"

const ExampleContributions = ({
  data,
}: React.ComponentProps<typeof HeatmapTracker>) => {
  return (
    <HeatmapTracker
      data={data}
      shapes={["square", "square", "square", "square", "square"]}
      classNames={{
        day: "rounded-none",
      }}
    />
  )
}

export ExampleContributions

"use client"

import { HeatmapTracker } from "@/components/ui/heatmap-tracker"

const ExampleSwimming = ({
  data,
}: React.ComponentProps<typeof HeatmapTracker>) => {
  return (
    <HeatmapTracker
      lightColors={[
        "var(--color-teal-200)",
        "var(--color-teal-400)",
        "var(--color-teal-600)",
        "var(--color-teal-800)",
        "var(--color-teal-900)",
      ]}
      darkColors={[
        "var(--color-teal-900)",
        "var(--color-teal-800)",
        "var(--color-teal-600)",
        "var(--color-teal-400)",
        "var(--color-teal-200)",
      ]}
      shapes={["diamond", "diamond", "diamond", "diamond", "diamond"]}
      data={data}
    />
  )
}

export ExampleSwimming

"use client"

import { cn } from "@/lib/utils"
import { HeatmapTracker } from "@/components/ui/heatmap-tracker"

const ExampleGym = ({ data }: React.ComponentProps<typeof HeatmapTracker>) => {
  return (
    <HeatmapTracker
      className={cn(
        "[--level-0:var(--color-rose-200)] [--level-1:var(--color-rose-400)] [--level-2:var(--color-rose-600)] [--level-3:var(--color-rose-800)] [--level-4:var(--color-rose-900)]",
        "dark:[--level-0:var(--color-rose-900)] dark:[--level-1:var(--color-rose-800)] dark:[--level-2:var(--color-rose-600)] dark:[--level-3:var(--color-rose-400)] dark:[--level-4:var(--color-rose-200)]"
      )}
      shapes={["circle", "circle", "circle", "circle", "circle"]}
      data={data}
    />
  )
}

export ExampleGym

"use client"

import { cn } from "@/lib/utils"
import { HeatmapTracker } from "@/components/ui/heatmap-tracker"

const ExampleMood = ({ data }: React.ComponentProps<typeof HeatmapTracker>) => {
  return (
    <HeatmapTracker
      lightColors={[
        "var(--color-yellow-200)",
        "var(--color-yellow-500)",
        "var(--color-lime-600)",
        "var(--color-green-800)",
        "var(--color-red-700)",
      ]}
      darkColors={[
        "var(--color-yellow-200)",
        "var(--color-yellow-500)",
        "var(--color-lime-600)",
        "var(--color-green-800)",
        "var(--color-red-700)",
      ]}
      shapes={["triangle", "x", "pentagon", "circle", "plus"]}
      classNames={{
        day: cn("rounded-none"),
      }}
      data={data}
    />
  )
}

export ExampleMood