4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T5297,import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'; import { Progress } from '@/components/ui/progress'; import { Checkbox } from '@/components/ui/checkbox'; import { ArrowRightIcon, CheckIcon, ClockIcon, TrophyIcon, RotateCwIcon, HelpCircleIcon, } from 'lucide-react'; interface Question { id: number; text: string; type: 'single' | 'multiple' | 'text'; options?: { id: string; text: string; isCorrect?: boolean; }[]; answerExplanation?: string; } export default function HeroFormQuizAssessment() { const [currentQuestion, setCurrentQuestion] = useState(0); const [answers, setAnswers] = useState>({}); const [showResults, setShowResults] = useState(false); const [timeLeft] = useState(300); // 5 minutes in seconds const [showExplanation, setShowExplanation] = useState(false); const questions: Question[] = [ { id: 1, text: 'Which of the following is a core principle of user-centered design?', type: 'single', options: [ { id: 'a', text: 'Focusing on aesthetics above all else', isCorrect: false, }, { id: 'b', text: 'Prioritizing technical complexity', isCorrect: false, }, { id: 'c', text: 'Involving users throughout the design process', isCorrect: true, }, { id: 'd', text: 'Minimizing development costs', isCorrect: false }, ], answerExplanation: 'User-centered design requires involving users throughout the entire design process to ensure the final product meets their needs and expectations.', }, { id: 2, text: 'Which of these tools would you use for collaborative wireframing?', type: 'multiple', options: [ { id: 'a', text: 'Figma', isCorrect: true }, { id: 'b', text: 'Microsoft Word', isCorrect: false }, { id: 'c', text: 'Miro', isCorrect: true }, { id: 'd', text: 'Adobe Photoshop', isCorrect: false }, ], answerExplanation: 'Both Figma and Miro offer robust collaboration features that make them excellent choices for team wireframing sessions.', }, { id: 3, text: 'What is the primary goal of a usability test?', type: 'single', options: [ { id: 'a', text: 'To showcase the design to stakeholders', isCorrect: false, }, { id: 'b', text: 'To identify and fix user experience issues', isCorrect: true, }, { id: 'c', text: 'To finalize the visual design', isCorrect: false }, { id: 'd', text: 'To compare with competitor products', isCorrect: false, }, ], answerExplanation: 'Usability testing aims to identify issues in the user experience by observing real users interacting with the product, allowing designers to make improvements.', }, { id: 4, text: 'Which accessibility guideline is crucial for color usage in UI design?', type: 'single', options: [ { id: 'a', text: 'Always use bright colors to attract attention', isCorrect: false, }, { id: 'b', text: 'Ensure sufficient color contrast for text readability', isCorrect: true, }, { id: 'c', text: 'Use as many colors as possible to differentiate elements', isCorrect: false, }, { id: 'd', text: 'Avoid using color entirely to prevent issues', isCorrect: false, }, ], answerExplanation: 'Sufficient color contrast between text and background is essential for readability, particularly for users with visual impairments or color blindness.', }, { id: 5, text: 'Explain how you would approach designing a new feature for a mobile app. What steps would you take from concept to implementation?', type: 'text', answerExplanation: 'A strong approach would include user research, defining requirements, sketching and wireframing, prototyping, usability testing, iteration based on feedback, and collaboration with developers during implementation.', }, ]; // Calculate progress percentage const progress = ((currentQuestion + 1) / questions.length) * 100; // Format time remaining (MM:SS) const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins.toString().padStart(2, '0')}:${secs .toString() .padStart(2, '0')}`; }; // Handle selection for single choice questions const handleSingleChoice = (value: string) => { setAnswers({ ...answers, [questions[currentQuestion]!.id]: value, }); }; // Handle selection for multiple choice questions const handleMultipleChoice = (value: string) => { const currentAnswers = (answers[questions[currentQuestion]!.id] as string[]) || []; let newAnswers: string[]; if (currentAnswers.includes(value)) { newAnswers = currentAnswers.filter((item) => item !== value); } else { newAnswers = [...currentAnswers, value]; } setAnswers({ ...answers, [questions[currentQuestion]!.id]: newAnswers, }); }; // Handle text input for open-ended questions const handleTextInput = (value: string) => { setAnswers({ ...answers, [questions[currentQuestion]!.id]: value, }); }; // Calculate score for results const calculateScore = () => { let score = 0; let totalPossible = 0; questions.forEach((question) => { if (question.type === 'text') return; // Skip text questions for scoring const userAnswer = answers[question.id]; if (question.type === 'single' && question.options) { totalPossible++; const correctOption = question.options.find( (option) => option.isCorrect ); if (correctOption && userAnswer === correctOption.id) { score++; } } if (question.type === 'multiple' && question.options) { totalPossible++; const correctOptions = question.options .filter((option) => option.isCorrect) .map((option) => option.id); const userAnswers = (userAnswer as string[]) || []; const allCorrect = correctOptions.every((id) => userAnswers.includes(id) ); const noIncorrect = userAnswers.every( (id) => question.options?.find((option) => option.id === id)?.isCorrect ); if ( allCorrect && noIncorrect && userAnswers.length === correctOptions.length ) { score++; } } }); return { score, totalPossible }; }; const handleNextQuestion = () => { if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); setShowExplanation(false); } else { setShowResults(true); } }; const handlePreviousQuestion = () => { if (currentQuestion > 0) { setCurrentQuestion(currentQuestion - 1); setShowExplanation(false); } }; const currentQuestionData = questions[currentQuestion]!; const hasAnswered = answers[currentQuestionData.id] !== undefined && (currentQuestionData.type !== 'multiple' || (answers[currentQuestionData.id] as string[])?.length > 0); return ( <> {/* Hero */}

{!showResults ? (

UX Design Assessment

{formatTime(timeLeft)}

Question {currentQuestion + 1} of {questions.length}

{currentQuestionData.text}

{/* Single Choice Question */} {currentQuestionData.type === 'single' && currentQuestionData.options && ( {currentQuestionData.options.map((option) => (

{option.text}

))} )} {/* Multiple Choice Question */} {currentQuestionData.type === 'multiple' && currentQuestionData.options && (

Select all that apply

{currentQuestionData.options.map((option) => (

handleMultipleChoice(option.id)} > handleMultipleChoice(option.id) } /> {option.text}

))}

)} {/* Text Question */} {currentQuestionData.type === 'text' && (

Your answer

handleTextInput(e.target.value)}
                          />
                        </div>
                      )}
                    </div>

{/* Explanation section (shown after answering) */}
                    {showExplanation &&
                      currentQuestionData.answerExplanation && (
                        <div className="mt-4 rounded-lg border border-blue-100 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20">
                          <h4 className="mb-1 font-medium">Explanation:</h4>
                          <p className="text-muted-foreground text-sm">
                            {currentQuestionData.answerExplanation}
                          </p>
                        </div>
                      )}
                  </div>
                </CardContent>

<CardFooter className="flex justify-between pt-6">
                  <div className="flex space-x-2">
                    <Button
                      variant="outline"
                      onClick={handlePreviousQuestion}
                      disabled={currentQuestion === 0}
                    >
                      Previous
                    </Button>

{!showExplanation &&
                      currentQuestionData.answerExplanation && (
                        <Button
                          variant="outline"
                          onClick={() => setShowExplanation(true)}
                          disabled={!hasAnswered}
                        >
                          <HelpCircleIcon className="mr-1 h-4 w-4" />
                          Show Explanation
                        </Button>
                      )}
                  </div>

<Button onClick={handleNextQuestion} disabled={!hasAnswered}>
                    {currentQuestion < questions.length - 1 ? (
                      <>
                        Next
                        <ArrowRightIcon className="ml-2 h-4 w-4" />
                      </>
                    ) : (
                      'Submit Assessment'
                    )}
                  </Button>
                </CardFooter>
              </Card>
            ) : (
              <Card className="border shadow-lg">
                <CardHeader className="pb-4 text-center">
                  <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
                    <TrophyIcon className="h-8 w-8 text-green-600 dark:text-green-400" />
                  </div>

<CardTitle className="text-2xl font-bold">
                    Assessment Complete!
                  </CardTitle>

<CardDescription className="text-lg">
                    {(() => {
                      const { score, totalPossible } = calculateScore();
                      const percentage = (score / totalPossible) * 100;

return message;
                    })()}
                  </CardDescription>
                </CardHeader>

<CardContent className="pt-2">
                  <div className="space-y-6">
                    <div className="bg-muted/30 rounded-lg p-6">
                      <h3 className="mb-4 font-medium">Your Results</h3>

<div className="space-y-4">
                        <div className="flex items-center justify-between">
                          <span className="text-muted-foreground text-sm">
                            Score
                          </span>
                          <div className="text-lg font-semibold">
                            {(() => {
                              const { score, totalPossible } = calculateScore();
                              return `${score}/${totalPossible}`;
                            })()}
                          </div>
                        </div>

<div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <span className="text-muted-foreground text-sm">
                              Percentage
                            </span>
                            <div className="text-lg font-semibold">
                              {(() => {
                                const { score, totalPossible } =
                                  calculateScore();
                                return `${Math.round(
                                  (score / totalPossible) * 100
                                )}%`;
                              })()}
                            </div>
                          </div>

<Progress
                            value={(() => {
                              const { score, totalPossible } = calculateScore();
                              return (score / totalPossible) * 100;
                            })()}
                            className="h-2"
                          />
                        </div>

<div className="flex items-center justify-between">
                          <span className="text-muted-foreground text-sm">
                            Time Taken
                          </span>
                          <div className="font-semibold">
                            {formatTime(300 - timeLeft)}
                          </div>
                        </div>

<div className="flex flex-col items-center justify-between gap-2 pt-4 sm:flex-row">
                          <div className="text-muted-foreground text-sm">
                            Your answers have been submitted. You can now view
                            your certificate or retake the assessment.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>

<CardFooter className="flex flex-col gap-4 pt-6 sm:flex-row">
                  <Button
                    className="w-full sm:w-auto"
                    variant="outline"
                    onClick={() => window.location.reload()}
                  >
                    <RotateCwIcon className="mr-2 h-4 w-4" />
                    Retake Assessment
                  </Button>

<Button className="w-full sm:w-auto">
                    <CheckIcon className="mr-2 h-4 w-4" />
                    View Certificate
                  </Button>
                </CardFooter>
              </Card>
            )}
          </div>
        </div>
      </div>
      {/* End Hero */}
    </>
  );
}
53:Td06,import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/80",
        outline:
          "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
        ghost:
          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
        destructive:
          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default:
          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        icon: "size-9",
        "icon-xs":
          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
        "icon-sm":
          "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
        "icon-lg": "size-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant = "default",
  size = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot.Root : "button"

return (
    <Comp
      data-slot="button"
      data-variant={variant}
      data-size={size}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
54:T69c,"use client"

import * as React from "react"
import { RadioGroup as RadioGroupPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function RadioGroup({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn("grid w-full gap-3", className)}
      {...props}
    />
  )
}

function RadioGroupItem({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-group-item"
      className={cn(
        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator
        data-slot="radio-group-indicator"
        className="flex size-4 items-center justify-center"
      >
        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
}

export { RadioGroup, RadioGroupItem }
55:Ta35,import * as React from "react"

import { cn } from "@/lib/utils"

function Card({
  className,
  size = "default",
  ...props
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
  return (
    <div
      data-slot="card"
      data-size={size}
      className={cn(
        "group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
        className
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4",
        className
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-title"
      className={cn(
        "font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm",
        className
      )}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("px-6 group-data-[size=sm]/card:px-4", className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn(
        "flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4",
        className
      )}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
56:T582,"use client"

import * as React from "react"
import { Checkbox as CheckboxPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"
import { CheckIcon } from "lucide-react"

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
      >
        <CheckIcon
        />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }
4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/marketing-hero-forms-quiz-assessment-form.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-hero-forms-quiz-assessment-form","itemId":"@shadcn-ui-blocks/marketing-hero-forms-quiz-assessment-form"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"components/blocks/marketing/hero-forms/quiz-assessment-form.tsx","content":"$52","type":"registry:component","target":"components/blocks/marketing/hero-forms/quiz-assessment-form.tsx"},{"path":"components/ui/button.tsx","content":"$53","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/label.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"components/ui/radio-group.tsx","content":"$54","type":"registry:ui","target":"components/ui/radio-group.tsx"},{"path":"components/ui/card.tsx","content":"$55","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/progress.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"size-full flex-1 bg-primary transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n","type":"registry:ui","target":"components/ui/progress.tsx"},{"path":"components/ui/checkbox.tsx","content":"$56","type":"registry:ui","target":"components/ui/checkbox.tsx"}]}]]}],"$L57"]}]
</article></body></html>

Quiz Assessment Form

Installation

Files

components

Styles