feat: show verification status in site settings page

This commit is contained in:
Usman Baig
2026-03-13 16:40:37 +01:00
parent 8f06c9168a
commit e336d2c7e5
3 changed files with 34 additions and 15 deletions

View File

@@ -709,19 +709,35 @@ export default function SiteSettingsPage() {
className="mb-4"
/>
<div className="flex items-center gap-4 mt-4">
<button
type="button"
onClick={() => setShowVerificationModal(true)}
className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
>
<ZapIcon className="w-4 h-4" />
Verify Installation
</button>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
Check if your site is sending data correctly.
</p>
</div>
{site.is_verified ? (
<div className="flex items-center justify-between mt-4 px-4 py-3 rounded-xl bg-green-50 dark:bg-green-900/10 border border-green-200 dark:border-green-900/30">
<div className="flex items-center gap-2 text-sm font-medium text-green-700 dark:text-green-400">
<CheckIcon className="w-4 h-4" />
Script verified your site is sending data correctly.
</div>
<button
type="button"
onClick={() => setShowVerificationModal(true)}
className="text-xs text-green-600 dark:text-green-500 hover:underline"
>
Re-verify
</button>
</div>
) : (
<div className="flex items-center gap-4 mt-4">
<button
type="button"
onClick={() => setShowVerificationModal(true)}
className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
>
<ZapIcon className="w-4 h-4" />
Verify Installation
</button>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
Check if your site is sending data correctly.
</p>
</div>
)}
</div>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
@@ -1614,6 +1630,7 @@ export default function SiteSettingsPage() {
isOpen={showVerificationModal}
onClose={() => setShowVerificationModal(false)}
site={site}
onVerified={() => mutateSite()}
/>
</div>
)