mirror of
https://github.com/coracle-social/flotilla.git
synced 2025-12-10 19:07:06 +00:00
Move space create to its own page
This commit is contained in:
Jon Staab
@@ -7,7 +7,6 @@
|
|||||||
import Button from "@lib/components/Button.svelte"
|
import Button from "@lib/components/Button.svelte"
|
||||||
import CardButton from "@lib/components/CardButton.svelte"
|
import CardButton from "@lib/components/CardButton.svelte"
|
||||||
import ModalHeader from "@lib/components/ModalHeader.svelte"
|
import ModalHeader from "@lib/components/ModalHeader.svelte"
|
||||||
import SpaceCreate from "@app/components/SpaceCreate.svelte"
|
|
||||||
import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
|
import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
|
||||||
import {pushModal} from "@app/util/modal"
|
import {pushModal} from "@app/util/modal"
|
||||||
|
|
||||||
@@ -17,8 +16,6 @@
|
|||||||
|
|
||||||
const {hideDiscover}: Props = $props()
|
const {hideDiscover}: Props = $props()
|
||||||
|
|
||||||
const startCreate = () => pushModal(SpaceCreate)
|
|
||||||
|
|
||||||
const startJoin = () => pushModal(SpaceInviteAccept)
|
const startJoin = () => pushModal(SpaceInviteAccept)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -59,7 +56,7 @@
|
|||||||
{/snippet}
|
{/snippet}
|
||||||
</CardButton>
|
</CardButton>
|
||||||
</Button>
|
</Button>
|
||||||
<Button onclick={startCreate}>
|
<Link href="/spaces/create">
|
||||||
<CardButton class="btn-neutral">
|
<CardButton class="btn-neutral">
|
||||||
{#snippet icon()}
|
{#snippet icon()}
|
||||||
<div><Icon icon={AddCircle} size={7} /></div>
|
<div><Icon icon={AddCircle} size={7} /></div>
|
||||||
@@ -71,5 +68,5 @@
|
|||||||
<div>Just a few questions and you'll be on your way.</div>
|
<div>Just a few questions and you'll be on your way.</div>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
</CardButton>
|
</CardButton>
|
||||||
</Button>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,92 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import Server from "@assets/icons/server.svg?dataurl"
|
|
||||||
import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"
|
|
||||||
import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
|
|
||||||
import Link from "@lib/components/Link.svelte"
|
|
||||||
import Button from "@lib/components/Button.svelte"
|
|
||||||
import Icon from "@lib/components/Icon.svelte"
|
|
||||||
import ModalHeader from "@lib/components/ModalHeader.svelte"
|
|
||||||
import ModalFooter from "@lib/components/ModalFooter.svelte"
|
|
||||||
|
|
||||||
const back = () => history.back()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="column gap-4">
|
|
||||||
<ModalHeader>
|
|
||||||
{#snippet title()}
|
|
||||||
<div>Create your own Space</div>
|
|
||||||
{/snippet}
|
|
||||||
{#snippet info()}
|
|
||||||
<p>Get started with one of our trusted partners, or learn how to host your own space.</p>
|
|
||||||
{/snippet}
|
|
||||||
</ModalHeader>
|
|
||||||
<div class="card2 bg-alt flex flex-col gap-4">
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<img alt="Coracle Logo" src="/coracle.png" class="h-7 w-7" />
|
|
||||||
<h3 class="text-lg font-bold">Coracle Hosting</h3>
|
|
||||||
</div>
|
|
||||||
<div class="badge badge-primary self-start">Recommended</div>
|
|
||||||
</div>
|
|
||||||
<ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
|
|
||||||
<li>Simple setup, support included</li>
|
|
||||||
<li>Free and open source software — no vendor lock-in</li>
|
|
||||||
<li>Advanced access controls and relay policies</li>
|
|
||||||
<li>Full-featured admin dashboard</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<Link class="btn btn-primary" href="https://info.coracle.social">
|
|
||||||
Get Started
|
|
||||||
<Icon icon={ArrowRight} />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div class="card2 bg-alt flex flex-col gap-4">
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
<div class="self-start">
|
|
||||||
<img
|
|
||||||
alt="Relay Tools"
|
|
||||||
src="https://relay.tools/17.svg"
|
|
||||||
class="-my-20 -ml-2 hidden h-48 dark:block"
|
|
||||||
style="filter: contrast(50%)" />
|
|
||||||
<img
|
|
||||||
alt="Relay Tools"
|
|
||||||
src="https://relay.tools/19.svg"
|
|
||||||
class="-my-20 -ml-2 h-48 dark:hidden"
|
|
||||||
style="filter: contrast(50%)" />
|
|
||||||
</div>
|
|
||||||
<ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
|
|
||||||
<li>Customizable relay policies</li>
|
|
||||||
<li>Simple management dashboard</li>
|
|
||||||
<li>Support available</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<Link class="btn btn-neutral" href="https://relay.tools/signup">
|
|
||||||
Get Started
|
|
||||||
<Icon icon={ArrowRight} />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div class="card2 bg-alt flex flex-col gap-4">
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<Icon icon={Server} />
|
|
||||||
<h3 class="text-lg font-bold">Self-Hosted</h3>
|
|
||||||
</div>
|
|
||||||
<ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
|
|
||||||
<li>Unlimited customization and control</li>
|
|
||||||
<li>Free and open source software</li>
|
|
||||||
<li>Full-featured admin dashboards available</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<Link class="btn btn-neutral" href="https://github.com/coracle-social/zooid">
|
|
||||||
Get Started
|
|
||||||
<Icon icon={ArrowRight} />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<ModalFooter>
|
|
||||||
<Button class="btn btn-link" onclick={back}>
|
|
||||||
<Icon icon={AltArrowLeft} />
|
|
||||||
Go back
|
|
||||||
</Button>
|
|
||||||
</ModalFooter>
|
|
||||||
</div>
|
|
||||||
89
src/routes/spaces/create/+page.svelte
Normal file
89
src/routes/spaces/create/+page.svelte
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Server from "@assets/icons/server.svg?dataurl"
|
||||||
|
import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"
|
||||||
|
import Link from "@lib/components/Link.svelte"
|
||||||
|
import Icon from "@lib/components/Icon.svelte"
|
||||||
|
import Page from "@lib/components/Page.svelte"
|
||||||
|
import PageHeader from "@lib/components/PageHeader.svelte"
|
||||||
|
import PageContent from "@lib/components/PageContent.svelte"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Page class="cw-full">
|
||||||
|
<PageContent class="cw-full flex flex-col items-center gap-2 p-2 pt-4">
|
||||||
|
<PageHeader>
|
||||||
|
{#snippet title()}
|
||||||
|
<div>Create your own Space</div>
|
||||||
|
{/snippet}
|
||||||
|
{#snippet info()}
|
||||||
|
<p>Get started with one of our trusted partners, or learn how to host your own space.</p>
|
||||||
|
{/snippet}
|
||||||
|
</PageHeader>
|
||||||
|
<div class="grid w-full max-w-lg grid-cols-1 gap-2 lg:max-w-4xl lg:grid-cols-2">
|
||||||
|
<div class="card2 bg-alt flex flex-col gap-4">
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<img alt="Coracle Logo" src="/coracle.png" class="h-7 w-7" />
|
||||||
|
<h3 class="text-lg font-bold">Coracle Hosting</h3>
|
||||||
|
</div>
|
||||||
|
<div class="badge badge-neutral">Recommended</div>
|
||||||
|
</div>
|
||||||
|
<ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
|
||||||
|
<li>Simple setup, support included</li>
|
||||||
|
<li>Free and open source software — no vendor lock-in</li>
|
||||||
|
<li>Advanced access controls and relay policies</li>
|
||||||
|
<li>Full-featured admin dashboard</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<Link class="btn btn-primary" href="https://info.coracle.social">
|
||||||
|
Get Started
|
||||||
|
<Icon icon={ArrowRight} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div class="card2 bg-alt flex flex-col gap-4">
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="self-start">
|
||||||
|
<img
|
||||||
|
alt="Relay Tools"
|
||||||
|
src="https://relay.tools/17.svg"
|
||||||
|
class="-my-20 -ml-2 hidden h-48 dark:block"
|
||||||
|
style="filter: contrast(50%)" />
|
||||||
|
<img
|
||||||
|
alt="Relay Tools"
|
||||||
|
src="https://relay.tools/19.svg"
|
||||||
|
class="-my-20 -ml-2 h-48 dark:hidden"
|
||||||
|
style="filter: contrast(50%)" />
|
||||||
|
</div>
|
||||||
|
<ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
|
||||||
|
<li>Independently run</li>
|
||||||
|
<li>Customizable relay policies</li>
|
||||||
|
<li>Simple management dashboard</li>
|
||||||
|
<li>Support available</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<Link class="btn btn-neutral" href="https://relay.tools/signup">
|
||||||
|
Get Started
|
||||||
|
<Icon icon={ArrowRight} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div class="card2 bg-alt flex flex-col gap-4">
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<Icon icon={Server} />
|
||||||
|
<h3 class="text-lg font-bold">Self-Hosted</h3>
|
||||||
|
</div>
|
||||||
|
<ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
|
||||||
|
<li>Unlimited customization and control</li>
|
||||||
|
<li>Free and open source software</li>
|
||||||
|
<li>Full-featured admin dashboards available</li>
|
||||||
|
<li>Cheapest option</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<Link class="btn btn-neutral" href="https://github.com/coracle-social/zooid">
|
||||||
|
Get Started
|
||||||
|
<Icon icon={ArrowRight} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PageContent>
|
||||||
|
</Page>
|
||||||
Reference in New Issue
Block a user