Refactor PostgreSQL selection UI in project creation form for improved layout and documentation links
This commit is contained in:
@@ -273,77 +273,74 @@
|
|||||||
<h2>Select a Postgresql type</h2>
|
<h2>Select a Postgresql type</h2>
|
||||||
<div>If you need extra extensions, you can select Supabase PostgreSQL (or others), otherwise select PostgreSQL
|
<div>If you need extra extensions, you can select Supabase PostgreSQL (or others), otherwise select PostgreSQL
|
||||||
16 (default).</div>
|
16 (default).</div>
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-6 pt-8">
|
||||||
<div class="flex flex-col gap-2">
|
<div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex "
|
||||||
<div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex "
|
wire:click="setPostgresqlType('postgres:16-alpine')">
|
||||||
wire:click="setPostgresqlType('postgres:16-alpine')">
|
<div class="flex flex-col">
|
||||||
<div class="flex flex-col">
|
<div class="box-title">PostgreSQL 16 (default)</div>
|
||||||
<div class="box-title">PostgreSQL 16 (default)</div>
|
<div class="box-description">
|
||||||
<div class="box-description">
|
PostgreSQL is a powerful, open-source object-relational database system (no extensions).
|
||||||
PostgreSQL is a powerful, open-source object-relational database system (no extensions).
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1"></div>
|
</div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
|
|
||||||
<div class="flex items-center px-2" title="Read the documentation.">
|
<div class="flex items-center px-2" title="Read the documentation.">
|
||||||
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-6000"
|
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-6000"
|
||||||
onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/"
|
onclick="event.stopPropagation()" href="https://hub.docker.com/_/postgres/" target="_blank">
|
||||||
target="_blank">
|
Documentation
|
||||||
Documentation
|
</a>
|
||||||
</a>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
|
||||||
|
wire:click="setPostgresqlType('supabase/postgres:15.6.1.113')">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="box-title">Supabase PostgreSQL (with extensions)</div>
|
||||||
|
<div class="box-description">
|
||||||
|
Supabase is a modern, open-source alternative to PostgreSQL with lots of extensions.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
|
<div class="flex-1"></div>
|
||||||
wire:click="setPostgresqlType('supabase/postgres:15.6.1.113')">
|
<div class="flex items-center px-2" title="Read the documentation.">
|
||||||
<div class="flex flex-col">
|
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
|
||||||
<div class="box-title">Supabase PostgreSQL (with extensions)</div>
|
onclick="event.stopPropagation()" href="https://github.com/supabase/postgres"
|
||||||
<div class="box-description">
|
target="_blank">
|
||||||
Supabase is a modern, open-source alternative to PostgreSQL with lots of extensions.
|
Documentation
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1"></div>
|
</div>
|
||||||
<div class="flex items-center px-2" title="Read the documentation.">
|
<div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
|
||||||
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
|
wire:click="setPostgresqlType('postgis/postgis')">
|
||||||
onclick="event.stopPropagation()" href="https://github.com/supabase/postgres"
|
<div class="flex flex-col">
|
||||||
target="_blank">
|
<div class="box-title">PostGIS</div>
|
||||||
Documentation
|
<div class="box-description">
|
||||||
</a>
|
PostGIS is a PostgreSQL extension for geographic objects.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
|
<div class="flex-1"></div>
|
||||||
wire:click="setPostgresqlType('postgis/postgis')">
|
<div class="flex items-center px-2" title="Read the documentation.">
|
||||||
<div class="flex flex-col">
|
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
|
||||||
<div class="box-title">PostGIS</div>
|
onclick="event.stopPropagation()" href="https://github.com/postgis/docker-postgis"
|
||||||
<div class="box-description">
|
target="_blank">
|
||||||
PostGIS is a PostgreSQL extension for geographic objects.
|
Documentation
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1"></div>
|
</div>
|
||||||
<div class="flex items-center px-2" title="Read the documentation.">
|
<div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
|
||||||
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
|
wire:click="setPostgresqlType('pgvector/pgvector:pg16')">
|
||||||
onclick="event.stopPropagation()" href="https://github.com/postgis/docker-postgis"
|
<div class="flex flex-col">
|
||||||
target="_blank">
|
<div class="box-title">PGVector (16)</div>
|
||||||
Documentation
|
<div class="box-description">
|
||||||
</a>
|
PGVector is a PostgreSQL extension for vector data types.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gap-2 border border-transparent cursor-pointer box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-400 dark:hover:bg-coollabs group flex"
|
<div class="flex-1"></div>
|
||||||
wire:click="setPostgresqlType('pgvector/pgvector:pg16')">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<div class="box-title">PGVector (16)</div>
|
|
||||||
<div class="box-description">
|
|
||||||
PGVector is a PostgreSQL extension for vector data types.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1"></div>
|
|
||||||
|
|
||||||
<div class="flex items-center px-2" title="Read the documentation.">
|
<div class="flex items-center px-2" title="Read the documentation.">
|
||||||
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
|
<a class="p-2 hover:underline group-hover:dark:text-white dark:text-white text-neutral-600"
|
||||||
onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector"
|
onclick="event.stopPropagation()" href="https://github.com/pgvector/pgvector"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
Documentation
|
Documentation
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user