ppc_amnet/amnet-web/src/components/am-card.tsx

import React from "react";
import {ChevronRight, LucideIcon} from "lucide-react";

import {Card} from "@/components/ui/card.tsx";
import {Button} from "@/components/ui/button.tsx";

export interface AMCardActionProps {
    actionIcon?: Readonly<React.ReactNode>,
    actionClicked?: () => void,
    actionDisabled?: boolean,
}

export function AMCard(props: AMCardActionProps & { title: string, titlePerformsAction?: boolean, children: Readonly<React.ReactNode> }) {
    return (
        <Card>
            <div className={`${props.actionClicked ? 'grid grid-cols-[1fr_40px] items-center gap-1' : ''} p-4 pr-2 sm:p-6`}>
                <div className="max-w-full overflow-hidden space-y-3">
                    <h4 className="text-2xl font-semibold select-none text-ellipsis whitespace-nowrap overflow-hidden"
                        onClick={() => props.titlePerformsAction && props.actionClicked ? props.actionClicked() : null}>
                        {props.title}
                    </h4>
                    <div className="text-sm lg:text-md flex flex-auto flex-wrap gap-4">
                        {props.children}
                    </div>
                </div>
                {props.actionClicked && (
                    <Button className="flex-shrink-0" variant="ghost" size="icon" disabled={props.actionDisabled} onClick={props.actionClicked}>
                        {props.actionIcon ?? <ChevronRight className="h-4 w-4"/>}
                    </Button>
                )}
            </div>
        </Card>
    )
}

export function AMCardDetail(props: { icon: LucideIcon, iconClicked?: () => void | Promise<any>, children?: Readonly<React.ReactNode> }) {
    return (
        <div className="inline-flex items-center max-w-full gap-2 text-gray-500 select-none md:select-text">
            {React.createElement(props.icon, {className: "h-5 w-5", onClick: props.iconClicked})}
            {props.children}
        </div>
    )
}