Demographics

import { Demographics } from "@fanvue/ui";
import type { DemographicsProps } from "@fanvue/ui";

import { Demographics } from "@fanvue/ui";
import { CountryFlag } from "@fanvue/ui/flags";

<div className="w-full max-w-sm">
  <Demographics
    label="United States"
    value={52.6}
    formattedValue="52.6%"
    icon={<CountryFlag country="US" />}
  />
</div>

import { Demographics } from "@fanvue/ui";

<div className="flex w-full max-w-sm flex-col gap-4">
  <Demographics label="Direct" value={64} formattedValue="64%" />
  <Demographics label="Referral" value={36} formattedValue="36%" />
</div>

import { Demographics } from "@fanvue/ui";
import { CountryFlag } from "@fanvue/ui/flags";

const COUNTRIES = [
  { country: "US", label: "United States", value: 52.6 },
  { country: "GB", label: "United Kingdom", value: 29.2 },
  { country: "NL", label: "Netherlands", value: 7.6 },
  { country: "IT", label: "Italy", value: 7.3 },
  { country: "ES", label: "Spain", value: 6.9 },
];

<div className="flex w-full max-w-sm flex-col gap-4">
  {COUNTRIES.map((country) => (
    <Demographics
      key={country.label}
      label={country.label}
      value={country.value}
      formattedValue={`${country.value}%`}
      icon={<CountryFlag country={country.country} />}
    />
  ))}
</div>