"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

interface DashboardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string
  subtitle?: string
  dateRange?: React.ReactNode
  actions?: React.ReactNode
}

function CalendarIcon() {
  return (
    <svg viewBox="0 0 20 20" className="h-4 w-4" aria-hidden>
      <rect
        x="3"
        y="4"
        width="14"
        height="13"
        rx="2"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
      />
      <path
        d="M3 8h14M7 2v4M13 2v4"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  )
}

function ChevronDownIcon() {
  return (
    <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" aria-hidden>
      <path
        d="M4 6l4 4 4-4"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

const DashboardHeader = React.forwardRef<HTMLDivElement, DashboardHeaderProps>(
  ({ title, subtitle, dateRange, actions, className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "flex flex-col gap-4 border-b border-border bg-background pb-6 md:flex-row md:items-center md:justify-between",
          className
        )}
        {...props}
      >
        <div className="space-y-1">
          <h1 className="text-2xl font-bold text-foreground md:text-3xl">
            {title}
          </h1>
          {subtitle ? (
            <p className="text-sm text-muted-foreground">{subtitle}</p>
          ) : null}
        </div>
        <div className="flex flex-wrap items-center gap-3">
          {dateRange ? (
            dateRange
          ) : (
            <button
              type="button"
              className="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted"
            >
              <CalendarIcon />
              <span>Last 30 days</span>
              <ChevronDownIcon />
            </button>
          )}
          {actions ? (
            <div className="flex items-center gap-2">{actions}</div>
          ) : null}
        </div>
      </div>
    )
  }
)

DashboardHeader.displayName = "DashboardHeader"

export { DashboardHeader }
export type { DashboardHeaderProps }
Dashboard Header

Analytics Overview

Dependencies

Files

Installation
