chore: use radio instead for dropdown for database type

Present type upfront

src/components/CreateConnectionModal.tsx

@@ -4,13 +4,14 @@ import { toast } from "react-hot-toast";
 import TextareaAutosize from "react-textarea-autosize";
 import { useConnectionStore } from "@/store";
 import { Connection, Engine, ResponseObject, SSLOptions } from "@/types";
-import Select from "./kit/Select";
+import Radio from "./kit/Radio";
 import TextField from "./kit/TextField";
 import Modal from "./kit/Modal";
 import Icon from "./Icon";
 import DataStorageBanner from "./DataStorageBanner";
 import ActionConfirmModal from "./ActionConfirmModal";
 import { useTranslation } from "react-i18next";
+import EngineIcon from "./EngineIcon";
 
 interface Props {
   connection?: Connection;
@@ -43,6 +44,29 @@ const defaultPort = {
   [Engine.TiDBServerless]: "4000",
 };
 
+const engines = [
+  {
+    type: Engine.MySQL,
+    name: "MySQL",
+    defualtPort: "3306",
+  },
+  {
+    type: Engine.PostgreSQL,
+    name: "PostgreSQL",
+    defualtPort: "5432",
+  },
+  {
+    type: Engine.MSSQL,
+    name: "SQL Server",
+    defualtPort: "1433",
+  },
+  {
+    type: Engine.TiDBServerless,
+    name: "TiDB Serverless",
+    defualtPort: "4000",
+  },
+];
+
 const defaultConnection: Connection = {
   id: "",
   title: "",
@@ -216,17 +240,24 @@ const CreateConnectionModal = (props: Props) => {
           <DataStorageBanner className="rounded-lg bg-white border dark:border-zinc-700 py-2 !justify-start" alwaysShow={true} />
           <div className="w-full flex flex-col">
             <label className="block text-sm font-medium text-gray-700 mb-1">{t("connection.database-type")}</label>
-            <Select
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
-              className="w-full"
+              {engines.map((engine) => (
-              value={connection.engineType}
+                <div
-              itemList={[
+                  key={engine.type}
-                { value: Engine.MySQL, label: "MySQL" },
+                  className="cursor-pointer relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-4 py-2 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:border-gray-400"
-                { value: Engine.PostgreSQL, label: "PostgreSQL" },
+                >
-                { value: Engine.MSSQL, label: "MSSQL" },
+                  <Radio
-                { value: Engine.TiDBServerless, label: "TiDB Serverless Tier" },
+                    value={engine.type}
-              ]}
+                    checked={connection.engineType === engine.type}
-              onValueChange={(value) => setPartialConnection({ engineType: value as Engine })}
+                    onChange={(value) => setPartialConnection({ engineType: value as Engine })}
                   />
+                  <EngineIcon className="h-8 w-8 rounded-full" engine={engine.type} />
+                  <label htmlFor={engine.type} className="cursor-pointer ml-3 block text-sm font-medium leading-6 text-gray-900">
+                    {engine.name}
+                  </label>
+                </div>
+              ))}
+            </div>
           </div>
           <div className="w-full flex flex-col">
             <label className="block text-sm font-medium text-gray-700 mb-1">{t("connection.title")}</label>
@@ -277,12 +308,11 @@ const CreateConnectionModal = (props: Props) => {
               <div className="w-full flex flex-row justify-start items-start flex-wrap">
                 {SSLTypeOptions.map((option) => (
                   <label key={option.value} className="w-auto flex flex-row justify-start items-center cursor-pointer mr-3 mb-3">
-                    <input
+                    <Radio
-                      type="radio"
                       className="radio w-4 h-4 mr-1"
                       value={option.value}
                       checked={sslType === option.value}
-                      onChange={(e) => setSSLType(e.target.value as SSLType)}
+                      onChange={(value) => setSSLType(value as SSLType)}
                     />
                     <span className="text-sm">{option.label}</span>
                   </label>

src/components/kit/Radio.tsx

@@ -26,7 +26,7 @@ const Radio = (props: Props) => {
 
   return (
     <input
-      className={`${className || ""} h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600`}
+      className={`${className || ""} h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer`}
       type={type}
       disabled={disabled}
       value={value}