N 12 new answers (#29)

* Add descriptions to each answer option for desktop

* Add mobile information for answerOptions + fix bug where if clicked on information, the form would be submitted

package.json

@@ -18,8 +18,10 @@
     "@auth/prisma-adapter": "^1.4.0",
     "@hookform/resolvers": "^3.3.4",
     "@prisma/client": "^5.10.2",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
@@ -37,6 +39,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
+    "lucide-react": "^0.359.0",
     "next": "^14.1.0",
     "next-auth": "^4.24.6",
     "next-themes": "^0.2.1",

src/components/mobile/survey-questions.tsx

@@ -1,5 +1,14 @@
 "use client";
 
+import { Button } from "~/components/ui/button";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "~/components/ui/hover-card";
+
+import { InfoCircledIcon } from "@radix-ui/react-icons";
+
 import {
   type Role,
   type AnswerOption,
@@ -19,9 +28,8 @@ import { useState } from "react";
 
 import { api } from "~/trpc/react";
 import { type Session } from "next-auth";
-import { idToTextMap } from "~/utils/optionMapping";
+import { idToMoreInfo, idToTextMap } from "~/utils/optionMapping";
 
-import { Button } from "~/components/ui/button";
 import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
 
 import { slugify } from "~/utils/slugify";
@@ -173,9 +181,28 @@ export function MobileSurveyQuestionnaire({
                                     }
                                   />
                                 </FormControl>
-                                <span className="text-gray-900 dark:text-white">
-                                  {idToTextMap[option.option]}
-                                </span>
+                                <div className="flex items-center">
+                                  <span className="text-gray-900 dark:text-white">
+                                    {idToTextMap[option.option]}
+                                  </span>
+
+                                  <HoverCard>
+                                    <HoverCardTrigger asChild>
+                                      <div className="ml-2">
+                                        <InfoCircledIcon />
+                                      </div>
+                                    </HoverCardTrigger>
+                                    <HoverCardContent className="w-80">
+                                      <div className="flex justify-between space-x-4">
+                                        <div className="space-y-1">
+                                          <p className="text-sm font-normal">
+                                            {idToMoreInfo[option.option]}
+                                          </p>
+                                        </div>
+                                      </div>
+                                    </HoverCardContent>
+                                  </HoverCard>
+                                </div>
                               </label>
                             </RadioGroup>
                           </FormControl>

src/components/survey-questions.tsx

@@ -1,5 +1,11 @@
 "use client";
 
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "~/components/ui/hover-card";
+
 import {
   type Role,
   type AnswerOption,
@@ -19,7 +25,7 @@ import { useState } from "react";
 
 import { api } from "~/trpc/react";
 import { type Session } from "next-auth";
-import { idToTextMap } from "~/utils/optionMapping";
+import { idToMoreInfo, idToTextMap } from "~/utils/optionMapping";
 
 import { Button } from "~/components/ui/button";
 import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
@@ -41,6 +47,7 @@ import {
   onSubmit,
   useGenerateFormAndSchema,
 } from "~/utils/survey-utils";
+import { InfoCircledIcon } from "@radix-ui/react-icons";
 
 export function SurveyQuestions({
   session,
@@ -134,10 +141,28 @@ export function SurveyQuestions({
         <Table divClassname="">
           <TableHeader className="sticky top-0 z-10 h-10 w-full bg-slate-100 dark:bg-slate-900">
             <TableRow>
-              <TableHead className="w-[200px]">Question</TableHead>
+              <TableHead className="w-[400px]">Question</TableHead>
               {answerOptions.map((option) => (
-                <TableHead key={option.id}>
-                  {idToTextMap[option.option]}
+                <TableHead className="text-center" key={option.id}>
+                  <HoverCard>
+                    <HoverCardTrigger asChild>
+                      <div className="flex items-center">
+                        <span style={{ flex: 1, textAlign: "center" }}>
+                          {idToTextMap[option.option]}
+                        </span>
+                        <InfoCircledIcon className="ml-2 h-4 w-4" />
+                      </div>
+                    </HoverCardTrigger>
+                    <HoverCardContent className="w-80">
+                      <div className="flex justify-between space-x-4">
+                        <div className="space-y-1">
+                          <p className="text-sm font-normal">
+                            {idToMoreInfo[option.option]}
+                          </p>
+                        </div>
+                      </div>
+                    </HoverCardContent>
+                  </HoverCard>
                 </TableHead>
               ))}
             </TableRow>
@@ -165,7 +190,7 @@ export function SurveyQuestions({
                     {answerOptions.map((option) => (
                       <TableCell
                         key={option.id}
-                        className={`${field.value === option.id || responses[question.id] === option.id ? "bg-custom-selectedLight dark:bg-custom-selected rounded-lg" : ""}`}
+                        className={`${field.value === option.id || responses[question.id] === option.id ? "rounded-lg bg-custom-selectedLight dark:bg-custom-selected" : ""} w-[300px]`}
                       >
                         <FormItem>
                           <FormControl>

src/components/ui/hover-card.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "~/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

src/utils/optionMapping.ts

@@ -1,15 +1,22 @@
 export const idToTextMap: Record<number, string> = {
   0: "🤗 Expert",
   1: "😏 Competent",
-  2: "🤷‍♂️ Novice / Don’t know",
-  3: "👷‍♀️ Novice / Would like to learn",
+  2: "👷‍♀️ Novice & Would like to learn",
+  3: "🤷‍♂️ Novice / Don’t know",
 } as const;
 
 export const idToAnswerMap: Record<string, string> = {
   cltfmxq3200002hsdmlswqpzx: "🤗 Expert",
   cltfmxq3300012hsdp6y7fs7e: "😏 Competent",
-  cltfmxq3300022hsdl237nczb: "🤷‍♂️ Novice / Don’t know",
-  cltfmxq3300032hsd3hvun83v: "👷‍♀️ Novice / Would like to learn",
+  cltfmxq3300022hsdl237nczb: "👷‍♀️ Novice & Would like to learn",
+  cltfmxq3300032hsd3hvun83v: "🤷‍♂️ Novice / Don’t know",
+} as const;
+
+export const idToMoreInfo: Record<number, string> = {
+  0: "🤗 You are capable of mentoring or training colleagues",
+  1: "😏 You can apply this technology/practice in your daily work.",
+  2: "👷‍♀️ You have limited experience but are interested to learn this technology/practice.",
+  3: "🤷‍♂️ You have limited experience or don't know and are not interested in learning this.",
 } as const;
 
 // Flatten the answers array from all questions