var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var C=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),u=(n,l)=>{for(var r in l)c(n,r,{get:l[r],enumerable:!0})},a=(n,l,r,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of y(l))!m.call(n,s)&&s!==r&&c(n,s,{get:()=>l[s],enumerable:!(o=h(l,s))||o.enumerable});return n};var F=(n,l,r)=>(r=n!=null?p(E(n)):{},a(l||!n||!n.__esModule?c(r,"default",{value:n,enumerable:!0}):r,n)),A=n=>a(c({},"__esModule",{value:!0}),n);var i=C((x,t)=>{t.exports=_jsx_runtime});var g={};u(g,{default:()=>b,frontmatter:()=>D});var e=F(i()),D={title:"Feedback",date:new Date(17264448e5),items:"1 Block",badge:"New"};function d(n){let l=Object.assign({p:"p",figure:"figure",pre:"pre",code:"code",span:"span",h4:"h4"},n.components),{ComponentPreview:r}=l;return r||v("ComponentPreview",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.p,{children:"Install the plugin from npm."}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-light",__rawString__:`npm i tailwindcss-primeui `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"github-light",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:" i"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:" tailwindcss-primeui"})]})})})}),` `,(0,e.jsx)(l.h4,{id:"feedback-motion",children:"Feedback Motion"}),` `,(0,e.jsx)(r,{name:"FeedbackMotion",children:(0,e.jsx)(l.figure,{__src__:"preview/blocks/components/feedback/FeedbackMotion.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-light",__rawString__:`import React from "react"; import { Button } from "primereact/button"; import { InputTextarea } from "primereact/inputtextarea"; import { Divider } from "primereact/divider"; import { Toast } from "primereact/toast"; import { useClickOutside } from "primereact/hooks"; export function FeedbackMotion() { const toast = React.useRef(null); const feedbackRef = React.useRef(null); const [message, setMessage] = React.useState(""); const [star, setStar] = React.useState(0); const [hoveredStar, setHoveredStar] = React.useState(0); const renderStars = (count: number) => Array.from({ length: count }).map((_, index) => ( )); const resetForm = () => { setMessage(""); setStar(0); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const isFeedbackComplete = star > 0 && message.trim(); toast.current?.show({ severity: isFeedbackComplete ? "success" : "warn", summary: isFeedbackComplete ? "Feedback Submitted" : "Incomplete Feedback", detail: isFeedbackComplete ? \`Your feedback: "\${message}" | Rating: \${star} star(s)\` : "Please provide feedback and a star rating.", life: 3000, }); isFeedbackComplete && resetForm(); }; useClickOutside(feedbackRef, resetForm); return (

Was this useful?
{renderStars(5)}

0 ? "animate-flipup h-40" : "animate-fadeout h-0" } animate-duration-[500ms] transition-[height] duration-500 overflow-hidden\`} > setMessage(e.target.value)} />

); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-light",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/button"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { InputTextarea } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/inputtextarea"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Divider } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/divider"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Toast } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/toast"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { useClickOutside } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/hooks"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" FeedbackMotion"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" toast"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Toast"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" feedbackRef"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"message"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"setMessage"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"star"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"setStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"hoveredStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"setHoveredStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" renderStars"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" number"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" Array."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"({ length: count })."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"_"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"index"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"button"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"button"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{index}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" onMouseEnter"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setHoveredStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(index "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(index "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" onMouseLeave"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setHoveredStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"i"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"`pi pi-star-fill text-lg mr-1 ${"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" star"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" >"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" index"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" hoveredStar"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" >"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" index"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "text-yellow-400"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "text-slate-200"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#032F62"},children:" }`"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ));"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" resetForm"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setMessage"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" };"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"FormEvent"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" e."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"preventDefault"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" isFeedbackComplete"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" star "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" &&"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" message."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"trim"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" toast.current?."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"show"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" severity: isFeedbackComplete "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "success"'}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "warn"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" summary: isFeedbackComplete"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "Feedback Submitted"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "Incomplete Feedback"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" detail: isFeedbackComplete"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' `Your feedback: "${'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"message"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'}" | Rating: ${'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"star"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"} star(s)`"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "Please provide feedback and a star rating."'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" life: "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"3000"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" });"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" isFeedbackComplete "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" resetForm"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"();"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" };"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" useClickOutside"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(feedbackRef, resetForm);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"min-h-60 relative"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Toast"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{toast} "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"position"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"bottom-right"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"!absolute"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{feedbackRef}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"inline-flex border items-center justify-center p-3 rounded-md"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{handleSubmit}>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"flex items-center"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"font-medium text-slate-500 mr-2"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" Was this useful?"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"mr-3"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"renderStars"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"5"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Button"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"submit"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Send"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"small"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"shrink-0"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"`${"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" star"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" >"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "animate-flipup h-40"'}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "animate-fadeout h-0"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#032F62"},children:" } animate-duration-[500ms] transition-[height] duration-500 overflow-hidden`"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Divider"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"InputTextarea"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" rows"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"4"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"w-full"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Please enter your feedback"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{message}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" onChange"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{("}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setMessage"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(e.target.value)}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})})})}),` `,(0,e.jsx)(l.h4,{id:"feedback-motion-with-popover",children:"Feedback Motion with Popover"}),` `,(0,e.jsx)(r,{name:"FeedbackMotionWithPopover",children:(0,e.jsx)(l.figure,{__src__:"preview/blocks/components/feedback/FeedbackMotionWithPopover.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-light",__rawString__:`import React from "react"; import { Button } from "primereact/button"; import { OverlayPanel } from "primereact/overlaypanel"; import { InputTextarea } from "primereact/inputtextarea"; import { Divider } from "primereact/divider"; import { Toast } from "primereact/toast"; export function FeedbackMotionWithPopover() { const op = React.useRef(null); const toast = React.useRef(null); const [message, setMessage] = React.useState(""); const [star, setStar] = React.useState(0); const [hoveredStar, setHoveredStar] = React.useState(0); const renderStars = (count: number) => Array.from({ length: count }).map((_, index) => ( )); const resetForm = () => { setMessage(""); setStar(0); op.current?.hide(); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const isfeedbackComplete = star > 0 && message.trim(); toast.current?.show({ severity: isfeedbackComplete ? "success" : "warn", summary: isfeedbackComplete ? "Feedback Submitted" : "Incomplete Feedback", detail: isfeedbackComplete ? \`Your feedback: "\${message}" | Rating: \${star} star(s)\` : "Please provide feedback and a star rating.", life: 3000, }); isfeedbackComplete && resetForm(); }; return (

0 ? "animate-flipup h-40" : "h-0" } animate-duration-[500ms] transition-[height] duration-500 overflow-hidden\`} > setMessage(e.target.value)} />
); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-light",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/button"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { OverlayPanel } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/overlaypanel"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { InputTextarea } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/inputtextarea"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Divider } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/divider"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Toast } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/toast"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" FeedbackMotionWithPopover"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" op"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"OverlayPanel"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" toast"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Toast"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"message"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"setMessage"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"star"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"setStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"hoveredStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"setHoveredStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" renderStars"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" number"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" Array."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"({ length: count })."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"_"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"index"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"button"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"button"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{index}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" onMouseEnter"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setHoveredStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(index "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(index "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" onMouseLeave"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setHoveredStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"i"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"`pi pi-star-fill text-lg mr-1 ${"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" star"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" >"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" index"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ||"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" hoveredStar"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" >"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" index"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' " text-yellow-400"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' " text-slate-200"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#032F62"},children:" }`"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ));"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" resetForm"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setMessage"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setStar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" op.current?."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"hide"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"();"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" };"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"FormEvent"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" e."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"preventDefault"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" isfeedbackComplete"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" star "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" &&"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" message."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"trim"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" toast.current?."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"show"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" severity: isfeedbackComplete "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "success"'}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "warn"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" summary: isfeedbackComplete"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "Feedback Submitted"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "Incomplete Feedback"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" detail: isfeedbackComplete"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' `Your feedback: "${'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"message"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'}" | Rating: ${'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"star"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"} star(s)`"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "Please provide feedback and a star rating."'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" life: "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"3000"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" });"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" isfeedbackComplete "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" resetForm"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"();"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" };"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"min-h-80 relative"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Toast"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{toast} "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"position"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"bottom-right"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"!absolute"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Button"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Feedback"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"small"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{("}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" op.current?."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"toggle"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(e)}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"OverlayPanel"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{op} "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"onHide"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{resetForm}>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{handleSubmit}>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"flex items-center"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"font-medium text-slate-500 mr-2"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" Was this useful?"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"mr-3"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"renderStars"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"5"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"submit"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Send"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"small"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"`${"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" star"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" >"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "animate-flipup h-40"'}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "h-0"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#032F62"},children:" } animate-duration-[500ms] transition-[height] duration-500 overflow-hidden`"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Divider"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"InputTextarea"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" rows"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"4"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"w-full"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Please enter your feedback"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{message}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" onChange"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{("}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" setMessage"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(e.target.value)}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})})})})]})}function f(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(d,n)})):d(n)}var b=f;function v(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return A(g);})(); ;return Component;