36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { SitesmithSummary } from '../../types/sitesmith';
|
|
|
|
interface Props { summary: SitesmithSummary | null; }
|
|
|
|
export const UpgradeBanner: React.FC<Props> = ({ summary }) => {
|
|
if (!summary) return null;
|
|
if (summary.status === 'OK_BONUS' || summary.status === 'OK_MONTHLY') return null;
|
|
const isLocked = summary.status === 'DISABLED';
|
|
const isCapped = summary.status === 'CAP_REACHED';
|
|
return (
|
|
<div role="status" style={{
|
|
background: isLocked ? '#3b1d4d' : '#3b2d1d',
|
|
border: `1px solid ${isLocked ? '#7c3aed' : '#b45309'}`,
|
|
color: '#fbcfe8', padding: '14px 18px', borderRadius: 8, marginBottom: 14,
|
|
}}>
|
|
{isLocked && (<>
|
|
<div style={{ fontWeight: 600, marginBottom: 6 }}>Sitesmith is a paid addon</div>
|
|
<div style={{ fontSize: 13, marginBottom: 10 }}>
|
|
Describe the site you want and our AI builds it. You can edit everything afterward.
|
|
</div>
|
|
<a href="https://anhonesthost.com/clientarea.php?action=services" target="_blank" rel="noopener noreferrer"
|
|
style={{ color: '#fff', background: '#7c3aed', padding: '8px 14px', borderRadius: 6, textDecoration: 'none' }}>
|
|
Upgrade your plan →
|
|
</a>
|
|
</>)}
|
|
{isCapped && (<>
|
|
<div style={{ fontWeight: 600, marginBottom: 6 }}>Monthly cap reached</div>
|
|
<div style={{ fontSize: 13 }}>
|
|
You've used {summary.monthly_used} of {summary.monthly_cap} Sitesmith builds this month. Resets on {summary.resets_on}.
|
|
</div>
|
|
</>)}
|
|
</div>
|
|
);
|
|
};
|