"use client";

import React from "react";
import {Card, Chip, cn} from "@nextui-org/react";
import {Icon} from "@iconify/react";

type TrendCardProps = {
  title: string;
  value: string;
  change: string;
  changeType: "positive" | "neutral" | "negative";
  trendType: "up" | "neutral" | "down";
  trendChipPosition?: "top" | "bottom";
  trendChipVariant?: "flat" | "light";
};

const data: TrendCardProps[] = [  {
    title: "Total Revenue",
    value: "$228,451",
    change: "33%",
    changeType: "positive",
    trendType: "up",
  },
  {
    title: "Total Expenses",
    value: "$71,887",
    change: "13.0%",
    changeType: "negative",
    trendType: "up",
  },
  {
    title: "Total Profit",
    value: "$156,540",
    change: "0.0%",
    changeType: "neutral",
    trendType: "neutral",
  },
  {
    title: "New Customers",
    value: "1,234",
    change: "1.0%",
    changeType: "positive",
    trendType: "up",
  },
];
  {
    title: "Total Revenue",
    value: "$228,451",
    change: "33%",
    changeType: "positive",
    trendType: "up",
  },
  {
    title: "Total Expenses",
    value: "$71,887",
    change: "13.0%",
    changeType: "negative",
    trendType: "up",
  },
  {
    title: "Total Profit",
    value: "$156,540",
    change: "0.0%",
    changeType: "neutral",
    trendType: "neutral",
  },
  {
    title: "New Customers",
    value: "1,234",
    change: "1.0%",
    changeType: "positive",
    trendType: "up",
  },
];

const data2: TrendCardProps[] = [  {
    title: "Monthly Sales",
    value: "$345,892",
    change: "12.5%",
    changeType: "positive",
    trendType: "up",
    trendChipVariant: "flat",
    trendChipPosition: "bottom",
  },
  {
    title: "Operating Costs",
    value: "$98,234",
    change: "18.3%",
    changeType: "negative",
    trendType: "up",
    trendChipVariant: "flat",
    trendChipPosition: "bottom",
  },
  {
    title: "Net Income",
    value: "$247,658",
    change: "15.2%",
    changeType: "neutral",
    trendType: "neutral",
    trendChipVariant: "flat",
    trendChipPosition: "bottom",
  },
  {
    title: "Active Users",
    value: "2,847",
    change: "4.7%",
    changeType: "positive",
    trendType: "up",
    trendChipVariant: "flat",
    trendChipPosition: "bottom",
  },
];
  {
    title: "Monthly Sales",
    value: "$345,892",
    change: "12.5%",
    changeType: "positive",
    trendType: "up",
    trendChipVariant: "flat",
    trendChipPosition: "bottom",
  },
  {
    title: "Operating Costs",
    value: "$98,234",
    change: "18.3%",
    changeType: "negative",
    trendType: "up",
    trendChipVariant: "flat",
    trendChipPosition: "bottom",
  },
  {
    title: "Net Income",
    value: "$247,658",
    change: "15.2%",
    changeType: "neutral",
    trendType: "neutral",
    trendChipVariant: "flat",
    trendChipPosition: "bottom",
  },
  {
    title: "Active Users",
    value: "2,847",
    change: "4.7%",
    changeType: "positive",
    trendType: "up",
    trendChipVariant: "flat",
    trendChipPosition: "bottom",
  },
];

const TrendCard = ({
  title,
  value,
  change,
  changeType,
  trendType,
  trendChipPosition = "top",
  trendChipVariant = "light",
}: TrendCardProps) => {
  return (
    <Card className=" border border-transparent dark:border-default-100">
      <div className="flex p-4">
        <div className="flex flex-col gap-y-2">
          <dt className="text-small font-medium text-default-500">{title}</dt>
          <dd className="text-2xl font-semibold text-default-700">{value}</dd>
        </div>
        <Chip
          className={cn("absolute right-4", {
            "top-4": trendChipPosition === "top",
            "bottom-4": trendChipPosition === "bottom",
          })}
          classNames={{
            content: "font-medium text-[0.65rem]",
          }}
          color={
            changeType === "positive" ? "success" : changeType === "neutral" ? "warning" : "danger"
          }
          radius="sm"
          size="sm"
          startContent={
            trendType === "up" ? (
              <Icon height={12} icon={"solar:arrow-right-up-linear"} width={12} />
            ) : trendType === "neutral" ? (
              <Icon height={12} icon={"solar:arrow-right-linear"} width={12} />
            ) : (
              <Icon height={12} icon={"solar:arrow-right-down-linear"} width={12} />
            )
          }
          variant={trendChipVariant}
        >
          {change}
        </Chip>
      </div>
    </Card>
  );
};

export default function Component() {
  return (
    <dl className="grid w-full grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
      {data.map((props, index) => (
        <TrendCard key={index} {...props} />
      ))}
      {data2.map((props, index) => (
        <TrendCard key={index} {...props} />
      ))}
    </dl>
  );
}

"use client";

import React from "react";
import {Button, Card, Chip, cn} from "@nextui-org/react";
import {Icon} from "@iconify/react";

const data = [  {
    title: "Total Users",
    value: "5,400",
    change: "33%",
    changeType: "positive",
    trendChipPosition: "top",
    iconName: "solar:users-group-rounded-linear",
  },
  {
    title: "Total Sales",
    value: "$15,400",
    change: "0.0%",
    changeType: "neutral",
    trendChipPosition: "top",
    iconName: "solar:wallet-money-outline",
  },
  {
    title: "Net Profit",
    value: "$10,400",
    change: "3.3%",
    changeType: "negative",
    trendChipPosition: "top",
    iconName: "solar:hand-money-linear",
  },
];
  {
    title: "Total Users",
    value: "5,400",
    change: "33%",
    changeType: "positive",
    trendChipPosition: "top",
    iconName: "solar:users-group-rounded-linear",
  },
  {
    title: "Total Sales",
    value: "$15,400",
    change: "0.0%",
    changeType: "neutral",
    trendChipPosition: "top",
    iconName: "solar:wallet-money-outline",
  },
  {
    title: "Net Profit",
    value: "$10,400",
    change: "3.3%",
    changeType: "negative",
    trendChipPosition: "top",
    iconName: "solar:hand-money-linear",
  },
];

export default function Component() {
  return (
    <dl className="grid w-full grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3">
      {data.map(({title, value, change, changeType, iconName, trendChipPosition}, index) => (
        <Card key={index} className="border border-transparent dark:border-default-100">
          <div className="flex p-4">
            <div
              className={cn("mt-1 flex h-8 w-8 items-center justify-center rounded-md", {
                "bg-success-50": changeType === "positive",
                "bg-warning-50": changeType === "neutral",
                "bg-danger-50": changeType === "negative",
              })}
            >
              {changeType === "positive" ? (
                <Icon className="text-success" icon={iconName} width={20} />
              ) : changeType === "neutral" ? (
                <Icon className="text-warning" icon={iconName} width={20} />
              ) : (
                <Icon className="text-danger" icon={iconName} width={20} />
              )}
            </div>

            <div className="flex flex-col gap-y-2">
              <dt className="mx-4 text-small font-medium text-default-500">{title}</dt>
              <dd className="px-4 text-2xl font-semibold text-default-700">{value}</dd>
            </div>

            <Chip
              className={cn("absolute right-4", {
                "top-4": trendChipPosition === "top",
                "bottom-4": trendChipPosition === "bottom",
              })}
              classNames={{
                content: "font-semibold text-[0.65rem]",
              }}
              color={
                changeType === "positive"
                  ? "success"
                  : changeType === "neutral"
                    ? "warning"
                    : "danger"
              }
              radius="sm"
              size="sm"
              startContent={
                changeType === "positive" ? (
                  <Icon height={12} icon={"solar:arrow-right-up-linear"} width={12} />
                ) : changeType === "neutral" ? (
                  <Icon height={12} icon={"solar:arrow-right-linear"} width={12} />
                ) : (
                  <Icon height={12} icon={"solar:arrow-right-down-linear"} width={12} />
                )
              }
              variant="flat"
            >
              {change}
            </Chip>
          </div>

          <div className="bg-default-100">
            <Button
              fullWidth
              className="flex justify-start text-xs text-default-500 data-[pressed]:scale-100"
              radius="none"
              variant="light"
            >
              View All
            </Button>
          </div>
        </Card>
      ))}
    </dl>
  );
}

"use client";

import React from "react";
import {
  Button,
  Card,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownTrigger,
  Progress,
  cn,
} from "@nextui-org/react";
import {Icon} from "@iconify/react";

const data = [  {
    title: "Server Load",
    value: 38,
    status: "good",
    iconName: "solar:server-square-linear",
  },
  {
    title: "Server Load",
    value: 98,
    status: "danger",
    iconName: "solar:server-square-linear",
  },
  {
    title: "Average Memory Used",
    value: 64,
    status: "warn",
    iconName: "solar:sd-card-linear",
  },
];
  {
    title: "Server Load",
    value: 38,
    status: "good",
    iconName: "solar:server-square-linear",
  },
  {
    title: "Server Load",
    value: 98,
    status: "danger",
    iconName: "solar:server-square-linear",
  },
  {
    title: "Average Memory Used",
    value: 64,
    status: "warn",
    iconName: "solar:sd-card-linear",
  },
];

export default function Component() {
  return (
    <dl className="grid w-full grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3">
      {data.map(({title, value, status, iconName}, index) => (
        <Card
          key={index}
          className="flex flex-col border border-transparent p-4 dark:border-default-100"
        >
          <div
            className={cn("flex h-8 w-8 items-center justify-center rounded-md border p-0.5", {
              "border-success-200 bg-success-50 dark:border-success-100": status === "good",
              "border-warning-200 bg-warning-50 dark:border-warning-100": status === "warn",
              "border-danger-200 bg-danger-50 dark:border-danger-100": status === "danger",
            })}
          >
            {status === "good" ? (
              <Icon className="text-success-500" icon={iconName} width={20} />
            ) : status === "warn" ? (
              <Icon className="text-warning-500" icon={iconName} width={20} />
            ) : (
              <Icon className="text-danger-500" icon={iconName} width={20} />
            )}
          </div>

          <div className="pt-1">
            <dt className="my-2 text-sm font-medium text-default-500">{title}</dt>
            <dd className="text-2xl font-semibold text-default-700">{value}%</dd>
          </div>
          <Progress
            aria-label="status"
            className="mt-2"
            color={status === "good" ? "success" : status === "warn" ? "warning" : "danger"}
            value={value}
          />
          <Dropdown
            classNames={{
              content: "min-w-[120px]",
            }}
            placement="bottom-end"
          >
            <DropdownTrigger>
              <Button
                isIconOnly
                className="absolute right-2 top-2 w-auto rounded-full"
                size="sm"
                variant="light"
              >
                <Icon height={16} icon="solar:menu-dots-bold" width={16} />
              </Button>
            </DropdownTrigger>
            <DropdownMenu
              itemClasses={{
                title: "text-tiny",
              }}
              variant="flat"
            >
              <DropdownItem key="view-details">View Details</DropdownItem>
              <DropdownItem key="export-data">Export Data</DropdownItem>
              <DropdownItem key="set-alert">Set Alert</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </Card>
      ))}
    </dl>
  );
}