Refactor PostgreSQL selection UI in project creation form for improved layout and documentation links

This commit is contained in:
Andras Bacsai
2024-12-17 09:57:31 +01:00
parent b0a5781728
commit 7edd2285b5

View File

@@ -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>