Nicer cert type create select

frontend/src/pages/Certificates/TableWrapper.tsx

@@ -1,12 +1,7 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
-import {
-	EmptyList,
-	PrettyButton,
-	SpinnerPage,
-	tableEventReducer,
-} from "components";
+import { EmptyList, SpinnerPage, tableEventReducer } from "components";
 import { useCertificates } from "hooks";
 import { intl } from "locale";
 
@@ -23,11 +18,7 @@ const initialState = {
 	],
 	filters: [],
 };
-
-interface TableWrapperProps {
-	onCreateClick?: () => void;
-}
-function TableWrapper({ onCreateClick }: TableWrapperProps) {
+function TableWrapper() {
 	const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
 		tableEventReducer,
 		initialState,
@@ -68,11 +59,6 @@ function TableWrapper({ onCreateClick }: TableWrapperProps) {
 			<EmptyList
 				title={intl.formatMessage({ id: "create-certificate-title" })}
 				summary={intl.formatMessage({ id: "create-hint" })}
-				createButton={
-					<PrettyButton mt={5} onClick={onCreateClick}>
-						{intl.formatMessage({ id: "lets-go" })}
-					</PrettyButton>
-				}
 			/>
 		);
 	}

frontend/src/pages/Certificates/index.tsx

@@ -1,14 +1,22 @@
 import { useState } from "react";
 
-import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
+import {
+	Heading,
+	HStack,
+	Menu,
+	MenuList,
+	MenuItem,
+	MenuDivider,
+} from "@chakra-ui/react";
+import { HelpDrawer, PrettyMenuButton } from "components";
 import { intl } from "locale";
 import { CertificateCreateModal } from "modals";
+import { FiGlobe, FiServer, FiUpload } from "react-icons/fi";
 
 import TableWrapper from "./TableWrapper";
 
 function Certificates() {
-	const [createShown, setCreateShown] = useState(false);
+	const [createShown, setCreateShown] = useState("");
 
 	return (
 		<>
@@ -18,15 +26,36 @@ function Certificates() {
 				</Heading>
 				<HStack>
 					<HelpDrawer section="Certificates" />
-					<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
-						{intl.formatMessage({ id: "certificate.create" })}
-					</PrettyButton>
+					<Menu>
+						<PrettyMenuButton>
+							{intl.formatMessage({ id: "certificate.create" })}
+						</PrettyMenuButton>
+						<MenuList>
+							<MenuItem
+								icon={<FiGlobe />}
+								onClick={() => setCreateShown("http")}>
+								{intl.formatMessage({ id: "type.http" })}
+							</MenuItem>
+							<MenuItem
+								icon={<FiServer />}
+								onClick={() => setCreateShown("dns")}>
+								{intl.formatMessage({ id: "type.dns" })}
+							</MenuItem>
+							<MenuDivider />
+							<MenuItem
+								icon={<FiUpload />}
+								onClick={() => setCreateShown("custom")}>
+								{intl.formatMessage({ id: "type.custom" })}
+							</MenuItem>
+						</MenuList>
+					</Menu>
 				</HStack>
 			</HStack>
-			<TableWrapper onCreateClick={() => setCreateShown(true)} />
+			<TableWrapper />
 			<CertificateCreateModal
-				isOpen={createShown}
-				onClose={() => setCreateShown(false)}
+				isOpen={createShown !== ""}
+				certType={createShown}
+				onClose={() => setCreateShown("")}
 			/>
 		</>
 	);