mirror of
https://github.com/formbricks/formbricks.git
synced 2026-05-08 02:43:06 -05:00
Add PMF dashboard to Formbricks App (#189)
* add PMF results dashboard * add PMF Segmentation View * add PMF setup instructions * Built new Filter Navigation that is also used in Feedback Co-authored-by: knugget <johannes@knugget.de>
This commit is contained in:
Matti Nannt
@@ -0,0 +1,107 @@
|
||||
import { useMemo } from "react";
|
||||
import { Pie, PieChart } from "recharts";
|
||||
|
||||
interface Props {
|
||||
color?: string;
|
||||
submissions: any;
|
||||
schema: any;
|
||||
fieldName: string;
|
||||
}
|
||||
|
||||
export function FbPie({ color, submissions, schema, fieldName }: Props) {
|
||||
const data = useMemo(() => {
|
||||
if (!fieldName) {
|
||||
throw Error("no field name provided");
|
||||
}
|
||||
if (!submissions || !schema || Object.keys(schema).length === 0) {
|
||||
return [];
|
||||
}
|
||||
// build data object by finding schema definition of field and scanning submissions for this key
|
||||
const dataDict: any = {};
|
||||
let schemaElem;
|
||||
for (const pages of schema.pages) {
|
||||
for (const elem of pages.elements) {
|
||||
if (elem.name === fieldName) {
|
||||
schemaElem = elem;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (typeof schemaElem === "undefined") {
|
||||
throw Error("key not found in schema");
|
||||
}
|
||||
if (!("options" in schemaElem)) {
|
||||
throw Error(`No options found for element "${schemaElem.name}"`);
|
||||
}
|
||||
for (const option of schemaElem.options) {
|
||||
dataDict[option.value] = { name: option.label, value: 0 };
|
||||
}
|
||||
for (const submission of submissions) {
|
||||
if (fieldName in submission.data) {
|
||||
// if submission value is array (checkboxes)
|
||||
if (Array.isArray(submission.data[fieldName])) {
|
||||
for (const value of submission.data[fieldName]) {
|
||||
if (value in dataDict) {
|
||||
dataDict[value] = {
|
||||
...dataDict[value],
|
||||
value: dataDict[value].value + 1,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
// if submission value is string (radio buttons)
|
||||
else if (typeof submission.data[fieldName] == "string") {
|
||||
if (submission.data[fieldName] in dataDict) {
|
||||
dataDict[submission.data[fieldName]] = {
|
||||
...dataDict[submission.data[fieldName]],
|
||||
value: dataDict[submission.data[fieldName]].value + 1,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// transform dataDict to desired form
|
||||
const data = [];
|
||||
for (const entry of Object.entries(dataDict)) {
|
||||
data.push(entry[1]);
|
||||
}
|
||||
return data;
|
||||
}, [submissions, schema]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PieChart width={400} height={250}>
|
||||
{/* <Pie dataKey="value" fill={color || "#00C4B8"} /> */}
|
||||
<Pie
|
||||
data={data}
|
||||
dataKey="value"
|
||||
nameKey="name"
|
||||
outerRadius={50}
|
||||
fill={color || "#00C4B8"}
|
||||
label={({ cx, cy, midAngle, innerRadius, outerRadius, value, index }) => {
|
||||
const RADIAN = Math.PI / 180;
|
||||
const radius = 25 + innerRadius + (outerRadius - innerRadius);
|
||||
const x = cx + radius * Math.cos(-midAngle * RADIAN);
|
||||
const y = cy + radius * Math.sin(-midAngle * RADIAN);
|
||||
|
||||
return (
|
||||
<text
|
||||
x={x}
|
||||
y={y}
|
||||
fill={color || "#00C4B8"}
|
||||
fontSize={12}
|
||||
textAnchor={x > cx ? "start" : "end"}
|
||||
dominantBaseline="central">
|
||||
{/*
|
||||
// @ts-ignore */}
|
||||
{data[index].name} ({value})
|
||||
</text>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</PieChart>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export { FbPie as Pie };
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from "./charts/Bar";
|
||||
export * from "./charts/Nps";
|
||||
export * from "./charts/Pie";
|
||||
export * from "./charts/Table";
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
-- AlterEnum
|
||||
ALTER TYPE "FormType" ADD VALUE 'pmf';
|
||||
@@ -51,6 +51,7 @@ model Customer {
|
||||
enum FormType {
|
||||
custom
|
||||
feedback
|
||||
pmf
|
||||
}
|
||||
|
||||
model Form {
|
||||
|
||||
@@ -1 +1 @@
|
||||
export const formHtml = `<div id="formbricks-content"><div id="formbricks-form"><div class="formbricks-element" id="formbricks-question-0"><p class="formbricks-element-label">How disappointed would you be if you could no longer use our service?</p><fieldset class="formbricks-radio-fieldset"><legend class="formbricks-sr-only">Disappointment options</legend><div class="formbricks-radio-options"><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="veryDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">very disappointed</label></div><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="somehowDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">somewhat disappointed</label></div><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="notDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">not disappointed</label></div></div></fieldset></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-1"><p class="formbricks-element-label">What is the main benefit you receive from our service?</p><form class="formbricks-form" data-element-name="benefit"><textarea rows="4" name="benefit" class="formbricks-textarea" required></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Next</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-2"><p class="formbricks-element-label">What is your job title?</p><fieldset class="formbricks-radio-fieldset"><legend class="formbricks-sr-only">Job title options</legend><div class="formbricks-radio-options"><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="founder"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Founder</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="executive"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Executive</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="productManager"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Product Manager</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="productOwner"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Product Owner</label></div><div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="softwareEngineer"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Software Engineer</label></div></div></fieldset></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-3"><p class="formbricks-element-label">How can we improve our service for you?</p><form class="formbricks-form" data-element-name="howImprove"><textarea rows="4" name="howImprove" class="formbricks-textarea" required></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Next</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-4"><p class="formbricks-element-label">What type of people would benefit most from using our service?</p><form class="formbricks-form" data-element-name="idealCustomer"><textarea rows="4" name="idealCustomer" class="formbricks-textarea" required></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Submit</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-5"><p class="formbricks-thankyou-icon">❤️</p><p class="formbricks-thankyou-title">Thank you!</p><p class="formbricks-thankyou-subtitle">Your feedback helps us improve our service for you.</p></div></div></div><div id="formbricks-progressbar-wrapper"><div class="formbricks-progressbar"><div class="formbricks-progressbar-item formbricks-progressbar-item-current"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div></div></div>`;
|
||||
export const formHtml = `<div id="formbricks-content"><div id="formbricks-form"><div class="formbricks-element" id="formbricks-question-0"><p class="formbricks-element-label">How disappointed would you be if you could no longer use our service?</p><fieldset class="formbricks-radio-fieldset"><legend class="formbricks-sr-only">Disappointment options</legend><div class="formbricks-radio-options"><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="veryDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">very disappointed</label></div><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="somewhatDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">somewhat disappointed</label></div><div class="formbricks-radio-option" data-element-name="disappointment" data-element-value="notDisappointed"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">not disappointed</label></div></div></fieldset></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-1"><p class="formbricks-element-label">What is the main benefit you receive from our service?</p><form class="formbricks-form" data-element-name="mainBenefit"><textarea rows="4" name="mainBenefit" class="formbricks-textarea" required></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Next</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-2"><p class="formbricks-element-label">What is your job title?</p><fieldset class="formbricks-radio-fieldset"><legend class="formbricks-sr-only">Job title options</legend><div class="formbricks-radio-options"><div class="formbricks-radio-option" data-element-name="userSegment" data-element-value="founder"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Founder</label></div><div class="formbricks-radio-option" data-element-name="userSegment" data-element-value="executive"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Executive</label></div><div class="formbricks-radio-option" data-element-name="userSegment" data-element-value="productManager"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Product Manager</label></div><div class="formbricks-radio-option" data-element-name="userSegment" data-element-value="productOwner"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Product Owner</label></div><div class="formbricks-radio-option" data-element-name="userSegment" data-element-value="softwareEngineer"><input name="notification-method" type="radio" class="formbricks-radio-input"><label class="formbricks-radio-label">Software Engineer</label></div></div></fieldset></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-3"><p class="formbricks-element-label">How can we improve our service for you?</p><form class="formbricks-form" data-element-name="improvement"><textarea rows="4" name="improvement" class="formbricks-textarea" required></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Next</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-4"><p class="formbricks-element-label">What type of people would benefit most from using our service?</p><form class="formbricks-form" data-element-name="selfSegmentation"><textarea rows="4" name="selfSegmentation" class="formbricks-textarea" required></textarea><div class="formbricks-next-button-wrapper"><button type="submit" class="formbricks-next-button">Submit</button></div></form></div><div class="formbricks-element formbricks-hidden" id="formbricks-question-5"><p class="formbricks-thankyou-icon">❤️</p><p class="formbricks-thankyou-title">Thank you!</p><p class="formbricks-thankyou-subtitle">Your feedback helps us improve our service for you.</p></div></div></div><div id="formbricks-progressbar-wrapper"><div class="formbricks-progressbar"><div class="formbricks-progressbar-item formbricks-progressbar-item-current"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div><div class="formbricks-progressbar-item"></div></div></div>`;
|
||||
@@ -17,7 +17,7 @@
|
||||
<div
|
||||
class="formbricks-radio-option"
|
||||
data-element-name="disappointment"
|
||||
data-element-value="somehowDisappointed">
|
||||
data-element-value="somewhatDisappointed">
|
||||
<input name="notification-method" type="radio" class="formbricks-radio-input" />
|
||||
<label class="formbricks-radio-label">somewhat disappointed </label>
|
||||
</div>
|
||||
@@ -34,8 +34,8 @@
|
||||
|
||||
<div class="formbricks-element formbricks-hidden" id="formbricks-question-1">
|
||||
<p class="formbricks-element-label">What is the main benefit you receive from our service?</p>
|
||||
<form class="formbricks-form" data-element-name="benefit">
|
||||
<textarea rows="4" name="benefit" class="formbricks-textarea" required></textarea>
|
||||
<form class="formbricks-form" data-element-name="mainBenefit">
|
||||
<textarea rows="4" name="mainBenefit" class="formbricks-textarea" required></textarea>
|
||||
<div class="formbricks-next-button-wrapper">
|
||||
<button type="submit" class="formbricks-next-button">Next</button>
|
||||
</div>
|
||||
@@ -47,28 +47,31 @@
|
||||
<fieldset class="formbricks-radio-fieldset">
|
||||
<legend class="formbricks-sr-only">Job title options</legend>
|
||||
<div class="formbricks-radio-options">
|
||||
<div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="founder">
|
||||
<div class="formbricks-radio-option" data-element-name="userSegment" data-element-value="founder">
|
||||
<input name="notification-method" type="radio" class="formbricks-radio-input" />
|
||||
<label class="formbricks-radio-label">Founder</label>
|
||||
</div>
|
||||
<div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="executive">
|
||||
<div class="formbricks-radio-option" data-element-name="userSegment" data-element-value="executive">
|
||||
<input name="notification-method" type="radio" class="formbricks-radio-input" />
|
||||
<label class="formbricks-radio-label">Executive</label>
|
||||
</div>
|
||||
<div
|
||||
class="formbricks-radio-option"
|
||||
data-element-name="jobTitle"
|
||||
data-element-name="userSegment"
|
||||
data-element-value="productManager">
|
||||
<input name="notification-method" type="radio" class="formbricks-radio-input" />
|
||||
<label class="formbricks-radio-label">Product Manager</label>
|
||||
</div>
|
||||
<div class="formbricks-radio-option" data-element-name="jobTitle" data-element-value="productOwner">
|
||||
<div
|
||||
class="formbricks-radio-option"
|
||||
data-element-name="userSegment"
|
||||
data-element-value="productOwner">
|
||||
<input name="notification-method" type="radio" class="formbricks-radio-input" />
|
||||
<label class="formbricks-radio-label">Product Owner</label>
|
||||
</div>
|
||||
<div
|
||||
class="formbricks-radio-option"
|
||||
data-element-name="jobTitle"
|
||||
data-element-name="userSegment"
|
||||
data-element-value="softwareEngineer">
|
||||
<input name="notification-method" type="radio" class="formbricks-radio-input" />
|
||||
<label class="formbricks-radio-label">Software Engineer</label>
|
||||
@@ -79,8 +82,8 @@
|
||||
|
||||
<div class="formbricks-element formbricks-hidden" id="formbricks-question-3">
|
||||
<p class="formbricks-element-label">How can we improve our service for you?</p>
|
||||
<form class="formbricks-form" data-element-name="howImprove">
|
||||
<textarea rows="4" name="howImprove" class="formbricks-textarea" required></textarea>
|
||||
<form class="formbricks-form" data-element-name="improvement">
|
||||
<textarea rows="4" name="improvement" class="formbricks-textarea" required></textarea>
|
||||
<div class="formbricks-next-button-wrapper">
|
||||
<button type="submit" class="formbricks-next-button">Next</button>
|
||||
</div>
|
||||
@@ -89,8 +92,8 @@
|
||||
|
||||
<div class="formbricks-element formbricks-hidden" id="formbricks-question-4">
|
||||
<p class="formbricks-element-label">What type of people would benefit most from using our service?</p>
|
||||
<form class="formbricks-form" data-element-name="idealCustomer">
|
||||
<textarea rows="4" name="idealCustomer" class="formbricks-textarea" required></textarea>
|
||||
<form class="formbricks-form" data-element-name="selfSegmentation">
|
||||
<textarea rows="4" name="selfSegmentation" class="formbricks-textarea" required></textarea>
|
||||
<div class="formbricks-next-button-wrapper">
|
||||
<button type="submit" class="formbricks-next-button">Submit</button>
|
||||
</div>
|
||||
|
||||
@@ -120,7 +120,7 @@ async function submitElement(name?: string, value?: string) {
|
||||
const response = await createSubmission(submission);
|
||||
submissionId = response.id;
|
||||
} else {
|
||||
await updateSubmission(submissionId, submission, !!("idealCustomer" in submission));
|
||||
await updateSubmission(submissionId, submission, !!("selfSegmentation" in submission));
|
||||
}
|
||||
|
||||
// loading indication end
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
export function ArchiveIcon(props: any) {
|
||||
return (
|
||||
<svg viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
d="M23.0625 3.9375H3.9375C3.31618 3.9375 2.8125 4.44118 2.8125 5.0625V16.0695C2.8125 16.6908 3.31618 17.1945 3.9375 17.1945H23.0625C23.6838 17.1945 24.1875 16.6908 24.1875 16.0695V5.0625C24.1875 4.44118 23.6838 3.9375 23.0625 3.9375Z"
|
||||
fill="#C4F0EB"
|
||||
/>
|
||||
<path
|
||||
d="M19.6875 14.0625C19.3891 14.0625 19.103 14.181 18.892 14.392C18.681 14.603 18.5625 14.8891 18.5625 15.1875C18.5625 15.4859 18.444 15.772 18.233 15.983C18.022 16.194 17.7359 16.3125 17.4375 16.3125H9.5625C9.26413 16.3125 8.97798 16.194 8.767 15.983C8.55603 15.772 8.4375 15.4859 8.4375 15.1875C8.4375 14.8891 8.31897 14.603 8.108 14.392C7.89702 14.181 7.61087 14.0625 7.3125 14.0625H1.6875C1.38913 14.0625 1.10298 14.181 0.892005 14.392C0.681026 14.603 0.5625 14.8891 0.5625 15.1875V21.9375C0.5625 22.2359 0.681026 22.522 0.892005 22.733C1.10298 22.944 1.38913 23.0625 1.6875 23.0625H25.3125C25.6109 23.0625 25.897 22.944 26.108 22.733C26.319 22.522 26.4375 22.2359 26.4375 21.9375V15.1875C26.4375 14.8891 26.319 14.603 26.108 14.392C25.897 14.181 25.6109 14.0625 25.3125 14.0625H19.6875Z"
|
||||
fill="#C4F0EB"
|
||||
/>
|
||||
<path
|
||||
d="M25.3125 20.0869H1.6875C1.38913 20.0869 1.10298 19.9684 0.892005 19.7574C0.681026 19.5464 0.5625 19.2603 0.5625 18.9619V21.9375C0.5625 22.2359 0.681026 22.5221 0.892005 22.733C1.10298 22.944 1.38913 23.0625 1.6875 23.0625H25.3125C25.6109 23.0625 25.897 22.944 26.108 22.733C26.319 22.5221 26.4375 22.2359 26.4375 21.9375V18.9619C26.4375 19.2603 26.319 19.5464 26.108 19.7574C25.897 19.9684 25.6109 20.0869 25.3125 20.0869Z"
|
||||
fill="#00C4B8"
|
||||
/>
|
||||
<path
|
||||
d="M10.6875 14.0625H16.3125"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.125"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.8125 11.8125C2.8125 11.5141 2.93103 11.228 3.142 11.017C3.35298 10.806 3.63913 10.6875 3.9375 10.6875H23.0625C23.3609 10.6875 23.647 10.806 23.858 11.017C24.069 11.228 24.1875 11.5141 24.1875 11.8125"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.125"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.8125 8.4375C2.8125 8.13913 2.93103 7.85298 3.142 7.64201C3.35298 7.43103 3.63913 7.3125 3.9375 7.3125H23.0625C23.3609 7.3125 23.647 7.43103 23.858 7.64201C24.069 7.85298 24.1875 8.13913 24.1875 8.4375"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.125"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.8125 5.0625C2.8125 4.76413 2.93103 4.47798 3.142 4.267C3.35298 4.05603 3.63913 3.9375 3.9375 3.9375H23.0625C23.3609 3.9375 23.647 4.05603 23.858 4.267C24.069 4.47798 24.1875 4.76413 24.1875 5.0625"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.125"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M19.6875 14.0625C19.3891 14.0625 19.103 14.181 18.892 14.392C18.681 14.603 18.5625 14.8891 18.5625 15.1875C18.5625 15.4859 18.444 15.772 18.233 15.983C18.022 16.194 17.7359 16.3125 17.4375 16.3125H9.5625C9.26413 16.3125 8.97798 16.194 8.76701 15.983C8.55603 15.772 8.4375 15.4859 8.4375 15.1875C8.4375 14.8891 8.31897 14.603 8.10799 14.392C7.89702 14.181 7.61087 14.0625 7.3125 14.0625H1.6875C1.38913 14.0625 1.10298 14.181 0.892005 14.392C0.681026 14.603 0.5625 14.8891 0.5625 15.1875V21.9375C0.5625 22.2359 0.681026 22.522 0.892005 22.733C1.10298 22.944 1.38913 23.0625 1.6875 23.0625H25.3125C25.6109 23.0625 25.897 22.944 26.108 22.733C26.319 22.522 26.4375 22.2359 26.4375 21.9375V15.1875C26.4375 14.8891 26.319 14.603 26.108 14.392C25.897 14.181 25.6109 14.0625 25.3125 14.0625H19.6875Z"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.125"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
export function NotDisappointedIcon(props: any) {
|
||||
return (
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g clipPath="url(#clip0_1_431)">
|
||||
<path
|
||||
d="M19.9999 39.1668C30.5854 39.1668 39.1666 30.5856 39.1666 20.0002C39.1666 9.41471 30.5854 0.833496 19.9999 0.833496C9.41446 0.833496 0.833252 9.41471 0.833252 20.0002C0.833252 30.5856 9.41446 39.1668 19.9999 39.1668Z"
|
||||
fill="#EF4444"
|
||||
/>
|
||||
<path
|
||||
d="M19.9999 7.50016C24.1407 7.50047 28.1848 8.75106 31.6029 11.0882C35.021 13.4253 37.6538 16.7401 39.1566 20.5985C39.1566 20.3985 39.1666 20.2002 39.1666 20.0002C39.1666 14.9168 37.1472 10.0417 33.5528 6.44728C29.9583 2.85284 25.0832 0.833496 19.9999 0.833496C14.9166 0.833496 10.0415 2.85284 6.44704 6.44728C2.85259 10.0417 0.833252 14.9168 0.833252 20.0002C0.833252 20.2002 0.833252 20.3985 0.843252 20.5985C2.34601 16.7401 4.97879 13.4253 8.39691 11.0882C11.815 8.75106 15.8592 7.50047 19.9999 7.50016Z"
|
||||
fill="#FEE2E2"
|
||||
/>
|
||||
<path
|
||||
d="M24.1667 15.6533C24.5202 16.2185 25.0116 16.6845 25.5947 17.0075C26.1778 17.3306 26.8335 17.5001 27.5001 17.5001C28.1667 17.5001 28.8223 17.3306 29.4054 17.0075C29.9885 16.6845 30.4799 16.2185 30.8334 15.6533"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.8334 15.6533C15.4799 16.2185 14.9885 16.6845 14.4054 17.0075C13.8223 17.3306 13.1667 17.5001 12.5001 17.5001C11.8335 17.5001 11.1778 17.3306 10.5947 17.0075C10.0116 16.6845 9.52024 16.2185 9.16675 15.6533"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M19.9999 39.1668C30.5854 39.1668 39.1666 30.5856 39.1666 20.0002C39.1666 9.41471 30.5854 0.833496 19.9999 0.833496C9.41446 0.833496 0.833252 9.41471 0.833252 20.0002C0.833252 30.5856 9.41446 39.1668 19.9999 39.1668Z"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M22.5 30.8332H25.8333C25.8333 31.2752 26.0089 31.6991 26.3215 32.0117C26.634 32.3242 27.058 32.4998 27.5 32.4998C27.942 32.4998 28.366 32.3242 28.6785 32.0117C28.9911 31.6991 29.1667 31.2752 29.1667 30.8332V25.8332C29.1667 25.3911 28.9911 24.9672 28.6785 24.6547C28.366 24.3421 27.942 24.1665 27.5 24.1665C27.058 24.1665 26.634 24.3421 26.3215 24.6547C26.0089 24.9672 25.8333 25.3911 25.8333 25.8332H22.5"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_431">
|
||||
<rect width="40" height="40" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
export function SomewhatDisappointedIcon(props: any) {
|
||||
return (
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g clipPath="url(#clip0_1_440)">
|
||||
<path
|
||||
d="M19.9999 39.1666C30.5854 39.1666 39.1666 30.5854 39.1666 19.9999C39.1666 9.41446 30.5854 0.833252 19.9999 0.833252C9.41446 0.833252 0.833252 9.41446 0.833252 19.9999C0.833252 30.5854 9.41446 39.1666 19.9999 39.1666Z"
|
||||
fill="#F59E0B"
|
||||
/>
|
||||
<path
|
||||
d="M19.9999 7.49992C24.1407 7.50023 28.1848 8.75081 31.6029 11.0879C35.021 13.4251 37.6538 16.7398 39.1566 20.5983C39.1566 20.3983 39.1666 20.1999 39.1666 19.9999C39.1666 14.9166 37.1472 10.0415 33.5528 6.44704C29.9583 2.85259 25.0832 0.833252 19.9999 0.833252C14.9166 0.833252 10.0415 2.85259 6.44704 6.44704C2.85259 10.0415 0.833252 14.9166 0.833252 19.9999C0.833252 20.1999 0.833252 20.3983 0.843252 20.5983C2.34601 16.7398 4.97879 13.4251 8.39691 11.0879C11.815 8.75081 15.8592 7.50023 19.9999 7.49992Z"
|
||||
fill="#FFFBEB"
|
||||
/>
|
||||
<path
|
||||
d="M19.9999 39.1666C30.5854 39.1666 39.1666 30.5854 39.1666 19.9999C39.1666 9.41446 30.5854 0.833252 19.9999 0.833252C9.41446 0.833252 0.833252 9.41446 0.833252 19.9999C0.833252 30.5854 9.41446 39.1666 19.9999 39.1666Z"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.8334 16.25C10.9158 16.25 10.9964 16.2744 11.0649 16.3202C11.1334 16.366 11.1868 16.4311 11.2184 16.5072C11.2499 16.5834 11.2582 16.6671 11.2421 16.748C11.226 16.8288 11.1863 16.903 11.128 16.9613C11.0698 17.0196 10.9955 17.0593 10.9147 17.0753C10.8339 17.0914 10.7501 17.0832 10.674 17.0516C10.5978 17.0201 10.5328 16.9667 10.487 16.8982C10.4412 16.8296 10.4167 16.7491 10.4167 16.6667C10.4167 16.5562 10.4606 16.4502 10.5388 16.372C10.6169 16.2939 10.7229 16.25 10.8334 16.25Z"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M29.1667 16.25C29.0843 16.25 29.0037 16.2744 28.9352 16.3202C28.8667 16.366 28.8133 16.4311 28.7817 16.5072C28.7502 16.5834 28.7419 16.6671 28.758 16.748C28.7741 16.8288 28.8138 16.903 28.872 16.9613C28.9303 17.0196 29.0046 17.0593 29.0854 17.0753C29.1662 17.0914 29.25 17.0832 29.3261 17.0516C29.4023 17.0201 29.4673 16.9667 29.5131 16.8982C29.5589 16.8296 29.5833 16.7491 29.5833 16.6667C29.5833 16.5562 29.5394 16.4502 29.4613 16.372C29.3832 16.2939 29.2772 16.25 29.1667 16.25Z"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.5 32.685C18.7236 30.7825 20.4885 29.2896 22.5677 28.3985C24.6469 27.5075 26.9451 27.259 29.1667 27.685"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_440">
|
||||
<rect width="40" height="40" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
export function VeryDisappointedIcon(props: any) {
|
||||
return (
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g clipPath="url(#clip0_1_422)">
|
||||
<path
|
||||
d="M19.9999 39.1666C30.5854 39.1666 39.1666 30.5854 39.1666 19.9999C39.1666 9.41446 30.5854 0.833252 19.9999 0.833252C9.41446 0.833252 0.833252 9.41446 0.833252 19.9999C0.833252 30.5854 9.41446 39.1666 19.9999 39.1666Z"
|
||||
fill="#10B981"
|
||||
/>
|
||||
<path
|
||||
d="M19.9999 7.49992C24.1407 7.50023 28.1848 8.75081 31.6029 11.0879C35.021 13.4251 37.6538 16.7398 39.1566 20.5983C39.1566 20.3983 39.1666 20.1999 39.1666 19.9999C39.1666 14.9166 37.1472 10.0415 33.5528 6.44704C29.9584 2.85259 25.0832 0.833252 19.9999 0.833252C14.9166 0.833252 10.0415 2.85259 6.44704 6.44704C2.85259 10.0415 0.833252 14.9166 0.833252 19.9999C0.833252 20.1999 0.833252 20.3983 0.843252 20.5983C2.34601 16.7398 4.97879 13.4251 8.39691 11.0879C11.815 8.75081 15.8592 7.50023 19.9999 7.49992Z"
|
||||
fill="#ECFDF5"
|
||||
/>
|
||||
<path
|
||||
d="M19.9999 39.1666C30.5854 39.1666 39.1666 30.5854 39.1666 19.9999C39.1666 9.41446 30.5854 0.833252 19.9999 0.833252C9.41446 0.833252 0.833252 9.41446 0.833252 19.9999C0.833252 30.5854 9.41446 39.1666 19.9999 39.1666Z"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.70833"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.8334 16.25C10.9158 16.25 10.9964 16.2744 11.0649 16.3202C11.1334 16.366 11.1868 16.4311 11.2184 16.5072C11.2499 16.5834 11.2582 16.6671 11.2421 16.748C11.226 16.8288 11.1863 16.903 11.128 16.9613C11.0698 17.0196 10.9955 17.0593 10.9147 17.0753C10.8339 17.0914 10.7501 17.0832 10.674 17.0516C10.5978 17.0201 10.5328 16.9667 10.487 16.8982C10.4412 16.8296 10.4167 16.7491 10.4167 16.6667C10.4167 16.5562 10.4606 16.4502 10.5388 16.372C10.6169 16.2939 10.7229 16.25 10.8334 16.25Z"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.70833"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M29.1667 16.25C29.0843 16.25 29.0037 16.2744 28.9352 16.3202C28.8667 16.366 28.8133 16.4311 28.7817 16.5072C28.7502 16.5834 28.7419 16.6671 28.758 16.748C28.7741 16.8288 28.8138 16.903 28.872 16.9613C28.9303 17.0196 29.0046 17.0593 29.0854 17.0753C29.1662 17.0914 29.25 17.0832 29.3261 17.0516C29.4023 17.0201 29.4673 16.9667 29.5131 16.8982C29.5589 16.8296 29.5833 16.7491 29.5833 16.6667C29.5833 16.5562 29.5394 16.4502 29.4613 16.372C29.3832 16.2939 29.2772 16.25 29.1667 16.25Z"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.70833"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.5 31.6667C12.5 29.6776 13.2902 27.77 14.6967 26.3634C16.1032 24.9569 18.0109 24.1667 20 24.1667C21.9891 24.1667 23.8968 24.9569 25.3033 26.3634C26.7098 27.77 27.5 29.6776 27.5 31.6667"
|
||||
stroke="#00303E"
|
||||
strokeWidth="1.70833"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_422">
|
||||
<rect width="40" height="40" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -32,3 +32,7 @@ export * from "./icons/CheckMarkIcon";
|
||||
export * from "./icons/BellIcon";
|
||||
export * from "./icons/SkyscraperIcon";
|
||||
export * from "./icons/UserDeveloperIcon";
|
||||
export * from "./icons/VeryDisappointedIcon";
|
||||
export * from "./icons/SomewhatDisappointedIcon";
|
||||
export * from "./icons/NotDisappointedIcon";
|
||||
export * from "./icons/ArchiveIcon";
|
||||
|
||||
Reference in New Issue
Block a user