style: Basic refactoring, a little tooltip fix, and some small language changes (#1850)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
This commit is contained in:
Zayd Krunz
2024-01-03 03:30:14 -07:00
committed by GitHub
parent 7782196822
commit c62f041819

View File

@@ -80,29 +80,29 @@ export default function SummaryMetadata({
<div className="mb-4">
<div className="flex flex-col-reverse gap-y-2 lg:grid lg:grid-cols-3 lg:gap-x-2">
<div className="grid grid-cols-2 gap-4 md:grid-cols-5 md:gap-x-2 lg:col-span-2">
<div className="flex flex-col justify-between space-y-2 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
<p className="text-sm text-slate-600">Displays</p>
<p className="text-2xl font-bold text-slate-800">
{displayCount === 0 ? <span>-</span> : displayCount}
</p>
</div>
<StatCard
label="Displays"
percentage={null}
value={displayCount === 0 ? <span>-</span> : displayCount}
tooltipText="Number of times the survey has been viewed."
/>
<StatCard
label="Starts"
percentage={`${Math.round((totalResponses / displayCount) * 100)}%`}
value={totalResponses === 0 ? <span>-</span> : totalResponses}
tooltipText="People who started the survey."
tooltipText="Number of times the survey has been started."
/>
<StatCard
label="Responses"
percentage={`${Math.round((completedResponsesCount / displayCount) * 100)}%`}
value={responses.length === 0 ? <span>-</span> : completedResponsesCount}
tooltipText="People who completed the survey."
tooltipText="Number of times the survey has been completed."
/>
<StatCard
label="Drop Offs"
percentage={`${Math.round(((totalResponses - completedResponsesCount) / totalResponses) * 100)}%`}
value={responses.length === 0 ? <span>-</span> : totalResponses - completedResponsesCount}
tooltipText="People who started but not completed the survey."
tooltipText="Number of times the survey has been started but not completed."
/>
<StatCard
label="Time to Complete"