Skip to content

Commit 6438524

Browse files
PoojaB26PoojaB26
committed
Update feedback to thumbs up/thumbs down approach
1 parent 3546eeb commit 6438524

File tree

1 file changed

+83
-54
lines changed

1 file changed

+83
-54
lines changed

‎src/components/Feedback/index.js

Lines changed: 83 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React, { useState } from 'react';
1+
import React, {useState} from 'react';
22

33
const Feedback = () => {
44
const [feedback, setFeedback] = useState(null);
55
const [showTextBox, setShowTextBox] = useState(false);
66
const [textBoxContent, setTextBoxContent] = useState('');
7+
const [submitted, setSubmitted] = useState(false);
78

89
const handleFeedback = (type) => {
910
setFeedback(type);
@@ -28,69 +29,97 @@ const Feedback = () => {
2829
feedback_text: text,
2930
});
3031
}
32+
setSubmitted(true);
3133
};
3234

3335
const handleSubmit = () => {
3436
sendFeedback(feedback, textBoxContent);
3537
setShowTextBox(false);
3638
setTextBoxContent('');
37-
alert('Thank you for your feedback!');
3839
};
3940

4041
return (
4142
<div style={{ textAlign: 'left', marginBottom: '2vh' }}>
42-
<div style={{fontSize: '12px'}}>Was the content helpful?</div>
43-
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
44-
<div
45-
onClick={() => handleFeedback('thumbs_up')}
46-
style={{
47-
cursor: 'pointer',
48-
color: feedback === 'thumbs_up' ? 'green' : 'gray',
49-
fontSize: '24px',
50-
}}
51-
>
52-
👍
53-
</div>
54-
<div
55-
onClick={() => handleFeedback('thumbs_down')}
56-
style={{
57-
cursor: 'pointer',
58-
color: feedback === 'thumbs_down' ? 'red' : 'gray',
59-
fontSize: '24px',
60-
}}
61-
>
62-
👎
63-
</div>
64-
</div>
65-
{showTextBox && (
66-
<div style={{ marginTop: '20px' }}>
67-
<textarea
68-
value={textBoxContent}
69-
onChange={handleTextBoxChange}
70-
placeholder="Please let us know why you didn't find the content helpful."
71-
style={{
72-
width: '100%',
73-
height: '100px',
74-
padding: '10px',
75-
borderColor: 'lightgray',
76-
}}
77-
/>
78-
<button
79-
onClick={handleSubmit}
80-
style={{
81-
marginTop: '10px',
82-
padding: '10px 20px',
83-
backgroundColor: 'var(--ifm-color-primary)',
84-
color: 'white',
85-
border: 'none',
86-
cursor: 'pointer',
87-
fontFamily: 'var(--ifm-font-family-base)',
88-
borderRadius: '8px', // Rounded edges
89-
}}
90-
>
91-
Send
92-
</button>
93-
</div>
43+
{!submitted ? (
44+
<>
45+
<p style={{ fontWeight: 'bold' }}>Was this article helpful?</p>
46+
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
47+
<button
48+
onClick={() => handleFeedback('thumbs_up')}
49+
style={{
50+
display: 'flex',
51+
alignItems: 'center',
52+
justifyContent: 'center',
53+
cursor: 'pointer',
54+
color: feedback === 'thumbs_up' ? 'var(--ifm-color-primary)' : 'gray',
55+
backgroundColor: '#f0f0f0',
56+
border: '1px #f0f0f0',
57+
borderRadius: '8px',
58+
padding: '10px 20px',
59+
fontSize: '16px',
60+
fontFamily: 'var(--ifm-font-family-base)',
61+
gap: '5px',
62+
}}
63+
>
64+
👍 Yes
65+
</button>
66+
<button
67+
onClick={() => handleFeedback('thumbs_down')}
68+
style={{
69+
display: 'flex',
70+
alignItems: 'center',
71+
justifyContent: 'center',
72+
cursor: 'pointer',
73+
color: feedback === 'thumbs_down' ? 'var(--ifm-color-primary)' : 'gray',
74+
backgroundColor: '#f0f0f0',
75+
border: '1px #f0f0f0',
76+
borderRadius: '8px',
77+
padding: '10px 20px',
78+
fontSize: '16px',
79+
fontFamily: 'var(--ifm-font-family-base)',
80+
gap: '5px',
81+
}}
82+
>
83+
👎 No
84+
</button>
85+
</div>
86+
{showTextBox && (
87+
<div style={{ marginTop: '20px' }}>
88+
<textarea
89+
value={textBoxContent}
90+
onChange={handleTextBoxChange}
91+
placeholder="How can we make it better?"
92+
style={{
93+
width: '100%',
94+
height: '100px',
95+
padding: '10px',
96+
borderColor: 'lightgray',
97+
borderRadius: '8px',
98+
fontFamily: 'var(--ifm-font-family-base)',
99+
}}
100+
/>
101+
<button
102+
onClick={handleSubmit}
103+
style={{
104+
marginTop: '10px',
105+
padding: '10px 20px',
106+
backgroundColor: 'var(--ifm-color-primary)',
107+
color: 'white',
108+
border: 'none',
109+
cursor: 'pointer',
110+
fontFamily: 'var(--ifm-font-family-base)',
111+
borderRadius: '8px',
112+
}}
113+
>
114+
Submit Feedback
115+
</button>
116+
</div>
117+
)}
118+
</>
119+
) : (
120+
<p style={{ fontWeight: 'bold', color: 'var(--ifm-color-primary)' }}>
121+
Thank you for your feedback!
122+
</p>
94123
)}
95124
</div>
96125
);

0 commit comments

Comments
 (0)