53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
||
|
||
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>
|
||
);
|
||
} |