Create frontend project

2026-02-25 14:55:36 -08:00
parent c84b003a57
commit 9bc6c42aee
32 changed files with 1339 additions and 1 deletions
@@ -0,0 +1,25 @@
+import { useParams, A } from "@solidjs/router"
+
+export default function RelayDetail() {
+  const params = useParams()
+
+  return (
+    <div class="max-w-4xl mx-auto px-4 py-8">
+      <div class="flex items-center gap-2 mb-6">
+        <A href="/relays" class="text-gray-500 hover:text-gray-700">← Relays</A>
+      </div>
+      <h1 class="text-2xl font-bold text-gray-900 mb-4">Relay {params.id}</h1>
+      <div class="flex gap-3">
+        <A
+          href={`/relays/${params.id}/edit`}
+          class="py-2 px-4 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors"
+        >
+          Edit
+        </A>
+        <button class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors">
+          Deactivate
+        </button>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,15 @@
+import { useParams, A } from "@solidjs/router"
+
+export default function RelayEdit() {
+  const params = useParams()
+
+  return (
+    <div class="max-w-2xl mx-auto px-4 py-8">
+      <div class="flex items-center gap-2 mb-6">
+        <A href={`/relays/${params.id}`} class="text-gray-500 hover:text-gray-700">← Back</A>
+      </div>
+      <h1 class="text-2xl font-bold text-gray-900 mb-6">Edit Relay</h1>
+      <p class="text-gray-500">Edit form coming soon.</p>
+    </div>
+  )
+}
@@ -0,0 +1,18 @@
+import { A } from "@solidjs/router"
+
+export default function RelayList() {
+  return (
+    <div class="max-w-4xl mx-auto px-4 py-8">
+      <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-gray-900">My Relays</h1>
+        <A
+          href="/relays/new"
+          class="py-2 px-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          Add Relay
+        </A>
+      </div>
+      <p class="text-gray-500">No relays yet. Create one to get started.</p>
+    </div>
+  )
+}
@@ -0,0 +1,128 @@
+import { createSignal } from "solid-js"
+import { useNavigate } from "@solidjs/router"
+
+const PLANS = [
+  { id: "free", label: "Free", price: 0, members: "Up to 10", blossom: false, livekit: false },
+  { id: "basic", label: "Basic", price: 10_000, members: "Up to 100", blossom: true, livekit: true },
+  { id: "growth", label: "Growth", price: 50_000, members: "Unlimited", blossom: true, livekit: true },
+] as const
+
+type PlanId = (typeof PLANS)[number]["id"]
+
+function slugify(s: string) {
+  return s
+    .toLowerCase()
+    .trim()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+}
+
+export default function RelayNew() {
+  const navigate = useNavigate()
+  const [name, setName] = createSignal("")
+  const [subdomain, setSubdomain] = createSignal("")
+  const [icon, setIcon] = createSignal("")
+  const [description, setDescription] = createSignal("")
+  const [plan, setPlan] = createSignal<PlanId>("free")
+
+  function handleNameInput(value: string) {
+    setName(value)
+    setSubdomain(slugify(value))
+  }
+
+  function handleSubmit(e: Event) {
+    e.preventDefault()
+    // TODO: submit to backend, handle invoice flow
+    navigate("/relays")
+  }
+
+  return (
+    <div class="max-w-2xl mx-auto px-4 py-8">
+      <h1 class="text-2xl font-bold text-gray-900 mb-6">New Relay</h1>
+      <form onSubmit={handleSubmit} class="space-y-6">
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
+          <input
+            type="text"
+            required
+            value={name()}
+            onInput={e => handleNameInput(e.currentTarget.value)}
+            placeholder="My Community"
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Subdomain</label>
+          <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-blue-500">
+            <input
+              type="text"
+              required
+              value={subdomain()}
+              onInput={e => setSubdomain(e.currentTarget.value)}
+              placeholder="my-community"
+              class="flex-1 px-3 py-2 focus:outline-none"
+            />
+            <span class="px-3 py-2 bg-gray-50 text-gray-500 text-sm border-l border-gray-300">
+              .spaces.coracle.social
+            </span>
+          </div>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Icon URL</label>
+          <input
+            type="url"
+            value={icon()}
+            onInput={e => setIcon(e.currentTarget.value)}
+            placeholder="https://example.com/icon.png"
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+          <textarea
+            value={description()}
+            onInput={e => setDescription(e.currentTarget.value)}
+            placeholder="A community for..."
+            rows={3}
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-3">Plan</label>
+          <div class="grid grid-cols-3 gap-3">
+            {PLANS.map(p => (
+              <button
+                type="button"
+                onClick={() => setPlan(p.id)}
+                class={`border-2 rounded-xl p-4 text-left transition-colors ${
+                  plan() === p.id
+                    ? "border-blue-600 bg-blue-50"
+                    : "border-gray-200 hover:border-gray-300"
+                }`}
+              >
+                <div class="font-bold text-gray-900">{p.label}</div>
+                <div class="text-sm text-gray-500 mt-1">
+                  {p.price === 0 ? "Free" : `${p.price.toLocaleString()} sats/mo`}
+                </div>
+                <div class="text-xs text-gray-500 mt-2">{p.members} members</div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          Create Relay
+        </button>
+      </form>
+    </div>
+  )
+}