docs: create docs workspace (#5174)
* docs: migrate ui docs to docs universe * created yarn workspace * added eslint and tsconfig configurations * fix eslint configurations * fixed eslint configurations * shared tailwind configurations * added shared ui package * added more shared components * migrating more components * made details components shared * move InlineCode component * moved InputText * moved Loading component * Moved Modal component * moved Select components * Moved Tooltip component * moved Search components * moved ColorMode provider * Moved Notification components and providers * used icons package * use UI colors in api-reference * moved Navbar component * used Navbar and Search in UI docs * added Feedback to UI docs * general enhancements * fix color mode * added copy colors file from ui-preset * added features and enhancements to UI docs * move Sidebar component and provider * general fixes and preparations for deployment * update docusaurus version * adjusted versions * fix output directory * remove rootDirectory property * fix yarn.lock * moved code component * added vale for all docs MD and MDX * fix tests * fix vale error * fix deployment errors * change ignore commands * add output directory * fix docs test * general fixes * content fixes * fix announcement script * added changeset * fix vale checks * added nofilter option * fix vale error
This commit is contained in:
83
www/apps/api-reference/components/DetailedFeedback/index.tsx
Normal file
83
www/apps/api-reference/components/DetailedFeedback/index.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Label, TextArea, useAnalytics, useModal, ModalFooter } from "docs-ui"
|
||||
|
||||
const DetailedFeedback = () => {
|
||||
const [improvementFeedback, setImprovementFeedback] = useState("")
|
||||
const [positiveFeedback, setPositiveFeedback] = useState("")
|
||||
const [additionalFeedback, setAdditionalFeedback] = useState("")
|
||||
const { loaded, track } = useAnalytics()
|
||||
const { closeModal } = useModal()
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-1 overflow-auto py-1.5 px-2 lg:min-h-[400px]">
|
||||
<div className="flex flex-col gap-1">
|
||||
<Label>What should be improved in this API reference?</Label>
|
||||
<TextArea
|
||||
rows={4}
|
||||
value={improvementFeedback}
|
||||
onChange={(e) => setImprovementFeedback(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Label>Is there a feature you like in this API reference?</Label>
|
||||
<TextArea
|
||||
rows={4}
|
||||
value={positiveFeedback}
|
||||
onChange={(e) => setPositiveFeedback(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Label>Do you have any additional notes or feedback?</Label>
|
||||
<TextArea
|
||||
rows={4}
|
||||
value={additionalFeedback}
|
||||
onChange={(e) => setAdditionalFeedback(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ModalFooter
|
||||
actions={[
|
||||
{
|
||||
children: "Save",
|
||||
onClick: (e) => {
|
||||
if (
|
||||
!loaded ||
|
||||
(!improvementFeedback &&
|
||||
!positiveFeedback &&
|
||||
!additionalFeedback)
|
||||
) {
|
||||
return
|
||||
}
|
||||
const buttonElm = e.target as HTMLButtonElement
|
||||
buttonElm.classList.add("cursor-not-allowed")
|
||||
buttonElm.textContent = "Please wait"
|
||||
track(
|
||||
"api-ref-general-feedback",
|
||||
{
|
||||
feedbackData: {
|
||||
improvementFeedback,
|
||||
positiveFeedback,
|
||||
additionalFeedback,
|
||||
},
|
||||
},
|
||||
function () {
|
||||
buttonElm.textContent = "Thank you!"
|
||||
setTimeout(() => {
|
||||
closeModal()
|
||||
}, 1000)
|
||||
}
|
||||
)
|
||||
},
|
||||
variant: "primary",
|
||||
},
|
||||
]}
|
||||
className="mt-1"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DetailedFeedback
|
||||
Reference in New Issue
Block a user