Function SubmitPage

app/submit/page.tsx:648–693

()

}

export default function SubmitPage() {
  return (
    <div className="min-h-screen bg-[var(--color-bg)]">
      <Header />

      {/* Hero */}
      <section className="border-b border-[var(--color-border-weak)] px-[var(--padding)] py-[var(--vertical-padding)]">
        <div className="mx-auto max-w-[67.5rem]">
          <h1 className="mb-2 text-2xl font-semibold text-[var(--color-text-strong)]">
            Submit an Extension
          </h1>
          <p className="text-[var(--color-text)]">
            Share your MCP servers, plugins, hooks, themes, and tools with the OpenCode community.
          </p>
        </div>
      </section>

      {/* Content */}
      <main className="px-[var(--padding)] py-[var(--vertical-padding)]">
        <div className="mx-auto max-w-[67.5rem]">
          <AuthLoading>
            <div className="text-[var(--color-text-weak)]">Loading...</div>
          </AuthLoading>

          <Authenticated>
            <SubmitForm />
          </Authenticated>

          <Unauthenticated>
            <div className="flex flex-col gap-4">
              <p className="text-[var(--color-text)]">
                You need to sign in to submit an extension.
              </p>
              <Link
                href="/sign-in"
                className="inline-flex w-fit items-center justify-center rounded bg-[var(--color-bg-strong)] px-4 py-2 text-sm font-medium text-[var(--color-text-inverted)] transition-colors hover:bg-[var(--color-bg-strong-hover)]"
              >
                Sign In
              </Link>
            </div>
          </Unauthenticated>
        </div>
      </main>
    </div>
  )
}