From faf45237117bc8d6de19c62f4795c2c27d1da818 Mon Sep 17 00:00:00 2001
From: Denis Fadeev <denis@fadeev.org>
Date: Mon, 19 Aug 2024 10:04:15 +0300
Subject: [PATCH] Add feedback form link (#438)

---
 .../Icons/components/IconSpeechBubble.tsx     | 26 ++++++++++++++
 .../shared/components/Icons/index.ts          |  1 +
 .../components/PrevNextNavigationWrapper.tsx  | 34 +++++++++++++++----
 3 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 src/components/shared/components/Icons/components/IconSpeechBubble.tsx

diff --git a/src/components/shared/components/Icons/components/IconSpeechBubble.tsx b/src/components/shared/components/Icons/components/IconSpeechBubble.tsx
new file mode 100644
index 00000000..f76384fc
--- /dev/null
+++ b/src/components/shared/components/Icons/components/IconSpeechBubble.tsx
@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import { SVGProps } from "react";
+
+const IconSpeechBubble = <T extends unknown>({
+  color,
+  ...otherProps
+}: SVGProps<T, SVGSVGElement> & { color?: string }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...otherProps}
+    className={clsx(otherProps?.className, { "text-grey-400 dark:text-grey-300": !otherProps?.className })}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.75 4C2.75 3.58579 3.08579 3.25 3.5 3.25H19.5C21.0188 3.25 22.25 4.48122 22.25 6V16C22.25 16.4142 21.9142 16.75 21.5 16.75H14.8107L10.0303 21.5303C9.81583 21.7448 9.49324 21.809 9.21299 21.6929C8.93273 21.5768 8.75 21.3033 8.75 21V16.75H3.5C3.08579 16.75 2.75 16.4142 2.75 16V4ZM4.25 4.75V15.25H9.5C9.91421 15.25 10.25 15.5858 10.25 16V19.1893L13.9697 15.4697C14.1103 15.329 14.3011 15.25 14.5 15.25H20.75V6C20.75 5.30964 20.1904 4.75 19.5 4.75H4.25ZM7.75 10C7.75 9.58579 8.08579 9.25 8.5 9.25H8.51C8.92421 9.25 9.26 9.58579 9.26 10C9.26 10.4142 8.92421 10.75 8.51 10.75H8.5C8.08579 10.75 7.75 10.4142 7.75 10ZM11.75 10C11.75 9.58579 12.0858 9.25 12.5 9.25H12.51C12.9242 9.25 13.26 9.58579 13.26 10C13.26 10.4142 12.9242 10.75 12.51 10.75H12.5C12.0858 10.75 11.75 10.4142 11.75 10ZM15.75 10C15.75 9.58579 16.0858 9.25 16.5 9.25H16.51C16.9242 9.25 17.26 9.58579 17.26 10C17.26 10.4142 16.9242 10.75 16.51 10.75H16.5C16.0858 10.75 15.75 10.4142 15.75 10Z"
+      fill={color || "currentColor"}
+    />
+  </svg>
+);
+
+export { IconSpeechBubble };
diff --git a/src/components/shared/components/Icons/index.ts b/src/components/shared/components/Icons/index.ts
index 841e3d86..5d341f74 100644
--- a/src/components/shared/components/Icons/index.ts
+++ b/src/components/shared/components/Icons/index.ts
@@ -24,6 +24,7 @@ export * from "./components/IconReddit";
 export * from "./components/IconSearch";
 export * from "./components/IconServer";
 export * from "./components/IconSparkle";
+export * from "./components/IconSpeechBubble";
 export * from "./components/IconStaking";
 export * from "./components/IconSupport";
 export * from "./components/IconTelegram";
diff --git a/src/components/shared/components/Layout/components/PrevNextNavigationWrapper.tsx b/src/components/shared/components/Layout/components/PrevNextNavigationWrapper.tsx
index 88402c96..7c9f2c10 100644
--- a/src/components/shared/components/Layout/components/PrevNextNavigationWrapper.tsx
+++ b/src/components/shared/components/Layout/components/PrevNextNavigationWrapper.tsx
@@ -8,6 +8,7 @@ import { selectDirectoriesByRoute, selectFlatDirectories } from "~/lib/directori
 import { countRouteSegments, getValidParentDirectory } from "~/lib/helpers/nextra";
 
 import { IconArrowNarrowRight } from "../../Icons";
+import { IconSpeechBubble } from "../../Icons";
 import { NavigationSection } from "../../NavigationSection";
 import { mainNavRoutes } from "../Layout.constants";
 
@@ -128,13 +129,32 @@ export const PrevNextNavigationWrapper: React.FC<PrevNextNavigationWrapperProps>
       {children}
 
       {shouldRenderNextSection && (
-        <div className="mb-16 mt-20 sm:mt-[120px]">
-          <NavigationSection
-            title="Continue Learning"
-            description="Continue with the next part or try a related tutorial"
-            navItems={continueLearningNavItems}
-          />
-        </div>
+        <>
+          <div className="mb-16 mt-20 sm:mt-[120px]">
+            <NavigationSection
+              title="Continue Learning"
+              description="Continue with the next part or try a related tutorial"
+              navItems={continueLearningNavItems}
+            />
+          </div>
+          <div className="grid sm:grid-cols-1 lg:grid-cols-10 py-16">
+            <div className="col-span-6 flex justify-center relative">
+              <hr className="bg-grey-100 dark:bg-grey-700 z-0 h-px border-none absolute top-1/2 -translate-y-1/2 w-full" />
+              <div className="flex flex-col gap-4 bg-white px-4 dark:bg-grey-800 z-10 relative items-center justify-center">
+                <div className="text-grey-400 dark:text-grey-300">How's your journey with ZetaChain?</div>
+                <Link
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  href="https://zetachain.deform.cc/DevXfeedback"
+                  className="flex gap-1"
+                >
+                  <IconSpeechBubble className="dark:text-grey-300 text-grey-400" />
+                  <div className="text-[#00A5C6]">Let us know</div>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </>
       )}
     </>
   );