formbricks/packages/ui/SingleResponseCard/components/QuestionSkip.tsx

import { CheckCircleIcon, ChevronDoubleDownIcon, XCircleIcon } from "@heroicons/react/20/solid";

import { TSurveyQuestion } from "@formbricks/types/surveys";

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../Tooltip";

interface QuestionSkipProps {
  skippedQuestions: string[] | undefined;
  status: string;
  questions: TSurveyQuestion[];
  isFirstQuestionAnswered?: boolean;
}

export default function QuestionSkip({
  skippedQuestions,
  status,
  questions,
  isFirstQuestionAnswered,
}: QuestionSkipProps) {
  return (
    <div>
      {skippedQuestions && (
        <div className="my-2 flex w-full px-2 text-sm text-slate-400">
          {status === "welcomeCard" && (
            <div className="mb-2 flex">
              {
                <div
                  className={`relative flex ${
                    isFirstQuestionAnswered ? "h-[100%]" : "h-[200%]"
                  } w-0.5 items-center justify-center`}
                  style={{
                    background:
                      "repeating-linear-gradient(rgb(148, 163, 184), rgb(148, 163, 184) 5px, transparent 5px, transparent 8px)", // adjust the values to fit your design
                  }}>
                  <CheckCircleIcon className="p-0.25 absolute top-0 w-[1.5rem] min-w-[1.5rem] rounded-full bg-white text-slate-400" />
                </div>
              }
              <div className=" ml-6 flex flex-col text-slate-700">Welcome Card</div>
            </div>
          )}
          {status === "skipped" && (
            <div className="flex">
              <div
                className="flex w-0.5 items-center justify-center"
                style={{
                  background:
                    "repeating-linear-gradient(to bottom,   rgb(148 163 184),  rgb(148 163 184) 8px, transparent 5px, transparent 15px)", // adjust the values to fit your design
                }}>
                {skippedQuestions.length > 1 && (
                  <TooltipProvider delayDuration={50}>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <ChevronDoubleDownIcon className="w-[1.25rem] min-w-[1.25rem] rounded-full bg-slate-400 p-0.5 text-white" />
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>Respondent skipped these questions.</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                )}
              </div>
              <div className="ml-6 flex flex-col">
                {skippedQuestions &&
                  skippedQuestions.map((questionId) => {
                    return (
                      <p className="my-2" key={questionId}>
                        {questions.find((question) => question.id === questionId)!.headline}
                      </p>
                    );
                  })}
              </div>
            </div>
          )}
          {status === "aborted" && (
            <div className="flex">
              <div
                className="flex w-0.5 flex-grow items-start justify-center"
                style={{
                  background:
                    "repeating-linear-gradient(to bottom,  rgb(148 163 184),  rgb(148 163 184) 2px, transparent 2px, transparent 10px)", // adjust the 2px to change dot size and 10px to change space between dots
                }}>
                <div className="flex">
                  <XCircleIcon className="min-h-[1.5rem] min-w-[1.5rem] rounded-full bg-white text-slate-400" />
                </div>
              </div>
              <div className="mb-2 ml-4 flex flex-col">
                <p className="mb-2 w-fit rounded-lg bg-slate-100 px-2 text-slate-700">Survey Closed</p>
                {skippedQuestions &&
                  skippedQuestions.map((questionId) => {
                    return (
                      <p className="my-2" key={questionId}>
                        {questions.find((question) => question.id === questionId)!.headline}
                      </p>
                    );
                  })}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}