Metric Card

import { MetricCard, MetricTrend, UsageBar } from 'ferry-ui'

export default function MetricCardHero() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <MetricCard label="Revenue" value="$48,200" trend={<MetricTrend>+12.5%</MetricTrend>} hint="Last 30 days" />
      <MetricCard
        label="Active users"
        value="3,912"
        trend={<MetricTrend direction="down">-2.1%</MetricTrend>}
        hint="Last 7 days"
      />
      <MetricCard label="Orders" value="1,284" hint="Last 30 days" />
      <MetricCard label="Storage" value="46 GB" unit="of 50 GB">
        <UsageBar value={92} label="Storage used" />
      </MetricCard>
    </div>
  )
}

import { MetricCard, MetricTrend } from 'ferry-ui'

export default function MetricCardTrend() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      <MetricCard label="Revenue" value="$48,200" trend={<MetricTrend direction="up">+12.5%</MetricTrend>} />
      <MetricCard label="Open tickets" value="14" trend={<MetricTrend direction="flat">0.0%</MetricTrend>} />
      <MetricCard
        label="Churn rate"
        value="3.1%"
        trend={
          <MetricTrend direction="up" sentiment="negative">
            +0.4 pts
          </MetricTrend>
        }
      />
    </div>
  )
}

import { MetricCard, UsageBar } from 'ferry-ui'

const QUOTAS = [
  { label: 'API calls', value: '320k', unit: 'of 1M', percent: 32 },
  { label: 'Seats', value: '8', unit: 'of 10', percent: 80 },
  { label: 'Storage', value: '47 GB', unit: 'of 50 GB', percent: 94 },
]

export default function MetricCardUsage() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      {QUOTAS.map((quota) => (
        <MetricCard key={quota.label} label={quota.label} value={quota.value} unit={quota.unit}>
          <UsageBar value={quota.percent} label={`${quota.label} used`} />
        </MetricCard>
      ))}
    </div>
  )
}

import { MetricCard } from 'ferry-ui'

export default function MetricCardInfo() {
  return (
    <MetricCard
      className="w-full max-w-xs"
      label="Error rate"
      value="0.42%"
      hint="Last 24 hours"
      info="The share of API requests that failed."
      infoLabel="About the error rate"
    />
  )
}

import { LegendDot, MetricCard } from 'ferry-ui'

// Requests for each hour, in thousands.
const REQUESTS = [42, 38, 31, 26, 22, 24, 35, 58, 74, 88, 92, 86, 95, 99, 93, 80, 64, 49]

export default function MetricCardLegend() {
  const peak = Math.max(...REQUESTS)

  return (
    <MetricCard
      className="w-full max-w-sm"
      label="API requests"
      value="1.1M"
      hint="Last 18 hours"
      aside={<LegendDot tone="brand">Requests</LegendDot>}
    >
      <div
        role="img"
        aria-label={`Requests for each hour. The peak is ${peak}k.`}
        className="flex h-12 items-end gap-1"
      >
        {REQUESTS.map((count, index) => (
          <span key={index} className="flex-1 rounded-sm bg-brand" style={{ height: `${(count / peak) * 100}%` }} />
        ))}
      </div>
    </MetricCard>
  )
}

import * as React from 'react'
import { Label, MetricCard, MetricTrend, Switch, UsageBar } from 'ferry-ui'

export default function MetricCardLoading() {
  // In an app, `loading` comes from the request that loads the numbers.
  const [loading, setLoading] = React.useState(true)

  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Switch id="metrics-loading" checked={loading} onCheckedChange={setLoading} />
        <Label htmlFor="metrics-loading">Loading</Label>
      </div>
      <div className="grid gap-4 sm:grid-cols-2">
        <MetricCard
          label="Revenue"
          value="$48,200"
          trend={<MetricTrend>+12.5%</MetricTrend>}
          hint="Last 30 days"
          loading={loading}
        />
        <MetricCard label="Storage" value="46 GB" unit="of 50 GB" loading={loading}>
          <UsageBar value={loading ? null : 92} label="Storage used" />
        </MetricCard>
      </div>
    </div>
  )
}

import { MetricCard } from 'ferry-ui'

export default function MetricCardCompact() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      <MetricCard compact label="Open tickets" value="14" />
      <MetricCard compact label="First reply" value="1h 12m" />
      <MetricCard compact label="Satisfaction" value="96%" />
    </div>
  )
}