KPI Card

"use client";

import React from "react";
import {KPICard} from "@brynlabs/fusion-ui";

export const KpiCardExample = () => {
  const numberData = {
    type: "number" as const,
    name: "Umsatz",
    value: 150000,
    flipTrend: true,
    previousValue: 120000,
    previousValueType: "percent" as const,
  };

  const numberData2 = {
    type: "number" as const,
    name: "Umsatz",
    value: 150000,
    flipTrend: false,
    previousValue: 120000,
    previousValueType: "percent" as const,
  };

  const durationData = {
    type: "duration" as const,
    name: "Durchschnittliche Bearbeitungszeit",
    durationInSeconds: 3600,
    previousDurationInSeconds: 4200,
    previousValueType: "duration" as const,
  };

  const stringData = {
    type: "string" as const,
    name: "Status",
    value: "Aktiv",
    previousValue: "Inaktiv",
    trend: "up" as const,
  };
  return (
    <div style={{display: "flex", flexDirection: "row", gap: "1rem"}}>
      <KPICard data={numberData} elevated />
      <KPICard data={numberData2} elevated />
      <KPICard data={durationData} elevated />
      <KPICard data={stringData} />
    </div>
  );
};