ppc_amnet/aimenet-web/components/aime-card.tsx

import {CreditCard, History} from "lucide-react";
import {Card} from "@/components/ui/card";
import React from "react";
import {AimeCard} from "@/lib/database";
import TimeAgo from "react-timeago";

export function AimeCardEntry(props: { card: AimeCard, children?: Readonly<React.ReactNode> }) {
    return (
        <Card>
            <div className="flex p-4 items-center gap-3">
                <div className="flex-grow flex flex-col gap-4">
                    <h4 className="text-2xl font-semibold">{props.card.name}</h4>
                    <div className="text-md flex gap-3 flex-wrap">
                        {props.card.lastUsed > 0 && (
                            <div className="flex items-center gap-2 text-gray-500">
                                <History className="h-5 w-5"/>
                                <TimeAgo date={props.card.lastUsed}/>
                            </div>
                        )}
                        <div className="flex items-center gap-2 text-gray-500">
                            <CreditCard className="h-5 w-5"/>
                            <code>{props.card.id.match(/.{1,4}/g)?.join(" ")}</code>
                        </div>
                    </div>
                </div>
                {props.children}
            </div>
        </Card>  
    );
}