init

studio/src/pages/DomainPage.tsx

@@ -0,0 +1,82 @@
+import { Field, PageHeader } from '../components/shared'
+import { Icons } from '../components/shared/Icons'
+import { Button } from '../components/ui'
+
+export default function DomainPage() {
+  return (
+    <div>
+      <PageHeader />
+
+      {/* Panel container - full-bleed borders */}
+      <div className="-mx-6 lg:-mx-10 mt-6">
+        {/* Subdomain */}
+        <div className="px-6 lg:px-10 py-5">
+          <div className="text-xs font-medium text-muted uppercase tracking-wide">Subdomain</div>
+          <div className="text-xs text-muted mt-0.5">Your default blog address</div>
+        </div>
+        <div className="px-6 lg:px-10 py-6 space-y-3">
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              className="input flex-1"
+              placeholder="myblog"
+              defaultValue=""
+            />
+            <span className="text-sm text-muted">.writekit.dev</span>
+          </div>
+          <p className="text-xs text-muted">
+            This is your default blog URL. You can also add a custom domain below.
+          </p>
+        </div>
+
+        <div className="border-t border-border" />
+
+        {/* Custom Domain */}
+        <div className="px-6 lg:px-10 py-5">
+          <div className="text-xs font-medium text-muted uppercase tracking-wide">Custom Domain</div>
+          <div className="text-xs text-muted mt-0.5">Use your own domain for your blog</div>
+        </div>
+        <div className="px-6 lg:px-10 py-6 space-y-4">
+          <Field
+            label="Domain"
+            value=""
+            onChange={() => {}}
+            placeholder="blog.example.com"
+            hint="Enter your custom domain without https://"
+          />
+          <div className="p-4 bg-border/30 space-y-3">
+            <h4 className="text-sm font-medium">DNS Configuration</h4>
+            <p className="text-xs text-muted">
+              Point your domain to our servers by adding these DNS records:
+            </p>
+            <div className="space-y-2 overflow-x-auto">
+              <div className="flex items-center gap-4 p-2 bg-surface border border-border text-xs font-mono min-w-max">
+                <span className="text-muted w-16">Type</span>
+                <span className="text-muted w-24">Name</span>
+                <span className="text-text">Value</span>
+              </div>
+              <div className="flex items-center gap-4 p-2 bg-surface border border-border text-xs font-mono min-w-max">
+                <span className="w-16">CNAME</span>
+                <span className="w-24">blog</span>
+                <span>cname.writekit.dev</span>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="flex items-center gap-2">
+              <span className="w-2 h-2 rounded-full bg-warning" />
+              <span className="text-sm text-muted">DNS: Pending</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="w-2 h-2 rounded-full bg-muted" />
+              <span className="text-sm text-muted">SSL: Not configured</span>
+            </div>
+          </div>
+          <Button variant="secondary" Icon={Icons.Refresh}>
+            Check DNS
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}