feedback tab

frontend/src/components/FeedbackButton.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import FeedbackModal from './FeedbackModal';
+
+const FeedbackButton: React.FC = () => {
+  const [showPanel, setShowPanel] = useState(false);
+
+  return (
+    <>
+      <button
+        className="feedback-tab"
+        onClick={() => setShowPanel(true)}
+        title="Send Feedback"
+        aria-label="Send Feedback"
+      >
+        <div className="feedback-tab-text">FEEDBACK</div>
+      </button>
+
+      <FeedbackModal show={showPanel} onClose={() => setShowPanel(false)} />
+
+      <style>{`
+        .feedback-tab {
+          position: fixed;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          z-index: 1000;
+          background-color: #0d6efd;
+          color: white;
+          border: none;
+          border-radius: 8px 0 0 8px;
+          padding: 16px 10px;
+          box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+          cursor: pointer;
+          transition: all 0.3s ease;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          writing-mode: vertical-rl;
+          text-orientation: mixed;
+        }
+
+        .feedback-tab:hover {
+          background-color: #0b5ed7;
+          padding-right: 14px;
+          box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
+        }
+
+        .feedback-tab:active {
+          background-color: #0a58ca;
+        }
+
+        .feedback-tab-text {
+          font-size: 14px;
+          font-weight: 600;
+          letter-spacing: 2px;
+          margin: 0;
+          transform: rotate(180deg);
+        }
+
+        @media (max-width: 768px) {
+          .feedback-tab {
+            padding: 12px 8px;
+          }
+
+          .feedback-tab-text {
+            font-size: 12px;
+            letter-spacing: 1px;
+          }
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default FeedbackButton;