mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2025-12-30 18:30:32 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

Refactor SatisfactionSmiley to use a simple div with color classes

Browse Source 
Co-authored-by: johannes <johannes@formbricks.com>
This commit is contained in:
Cursor Agent
2025-11-17 09:41:58 +00:00
parent 8dfdb084aa
commit acaeeeff07
2 changed files with 8 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx
View File

@@ -78,7 +78,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
<div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
<SatisfactionSmiley percentage={questionSummary.promoters.percentage} />
<div>
% {t("environments.surveys.summary.promoters")}:{" "}
{t("environments.surveys.summary.promoters")}:{" "}
{convertFloatToNDecimal(questionSummary.promoters.percentage, 2)}%
</div>
</div>

135
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SatisfactionSmiley.tsx
View File

@@ -3,137 +3,16 @@ interface SatisfactionSmileyProps {
className?: string;
}
const TiredFace = ({ className }: { className?: string }) => (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" className={className}>
<g id="line">
<circle
cx="36"
cy="36"
r="23"
fill="currentColor"
stroke="currentColor"
strokeMiterlimit="10"
strokeWidth="2"
/>
<path
fill="none"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="2"
d="m21.88 23.92c5.102-0.06134 7.273-1.882 8.383-3.346"
/>
<path
fill="white"
stroke="white"
strokeMiterlimit="10"
strokeWidth="2"
d="m46.24 47.56c0-2.592-2.867-7.121-10.25-6.93-6.974 0.1812-10.22 4.518-10.22 7.111s4.271-1.611 10.05-1.492c6.317 0.13 10.43 3.903 10.43 1.311z"
/>
<path
fill="none"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="2"
d="m23.16 28.47c5.215 1.438 5.603 0.9096 8.204 1.207 1.068 0.1221-2.03 2.67-7.282 4.397"
/>
<path
fill="none"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="2"
d="m50.12 23.92c-5.102-0.06134-7.273-1.882-8.383-3.346"
/>
<path
fill="none"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="2"
d="m48.84 28.47c-5.215 1.438-5.603 0.9096-8.204 1.207-1.068 0.1221 2.03 2.67 7.282 4.397"
/>
</g>
</svg>
);
const SlightlySmilingFace = ({ className }: { className?: string }) => (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" className={className}>
<g id="line">
<circle
cx="36"
cy="36"
r="23"
fill="currentColor"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
fill="none"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M45.8149,44.9293 c-2.8995,1.6362-6.2482,2.5699-9.8149,2.5699s-6.9153-0.9336-9.8149-2.5699"
/>
<path
fill="white"
d="M30,31c0,1.6568-1.3448,3-3,3c-1.6553,0-3-1.3433-3-3c0-1.6552,1.3447-3,3-3C28.6552,28,30,29.3448,30,31"
/>
<path
fill="white"
d="M48,31c0,1.6568-1.3447,3-3,3s-3-1.3433-3-3c0-1.6552,1.3447-3,3-3S48,29.3448,48,31"
/>
</g>
</svg>
);
const SmilingFace = ({ className }: { className?: string }) => (
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" className={className}>
<g id="line">
<circle
cx="36"
cy="36"
r="23"
fill="currentColor"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
fill="none"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M45.8149,44.9293 c-2.8995,1.6362-6.2482,2.5699-9.8149,2.5699s-6.9153-0.9336-9.8149-2.5699"
/>
<path
fill="white"
d="M30,31c0,1.6568-1.3448,3-3,3c-1.6553,0-3-1.3433-3-3c0-1.6552,1.3447-3,3-3C28.6552,28,30,29.3448,30,31"
/>
<path
fill="white"
d="M48,31c0,1.6568-1.3447,3-3,3s-3-1.3433-3-3c0-1.6552,1.3447-3,3-3S48,29.3448,48,31"
/>
</g>
</svg>
);
export const SatisfactionSmiley = ({ percentage, className }: SatisfactionSmileyProps) => {
let colorClass = "";
if (percentage > 80) {
return <SmilingFace className={`h-4 w-4 text-emerald-500 ${className || ""}`} />;
colorClass = "bg-emerald-500";
} else if (percentage >= 55) {
return <SlightlySmilingFace className={`h-4 w-4 text-orange-500 ${className || ""}`} />;
colorClass = "bg-orange-500";
} else {
return <TiredFace className={`h-4 w-4 text-rose-500 ${className || ""}`} />;
colorClass = "bg-rose-500";
}
return <div className={`h-3 w-3 rounded-full ${colorClass} ${className || ""}`} />;
};