forked from coracle/caravel
Create frontend project
This commit is contained in:
Jon Staab
@@ -0,0 +1,51 @@
|
||||
import { createEffect } from "solid-js"
|
||||
import { Router, Route, useLocation } from "@solidjs/router"
|
||||
import Navbar from "./components/Navbar"
|
||||
import Home from "./pages/Home"
|
||||
import Login from "./pages/Login"
|
||||
import RelayList from "./pages/relays/RelayList"
|
||||
import RelayNew from "./pages/relays/RelayNew"
|
||||
import RelayDetail from "./pages/relays/RelayDetail"
|
||||
import RelayEdit from "./pages/relays/RelayEdit"
|
||||
import Account from "./pages/Account"
|
||||
import AdminTenants from "./pages/admin/AdminTenants"
|
||||
import AdminTenantDetail from "./pages/admin/AdminTenantDetail"
|
||||
import AdminRelays from "./pages/admin/AdminRelays"
|
||||
import AdminRelayDetail from "./pages/admin/AdminRelayDetail"
|
||||
import AdminRelayEdit from "./pages/admin/AdminRelayEdit"
|
||||
|
||||
function Layout(props: { children?: any }) {
|
||||
const location = useLocation()
|
||||
|
||||
createEffect(() => {
|
||||
// Reinitialize Preline components on route change
|
||||
location.pathname
|
||||
window.HSStaticMethods?.autoInit()
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<Navbar />
|
||||
<main>{props.children}</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Router root={Layout}>
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/login" component={Login} />
|
||||
<Route path="/relays" component={RelayList} />
|
||||
<Route path="/relays/new" component={RelayNew} />
|
||||
<Route path="/relays/:id" component={RelayDetail} />
|
||||
<Route path="/relays/:id/edit" component={RelayEdit} />
|
||||
<Route path="/account" component={Account} />
|
||||
<Route path="/admin/tenants" component={AdminTenants} />
|
||||
<Route path="/admin/tenants/:id" component={AdminTenantDetail} />
|
||||
<Route path="/admin/relays" component={AdminRelays} />
|
||||
<Route path="/admin/relays/:id" component={AdminRelayDetail} />
|
||||
<Route path="/admin/relays/:id/edit" component={AdminRelayEdit} />
|
||||
</Router>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,24 @@
|
||||
import { A } from "@solidjs/router"
|
||||
|
||||
export default function Navbar() {
|
||||
return (
|
||||
<nav class="bg-white border-b border-gray-200">
|
||||
<div class="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
|
||||
<A href="/" class="font-bold text-gray-900 text-lg">
|
||||
Relay Hosting
|
||||
</A>
|
||||
<div class="flex items-center gap-4">
|
||||
<A href="/relays" class="text-sm text-gray-600 hover:text-gray-900">
|
||||
Dashboard
|
||||
</A>
|
||||
<A
|
||||
href="/login"
|
||||
class="text-sm py-1.5 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Log In
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
import type { IStaticMethods } from "preline"
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
HSStaticMethods: IStaticMethods
|
||||
}
|
||||
}
|
||||
|
||||
export {}
|
||||
@@ -0,0 +1,14 @@
|
||||
@import "tailwindcss";
|
||||
@import "../node_modules/preline/variants.css";
|
||||
@source "../node_modules/preline/dist/*.js";
|
||||
|
||||
/* Pointer cursor on buttons */
|
||||
@layer base {
|
||||
button:not(:disabled),
|
||||
[role="button"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* Defaults hover styles on all devices */
|
||||
@custom-variant hover (&:hover);
|
||||
@@ -0,0 +1,10 @@
|
||||
/* @refresh reload */
|
||||
import { render } from "solid-js/web"
|
||||
import "./index.css"
|
||||
import App from "./App"
|
||||
|
||||
const root = document.getElementById("root")!
|
||||
|
||||
import("preline").then(() => {
|
||||
render(() => <App />, root)
|
||||
})
|
||||
@@ -0,0 +1,7 @@
|
||||
import { EventStore } from "applesauce-core"
|
||||
import { RelayPool } from "applesauce-relay"
|
||||
import { AccountManager } from "applesauce-accounts"
|
||||
|
||||
export const eventStore = new EventStore()
|
||||
export const pool = new RelayPool()
|
||||
export const accounts = new AccountManager()
|
||||
Vendored
+26
@@ -0,0 +1,26 @@
|
||||
declare module "nonboard" {
|
||||
interface NonboardPayload {
|
||||
pubkey: string
|
||||
method: string
|
||||
events: Array<{ kind: number; content: string; tags: string[][] }>
|
||||
nip01?: { secret: string }
|
||||
nip46?: { relays: string[]; clientSecret: string; signerPubkey: string }
|
||||
}
|
||||
|
||||
interface NonboardOptions {
|
||||
appUrl: string
|
||||
appName: string
|
||||
appImage?: string
|
||||
onLogin?: (payload: NonboardPayload) => void
|
||||
onSignup?: (payload: NonboardPayload) => void
|
||||
onError?: (error: unknown) => void
|
||||
onInfo?: (message: unknown) => void
|
||||
}
|
||||
|
||||
interface NonboardApp {
|
||||
mount(el: HTMLElement): void
|
||||
destroy(): void
|
||||
}
|
||||
|
||||
export default function nb(options: NonboardOptions): NonboardApp
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
export default function Account() {
|
||||
return (
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">Account</h1>
|
||||
|
||||
<div class="space-y-6">
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Account Status</h2>
|
||||
<p class="text-gray-500">Status information coming soon.</p>
|
||||
</section>
|
||||
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Recurring Billing</h2>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Enable automatic payments by providing your Nostr Wallet Connect URL.
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="nostr+walletconnect://..."
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Invoice History</h2>
|
||||
<p class="text-gray-500">No invoices yet.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { A } from "@solidjs/router"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div class="min-h-screen bg-white">
|
||||
{/* Hero */}
|
||||
<div class="max-w-5xl mx-auto px-4 py-24 text-center">
|
||||
<h1 class="text-5xl font-bold text-gray-900 mb-4">
|
||||
Host Your Own Nostr Community Relay
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
Spin up a private, managed Nostr relay for your community in minutes.
|
||||
Full control over membership, access, and policies.
|
||||
</p>
|
||||
<A
|
||||
href="/relays/new"
|
||||
class="inline-block py-3 px-8 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Get Started
|
||||
</A>
|
||||
</div>
|
||||
|
||||
{/* Pricing */}
|
||||
<div class="max-w-5xl mx-auto px-4 pb-24">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Pricing</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold mb-2">Free</h3>
|
||||
<p class="text-3xl font-bold mb-4">0 <span class="text-sm font-normal text-gray-500">sats/mo</span></p>
|
||||
<ul class="space-y-2 text-gray-600">
|
||||
<li>Up to 10 members</li>
|
||||
<li class="line-through text-gray-400">Blossom storage</li>
|
||||
<li class="line-through text-gray-400">LiveKit video</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="border-2 border-blue-600 rounded-xl p-6 relative">
|
||||
<span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">Popular</span>
|
||||
<h3 class="text-xl font-bold mb-2">Basic</h3>
|
||||
<p class="text-3xl font-bold mb-4">10,000 <span class="text-sm font-normal text-gray-500">sats/mo</span></p>
|
||||
<ul class="space-y-2 text-gray-600">
|
||||
<li>Up to 100 members</li>
|
||||
<li>Blossom storage</li>
|
||||
<li>LiveKit video</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="border border-gray-200 rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold mb-2">Growth</h3>
|
||||
<p class="text-3xl font-bold mb-4">50,000 <span class="text-sm font-normal text-gray-500">sats/mo</span></p>
|
||||
<ul class="space-y-2 text-gray-600">
|
||||
<li>Unlimited members</li>
|
||||
<li>Blossom storage</li>
|
||||
<li>LiveKit video</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { onMount, onCleanup } from "solid-js"
|
||||
import { useNavigate } from "@solidjs/router"
|
||||
import nb from "nonboard"
|
||||
|
||||
export default function Login() {
|
||||
const navigate = useNavigate()
|
||||
let container: HTMLDivElement | undefined
|
||||
|
||||
onMount(() => {
|
||||
const app = nb({
|
||||
appUrl: window.location.origin,
|
||||
appName: "Nostr Relay Hosting",
|
||||
onLogin: () => navigate("/relays"),
|
||||
onSignup: () => navigate("/relays"),
|
||||
onError: (e: unknown) => console.error("Login error:", e),
|
||||
onInfo: (msg: unknown) => console.info("Login info:", msg),
|
||||
})
|
||||
|
||||
app.mount(container!)
|
||||
onCleanup(() => app.destroy())
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 w-full max-w-md">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 text-center">Log In</h1>
|
||||
<div ref={container} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { useParams, A } from "@solidjs/router"
|
||||
|
||||
export default function AdminRelayDetail() {
|
||||
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="/admin/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={`/admin/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 AdminRelayEdit() {
|
||||
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={`/admin/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 (Admin)</h1>
|
||||
<p class="text-gray-500">Edit form coming soon.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
export default function AdminRelays() {
|
||||
return (
|
||||
<div class="max-w-5xl mx-auto px-4 py-8">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">All Relays</h1>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search relays..."
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<p class="text-gray-500">No relays found.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { useParams, A } from "@solidjs/router"
|
||||
|
||||
export default function AdminTenantDetail() {
|
||||
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="/admin/tenants" class="text-gray-500 hover:text-gray-700">← Tenants</A>
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">Tenant {params.id}</h1>
|
||||
<div class="space-y-6">
|
||||
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 class="text-lg font-semibold mb-4">Relays</h2>
|
||||
<p class="text-gray-500">No relays.</p>
|
||||
</section>
|
||||
<button class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors">
|
||||
Deactivate Tenant
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
export default function AdminTenants() {
|
||||
return (
|
||||
<div class="max-w-5xl mx-auto px-4 py-8">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">Tenants</h1>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search tenants..."
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<p class="text-gray-500">No tenants found.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user