UI Peer dropdowns: add tembo and crunchy (#1599)

This PR adds dropdown items in the source selection page of create peer
UI.
- Tembo
- Crunchy Postgres
are the items

Functionally tested

<img width="1285" alt="Screenshot 2024-04-11 at 4 17 21 AM"
src="https://github.com/PeerDB-io/peerdb/assets/65964360/de5abbc5-ab7c-48d0-8b97-269b4cfb6cec">

ui/app/mirrors/create/cdc/guide.tsx

@@ -20,6 +20,8 @@ const GuideForDestinationSetup = ({
         return 'https://docs.peerdb.io/connect/azure_flexible_server_postgres';
       case 'GOOGLE CLOUD POSTGRESQL':
         return 'https://docs.peerdb.io/connect/cloudsql_postgres';
+      case 'CRUNCHY POSTGRES':
+        return 'https://docs.peerdb.io/connect/crunchy_bridge';
       default:
         return '';
     }

ui/app/peers/create/[peerType]/page.tsx

@@ -45,24 +45,22 @@ export default function CreateConfig({
   const [loading, setLoading] = useState<boolean>(false);
   const peerLabel = peerType.toUpperCase().replaceAll('%20', ' ');
   const getDBType = () => {
-    if (peerType.includes('POSTGRESQL')) {
+    if (peerType.includes('POSTGRES') || peerType.includes('TEMBO')) {
       return 'POSTGRES';
     }
     return peerType;
   };
 
   const configComponentMap = (peerType: string) => {
-    if (peerType.includes('POSTGRESQL')) {
-      return (
-        <PostgresForm
-          settings={postgresSetting}
-          setter={setConfig}
-          type={peerType}
-        />
-      );
-    }
-
-    switch (peerType) {
+    switch (getDBType()) {
+      case 'POSTGRES':
+        return (
+          <PostgresForm
+            settings={postgresSetting}
+            setter={setConfig}
+            type={peerType}
+          />
+        );
       case 'SNOWFLAKE':
         return <SnowflakeForm settings={snowflakeSetting} setter={setConfig} />;
       case 'BIGQUERY':

ui/components/PeerComponent.tsx

@@ -14,6 +14,10 @@ export const DBTypeToImageMapping = (peerType: DBType | string) => {
       return '/svgs/rds.svg';
     case 'GOOGLE CLOUD POSTGRESQL':
       return '/svgs/gcp.svg';
+    case 'TEMBO':
+      return '/images/tembo.png';
+    case 'CRUNCHY POSTGRES':
+      return '/images/crunchy.png';
     case DBType.POSTGRES:
     case 'POSTGRES':
       return '/svgs/pg.svg';

ui/components/SelectSource.tsx

@@ -45,7 +45,9 @@ export default function SelectSource({
     { value: 'POSTGRESQL', label: 'POSTGRESQL' },
     { value: 'POSTGRESQL', label: 'RDS POSTGRESQL' },
     { value: 'POSTGRESQL', label: 'GOOGLE CLOUD POSTGRESQL' },
-    { value: 'POSTGRESQL', label: 'AZURE FLEXIBLE POSTGRESQL' }
+    { value: 'POSTGRESQL', label: 'AZURE FLEXIBLE POSTGRESQL' },
+    { value: 'POSTGRESQL', label: 'TEMBO' },
+    { value: 'POSTGRESQL', label: 'CRUNCHY POSTGRES' }
   );
   return (
     <ReactSelect
@@ -56,6 +58,7 @@ export default function SelectSource({
       onChange={(val, _) => val && setPeerType(val.label)}
       formatOptionLabel={SourceLabel}
       theme={SelectTheme}
+      getOptionValue={(option) => option.label}
     />
   );
 }