banatie-service/apps/landing/src/app/(landings)/blog/_components/BlogPricing.tsx

40 lines
1.1 KiB
TypeScript

interface BlogPricingProps {
free?: string;
paid?: string;
perImage?: string;
sdk?: string;
}
export const BlogPricing = ({ free, paid, perImage, sdk }: BlogPricingProps) => {
return (
<div className="my-6 rounded-lg border-l-4 border-emerald-500 bg-gray-50 px-5 py-4">
<div className="flex flex-wrap gap-x-8 gap-y-2 text-sm">
{free && (
<div>
<span className="text-gray-500">Free: </span>
<span className="font-semibold text-gray-900">{free}</span>
</div>
)}
{paid && (
<div>
<span className="text-gray-500">Paid: </span>
<span className="font-semibold text-gray-900">{paid}</span>
</div>
)}
{perImage && (
<div>
<span className="text-gray-500">Per image: </span>
<span className="font-bold text-emerald-600 text-base">{perImage}</span>
</div>
)}
{sdk && (
<div>
<span className="text-gray-500">SDK: </span>
<span className="font-medium text-gray-700">{sdk}</span>
</div>
)}
</div>
</div>
);
};