apache-airflow-providers-edge3 1.1.3__py3-none-any.whl → 1.2.0__py3-none-any.whl

airflow/providers/edge3/plugins/www/src/components/ErrorAlert.tsx

@@ -0,0 +1,66 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { HStack, Text } from "@chakra-ui/react";
+import type { ApiError } from "openapi-gen/requests/core/ApiError";
+import type { HTTPExceptionResponse, HTTPValidationError } from "openapi-gen/requests/types.gen";
+
+import { Alert } from "./ui";
+
+export type ExpandedApiError = {
+  body: HTTPExceptionResponse | HTTPValidationError | undefined;
+} & ApiError;
+
+type Props = {
+  readonly error?: unknown;
+};
+
+export const ErrorAlert = ({ error: err }: Props) => {
+  const error = err as ExpandedApiError;
+
+  // eslint-disable-next-line no-extra-boolean-cast
+  if (!Boolean(error)) {
+    return undefined;
+  }
+
+  const details = error.body?.detail;
+  let detailMessage;
+
+  if (details !== undefined) {
+    if (typeof details === "string") {
+      detailMessage = details;
+    } else if (Array.isArray(details)) {
+      detailMessage = details.map((detail) => `${detail.loc.join(".")} ${detail.msg}`);
+    } else {
+      detailMessage = Object.keys(details).map((key) => `${key}: ${details[key] as string}`);
+    }
+  }
+
+  return (
+    <Alert status="error">
+      <HStack align="start" flexDirection="column" gap={2} mt={-1}>
+        {error.status} {error.message}
+        {detailMessage === error.message ? undefined : (
+          <Text whiteSpace="preserve" wordBreak="break-all">
+            {detailMessage}
+          </Text>
+        )}
+      </HStack>
+    </Alert>
+  );
+};

airflow/providers/edge3/plugins/www/src/components/StateBadge.tsx

@@ -0,0 +1,43 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Badge, type BadgeProps } from "@chakra-ui/react";
+import type { TaskInstanceState } from "openapi/requests/types.gen";
+import * as React from "react";
+
+import { StateIcon } from "./StateIcon";
+
+export type Props = {
+  readonly state?: TaskInstanceState | null;
+} & BadgeProps;
+
+export const StateBadge = React.forwardRef<HTMLDivElement, Props>(({ children, state, ...rest }, ref) => (
+  <Badge
+    borderRadius="full"
+    colorPalette={state === null ? "none" : state}
+    fontSize="sm"
+    px={children === undefined ? 1 : 2}
+    py={1}
+    ref={ref}
+    variant="solid"
+    {...rest}
+  >
+    {state === undefined ? undefined : <StateIcon state={state} />}
+    {children}
+  </Badge>
+));

airflow/providers/edge3/plugins/www/src/components/StateIcon.tsx

@@ -0,0 +1,58 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { TaskInstanceState } from "openapi/requests/types.gen";
+import type { IconBaseProps } from "react-icons";
+import { FiActivity, FiCalendar, FiRepeat, FiSkipForward, FiSlash, FiWatch, FiX } from "react-icons/fi";
+import { LuCalendarSync, LuCheck, LuCircleDashed, LuCircleFadingArrowUp, LuRedo2 } from "react-icons/lu";
+import { PiQueue } from "react-icons/pi";
+
+type Props = {
+  readonly state?: TaskInstanceState | null;
+} & IconBaseProps;
+
+export const StateIcon = ({ state, ...rest }: Props) => {
+  switch (state) {
+    case "deferred":
+      return <FiWatch {...rest} />;
+    case "failed":
+      return <FiX {...rest} />;
+    case "queued":
+      return <PiQueue {...rest} />;
+    case "removed":
+      return <FiSlash {...rest} />;
+    case "restarting":
+      return <FiRepeat {...rest} />;
+    case "running":
+      return <FiActivity {...rest} />;
+    case "scheduled":
+      return <FiCalendar {...rest} />;
+    case "skipped":
+      return <FiSkipForward {...rest} />;
+    case "success":
+      return <LuCheck {...rest} />;
+    case "up_for_reschedule":
+      return <LuCalendarSync {...rest} />;
+    case "up_for_retry":
+      return <LuRedo2 {...rest} />;
+    case "upstream_failed":
+      return <LuCircleFadingArrowUp {...rest} />;
+    default:
+      return <LuCircleDashed {...rest} />;
+  }
+};

airflow/providers/edge3/plugins/www/src/components/WorkerStateBadge.tsx

@@ -0,0 +1,71 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Badge, type BadgeProps } from "@chakra-ui/react";
+import type { EdgeWorkerState } from "openapi/requests/types.gen";
+import * as React from "react";
+
+import { WorkerStateIcon } from "./WorkerStateIcon";
+
+const state2Color = (state: EdgeWorkerState | null | undefined) => {
+  switch (state) {
+    case "starting":
+    case "maintenance request":
+    case "maintenance exit":
+      return "yellow";
+    case "running":
+      return "green";
+    case "idle":
+      return "teal";
+    case "shutdown request":
+    case "terminating":
+      return "purple";
+    case "offline":
+    case "offline maintenance":
+      return "black";
+    case "unknown":
+      return "red";
+    case "maintenance mode":
+    case "maintenance pending":
+      return "orange";
+    default:
+      return "gray";
+  }
+};
+
+export type Props = {
+  readonly state?: EdgeWorkerState | null;
+} & BadgeProps;
+
+export const WorkerStateBadge = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, state, ...rest }, ref) => (
+    <Badge
+      borderRadius="full"
+      colorPalette={state2Color(state)}
+      fontSize="sm"
+      px={children === undefined ? 1 : 2}
+      py={1}
+      ref={ref}
+      variant="solid"
+      {...rest}
+    >
+      {state === undefined ? undefined : <WorkerStateIcon state={state} />}
+      {children}
+    </Badge>
+  ),
+);

airflow/providers/edge3/plugins/www/src/components/WorkerStateIcon.tsx

@@ -0,0 +1,57 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { EdgeWorkerState } from "openapi/requests/types.gen";
+import type { IconBaseProps } from "react-icons";
+import { BiSolidLeaf } from "react-icons/bi";
+import { FiActivity, FiArrowDownRight, FiWatch } from "react-icons/fi";
+import { HiOutlineWrench, HiOutlineWrenchScrewdriver } from "react-icons/hi2";
+import { IoCloudOfflineOutline } from "react-icons/io5";
+import { LuCircleDashed } from "react-icons/lu";
+import { RiWifiOffLine } from "react-icons/ri";
+
+type Props = {
+  readonly state?: EdgeWorkerState | null;
+} & IconBaseProps;
+
+export const WorkerStateIcon = ({ state, ...rest }: Props) => {
+  switch (state) {
+    case "starting":
+      return <FiWatch {...rest} />;
+    case "running":
+      return <FiActivity {...rest} />;
+    case "idle":
+      return <BiSolidLeaf {...rest} />;
+    case "shutdown request":
+    case "terminating":
+      return <FiArrowDownRight {...rest} />;
+    case "offline":
+      return <IoCloudOfflineOutline {...rest} />;
+    case "unknown":
+      return <RiWifiOffLine {...rest} />;
+    case "maintenance request":
+    case "maintenance pending":
+    case "maintenance exit":
+      return <HiOutlineWrench {...rest} />;
+    case "maintenance mode":
+    case "offline maintenance":
+      return <HiOutlineWrenchScrewdriver {...rest} />;
+    default:
+      return <LuCircleDashed {...rest} />;
+  }
+};

airflow/providers/edge3/plugins/www/src/components/ui/Alert.tsx

@@ -0,0 +1,62 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* eslint-disable no-extra-boolean-cast */
+import { Alert as ChakraAlert } from "@chakra-ui/react";
+import { forwardRef } from "react";
+
+import { CloseButton } from "./CloseButton";
+
+export type AlertProps = {
+  readonly closable?: boolean;
+  readonly endElement?: React.ReactNode;
+  readonly icon?: React.ReactElement;
+  readonly onClose?: () => void;
+  readonly startElement?: React.ReactNode;
+  readonly title?: React.ReactNode;
+} & Omit<ChakraAlert.RootProps, "title">;
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  const { children, closable, endElement, icon, onClose, startElement, title, ...rest } = props;
+
+  return (
+    <ChakraAlert.Root ref={ref} {...rest} alignItems="center">
+      {startElement ?? <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
+      {Boolean(children) ? (
+        <ChakraAlert.Content>
+          <ChakraAlert.Title>{title}</ChakraAlert.Title>
+          <ChakraAlert.Description>{children}</ChakraAlert.Description>
+        </ChakraAlert.Content>
+      ) : (
+        <ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
+      )}
+      {endElement}
+      {Boolean(closable) ? (
+        <CloseButton
+          alignSelf="flex-start"
+          insetEnd="-2"
+          onClick={onClose}
+          pos="relative"
+          size="sm"
+          top="-2"
+        />
+      ) : undefined}
+    </ChakraAlert.Root>
+  );
+});

airflow/providers/edge3/plugins/www/src/components/ui/CloseButton.tsx

@@ -0,0 +1,32 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { ButtonProps as ChakraCloseButtonProps } from "@chakra-ui/react";
+import { IconButton as ChakraIconButton } from "@chakra-ui/react";
+import { forwardRef } from "react";
+import { LuX } from "react-icons/lu";
+
+export type CloseButtonProps = {} & ChakraCloseButtonProps;
+
+export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>((props, ref) => {
+  return (
+    <ChakraIconButton aria-label="Close" ref={ref} variant="ghost" {...props}>
+      {props.children ?? <LuX />}
+    </ChakraIconButton>
+  );
+});

airflow/providers/edge3/plugins/www/src/components/ui/index.ts

@@ -0,0 +1,20 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from "./Alert";

airflow/providers/edge3/plugins/www/src/context/colorMode/ColorModeProvider.tsx

@@ -0,0 +1,24 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ThemeProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes/dist/types";
+
+export const ColorModeProvider = (props: ThemeProviderProps) => (
+  <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
+);

airflow/providers/edge3/plugins/www/src/context/colorMode/index.ts

@@ -0,0 +1,21 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from "./ColorModeProvider";
+export * from "./useColorMode";

airflow/providers/edge3/plugins/www/src/context/colorMode/useColorMode.tsx

@@ -0,0 +1,32 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useTheme } from "next-themes";
+
+export const useColorMode = () => {
+  const { resolvedTheme, setTheme } = useTheme();
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
+  };
+
+  return {
+    colorMode: resolvedTheme as "dark" | "light" | undefined,
+    setColorMode: setTheme,
+    toggleColorMode,
+  };
+};

airflow/providers/edge3/plugins/www/src/dev.tsx

@@ -0,0 +1,29 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import PluginComponent from "./main";
+
+// Development entry point for testing the component
+createRoot(document.querySelector("#root") as HTMLDivElement).render(
+  <StrictMode>
+    <PluginComponent />
+  </StrictMode>,
+);

airflow/providers/edge3/plugins/www/src/layouts/EdgeLayout.tsx

@@ -0,0 +1,44 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box } from "@chakra-ui/react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+
+import { JobsPage } from "src/pages/JobsPage";
+import { WorkerPage } from "src/pages/WorkerPage";
+
+import { NavTabs } from "./NavTabs";
+
+export const EdgeLayout = () => {
+  const tabs = [
+    { label: "Edge Worker", value: "plugin/edge_worker" },
+    { label: "Edge Jobs", value: "plugin/edge_jobs" },
+  ];
+
+  return (
+    <Box p={2} /* Compensate for parent padding from ExternalView */>
+      <BrowserRouter>
+        <NavTabs tabs={tabs} />
+        <Routes>
+          <Route path="plugin/edge_worker" element={<WorkerPage />} />
+          <Route path="plugin/edge_jobs" element={<JobsPage />} />
+        </Routes>
+      </BrowserRouter>
+    </Box>
+  );
+};

airflow/providers/edge3/plugins/www/src/layouts/NavTabs.tsx

@@ -0,0 +1,63 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Center, Flex } from "@chakra-ui/react";
+import { useRef, type ReactNode } from "react";
+import { NavLink } from "react-router-dom";
+
+import { useContainerWidth } from "src/utils";
+
+type Props = {
+  readonly tabs: Array<{ icon?: ReactNode; label: string; value: string }>;
+};
+
+export const NavTabs = ({ tabs }: Props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerWidth = useContainerWidth(containerRef);
+
+  return (
+    <Flex alignItems="center" borderBottomWidth={1} mb={2} ref={containerRef}>
+      {tabs.map(({ icon, label, value }) => (
+        <NavLink
+          end
+          key={value}
+          title={label}
+          to={{
+            pathname: value,
+          }}
+        >
+          {({ isActive }) => (
+            <Center
+              borderBottomColor="border.info"
+              borderBottomWidth={isActive ? 3 : 0}
+              color={isActive ? "fg" : "fg.muted"}
+              fontWeight="bold"
+              height="40px"
+              mb="-2px" // Show the border on top of its parent's border
+              pb={isActive ? 0 : "3px"}
+              px={4}
+              transition="all 0.2s ease"
+            >
+              {containerWidth > 600 || !icon ? label : icon}
+            </Center>
+          )}
+        </NavLink>
+      ))}
+    </Flex>
+  );
+};