init

studio/src/pages/MonetizationPage.tsx

@@ -0,0 +1,75 @@
+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>
+  )
+}