add feedback buttons (#128)

---------

Co-authored-by: Vega <[email protected]>

src/components/Feedback/index.js

@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import { useLocation } from 'react-router-dom';
+
+export default function FeedbackComponent() {
+    const location = useLocation();
+    const handleFeedback = (feedback) => {
+      const articleUrl = location.pathname;
+      if (typeof window !== 'undefined' && window.gtag) {
+        window.gtag('event', 'feedback_click', {
+          event_category: 'Feedback',
+          event_label: `Feedback Type: ${feedback}`, 
+          event_value: articleUrl, 
+        });
+      }
+    };
+
+    return (
+      <BrowserOnly>
+      {() => {
+        const Feedback = require('@teradata-web/react-components')?.Feedback;
+
+        return (
+          <div className={clsx(styles.feedbackContainer)}>
+            <Feedback 
+              label="Did this page help?"
+              labelForFeedback="Thank you for your feedback!"
+              onFeedBack={handleFeedback}  
+            />       
+          </div>
+        );
+      }}
+    </BrowserOnly>
+    );
+}

src/components/Feedback/styles.module.css

@@ -0,0 +1,33 @@
+.feedbackContainer {
+  width: 100%;          
+  max-width: 664px;       
+  padding: 10px 0;       
+  box-sizing: border-box;  
+}
+
+@media screen and (min-width: 997px) and (max-width: 1454px) {
+  .feedbackContainer {
+    width: 80%;
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .feedbackContainer {
+    max-width: 100%;      
+    padding: 10px 0 10px 0;  
+  }
+}
+
+
+@media screen and (max-width: 664px) {
+  .feedbackContainer {
+    padding: 0 15px 10px 15px;  
+  }
+}
+
+@media screen and (max-width: 663px) {
+  .feedbackContainer {
+    padding: 10px 0px;
+  }
+}
+

src/theme/DocItem/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import DocItem from '@theme-original/DocItem';
+import type DocItemType from '@theme/DocItem';
+import type {WrapperProps} from '@docusaurus/types';
+import FeedbackComponent from '../../components/Feedback';
+
+type Props = WrapperProps<typeof DocItemType>;
+
+export default function DocItemWrapper(props: Props): JSX.Element {
+  return (
+    <>
+      <DocItem {...props} />
+      <FeedbackComponent />
+    </>
+  );
+}
+
+