Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import {
Box,
Flex,
Heading,
Text,
Button,
Wrap,
WrapItem,
} from "@chakra-ui/react";
import type { FunctionComponent } from "react";
import { HOME_ANALYTICS, SECTION_PADDING } from "./constants";
import testIds from "./testIds";
import { Category } from "../../api/config";
import { NavLink } from "../../components/NavLink";
import { useConfigValue } from "../../hooks/useConfigValue";
import { getSearchPath } from "../../util/url";
/**
* Categories used if config does not have specific categories
*/
const DEFAULT_CATEGORIES: Category[] = [
{ title: "Monitoring", url: getSearchPath({ keywords: ["monitoring"] }) },
{ title: "Containers", url: getSearchPath({ keywords: ["containers"] }) },
{ title: "Serverless", url: getSearchPath({ keywords: ["serverless"] }) },
{ title: "Databases", url: getSearchPath({ keywords: ["databases"] }) },
{ title: "Utilities", url: getSearchPath({ keywords: ["utilities"] }) },
{ title: "Deployment", url: getSearchPath({ keywords: ["deployment"] }) },
{ title: "Websites", url: getSearchPath({ keywords: ["websites"] }) },
{ title: "Security", url: getSearchPath({ keywords: ["security"] }) },
{ title: "Compliance", url: getSearchPath({ keywords: ["compliance"] }) },
{ title: "Network", url: getSearchPath({ keywords: ["network"] }) },
{
title: "Artificial Intelligence (AI)",
url: getSearchPath({ keywords: ["artificial intelligence (ai)"] }),
},
{
title: "Cloud Services Integrations",
url: getSearchPath({ keywords: ["cloud services integrations"] }),
},
];
export const Categories: FunctionComponent = () => {
const categories = useConfigValue("categories") ?? DEFAULT_CATEGORIES;
return (
<Flex
data-testid={testIds.categoriesContainer}
direction="column"
my={4}
px={SECTION_PADDING.X}
py={SECTION_PADDING.Y}
zIndex="0"
>
<Heading
as="h3"
color="white"
data-testid={testIds.categoriesHeader}
fontSize="1.5rem"
fontWeight="semibold"
lineHeight="lg"
mb={1}
>
Search by use case
</Heading>
<Text
color="white"
data-testid={testIds.categoriesDescription}
lineHeight="md"
mb={5}
>
Find the right construct for your problem set from a community that’s
already tackled it.
</Text>
<Wrap>
{categories.map((category) => (
<WrapItem key={category.title}>
<NavLink
data-event={HOME_ANALYTICS.USE_CASE.eventName(category.title)}
to={category.url}
>
<Button
as={Box}
boxShadow="0px 4px 4px rgba(73, 73, 73, 0.63)"
color="textPrimary"
colorScheme="gray"
size="md"
>
{category.title}
</Button>
</NavLink>
</WrapItem>
))}
</Wrap>
</Flex>
);
};
|