wedding-planner-frontend/app/ui/components/dashboard-cards.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

import clsx from "clsx"
import { Icon } from "../../types";
import * as HeroIcon from '@heroicons/react/24/outline'

type Style = "green" | "blue" | "red" | "orange" | "gray"

const colorClasses = (style: Style) => {
    switch (style) {
        case "green":
            return "bg-green-700 hover:bg-green-800"
        case "blue":
            return "bg-blue-500 hover:bg-blue-700"
        case "red":
            return "bg-red-600 hover:bg-red-700"
        case "orange":
            return "bg-orange-600 hover:bg-orange-700"
        case "gray":
            return "bg-gray-600 hover:bg-gray-700"
    }
}

export function MainCard({ amount, title, subtitle, style, iconName }:
    {
        amount: string,
        title: string,
        subtitle?: string,
        style: Style,
        iconName: keyof typeof HeroIcon
    }) {

    return (
        <div className={`w-80 m-1 py-2 px-6 text-white flex flex-row items-center ${colorClasses(style)}`}>
            <Icon className="m-3 h-14 w-14" name={iconName} />
            <div className="flex flex-col justify-evenly">
                <div className="text-4xl font-medium">{amount}</div>
                <div className="text-xl">{title}</div>
                <div className="text-sm">{subtitle || 'ㅤ'}</div>
            </div>
        </div>
    );
}

export function SecondaryCard({ amount, title, iconName, style }: { amount: string, title: string, iconName: keyof typeof HeroIcon, style: Style }) {
    return (
        <div className={`h-12 w-80 m-1 p-2 text-white flex flex-row items-center ${colorClasses(style)}`}>
            <Icon className="m-3 h-7 w-7" name={iconName} />
            <span className="text-2xl font-medium mx-1">{amount}</span>
            <span className="text-l mx-1">{title}</span>
        </div>
    );
}