Files
firegex-traffic-viewer/frontend/src/components/DocsButton.tsx

41 lines
1.6 KiB
TypeScript

import { ActionIcon, ActionIconProps, Box, Container, Modal, ScrollArea, ScrollAreaAutosize, Title, Tooltip } from "@mantine/core";
import { useState } from "react";
import { FaBookBookmark } from "react-icons/fa6";
import { NFRegexDocs } from "./NFRegex/NFRegexDocs";
import { NFProxyDocs } from "./NFProxy/NFProxyDocs";
import { PortHijackDocs } from "./PortHijack/PortHijackDocs";
import { EnumToPrimitiveUnion } from "../js/utils";
export enum DocType{
NFREGEX = "nfregex",
NFPROXY = "nfproxy",
PORTHIJACK = "porthijack",
}
export const DocsButton = ({ doc, ...props }: { doc: EnumToPrimitiveUnion<DocType> } & ActionIconProps) => {
const [open, setOpen] = useState(false);
return <Box>
<Tooltip label="Read the documentation" color="pink">
<ActionIcon color="pink" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled" {...props}><FaBookBookmark size="20px" /></ActionIcon>
</Tooltip>
<Modal opened={open} onClose={() => setOpen(false)} fullScreen title={
<Title order={2}>Firegex Docs 📕</Title>
} scrollAreaComponent={ScrollArea.Autosize}>
<Container style={{padding: "1rem", maxWidth:"90vw"}}>
{
doc == DocType.NFREGEX ?
<NFRegexDocs />:
doc == DocType.NFPROXY ?
<NFProxyDocs />:
doc == DocType.PORTHIJACK ?
<PortHijackDocs />:
<Title order={3}>Docs not found</Title>
}
</Container>
</Modal>
</Box>
}