76 lines
3.3 KiB
TypeScript
76 lines
3.3 KiB
TypeScript
|
import { EmptyState, PageHeader } from '../components/shared'
|
||
|
|
import { Icons } from '../components/shared/Icons'
|
||
|
|
import { Button } from '../components/ui'
|
||
|
|
|
||
|
|
export default function MonetizationPage() {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<PageHeader />
|
||
|
|
|
||
|
|
{/* Panel container - full-bleed borders */}
|
||
|
|
<div className="-mx-6 lg:-mx-10 mt-6">
|
||
|
|
{/* Membership Tiers */}
|
||
|
|
<div className="px-6 lg:px-10 py-5">
|
||
|
|
<div className="text-xs font-medium text-muted uppercase tracking-wide">Membership Tiers</div>
|
||
|
|
<div className="text-xs text-muted mt-0.5">Create subscription tiers for your readers</div>
|
||
|
|
</div>
|
||
|
|
<div className="px-6 lg:px-10 py-6">
|
||
|
|
<EmptyState
|
||
|
|
Icon={Icons.Crown}
|
||
|
|
title="No tiers created"
|
||
|
|
description="Create membership tiers to offer exclusive content"
|
||
|
|
action={<Button variant="primary" Icon={Icons.Plus}>Create Tier</Button>}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="border-t border-border" />
|
||
|
|
|
||
|
|
{/* Pricing */}
|
||
|
|
<div className="px-6 lg:px-10 py-5">
|
||
|
|
<div className="text-xs font-medium text-muted uppercase tracking-wide">Pricing</div>
|
||
|
|
<div className="text-xs text-muted mt-0.5">Set up payments for your membership</div>
|
||
|
|
</div>
|
||
|
|
<div className="px-6 lg:px-10 py-6">
|
||
|
|
<div className="p-4 bg-border/30">
|
||
|
|
<div className="flex items-center gap-3 mb-3">
|
||
|
|
<Icons.Info className="text-muted" />
|
||
|
|
<span className="text-sm font-medium">Payment Integration</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-xs text-muted mb-4">
|
||
|
|
Connect your Stripe account to start accepting payments from your members.
|
||
|
|
</p>
|
||
|
|
<Button variant="secondary" Icon={Icons.Monetization}>
|
||
|
|
Connect Stripe
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Member-Only Content - inline toggle rows */}
|
||
|
|
<div className="border-t border-border px-6 lg:px-10 py-5 flex items-center justify-between gap-4">
|
||
|
|
<div>
|
||
|
|
<div className="text-sm font-medium">Free Preview</div>
|
||
|
|
<div className="text-xs text-muted mt-0.5">Show a preview before the paywall</div>
|
||
|
|
</div>
|
||
|
|
<label className="relative inline-flex cursor-pointer">
|
||
|
|
<input type="checkbox" className="sr-only peer" />
|
||
|
|
<div className="w-9 h-5 bg-border rounded-full peer peer-checked:bg-accent transition-colors" />
|
||
|
|
<div className="absolute left-0.5 top-0.5 w-4 h-4 bg-surface rounded-full transition-transform peer-checked:translate-x-4" />
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="border-t border-border px-6 lg:px-10 py-5 flex items-center justify-between gap-4">
|
||
|
|
<div>
|
||
|
|
<div className="text-sm font-medium">Show Member Count</div>
|
||
|
|
<div className="text-xs text-muted mt-0.5">Display number of members publicly</div>
|
||
|
|
</div>
|
||
|
|
<label className="relative inline-flex cursor-pointer">
|
||
|
|
<input type="checkbox" className="sr-only peer" />
|
||
|
|
<div className="w-9 h-5 bg-border rounded-full peer peer-checked:bg-accent transition-colors" />
|
||
|
|
<div className="absolute left-0.5 top-0.5 w-4 h-4 bg-surface rounded-full transition-transform peer-checked:translate-x-4" />
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|