76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
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;
|