Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nayalsaurav/resume-analyzer/llms.txt

Use this file to discover all available pages before exploring further.

FeedbackDisplay is a client component that renders the full AI analysis result for a resume, including the overall score, animated per-category progress bars, and color-coded improvement tips. It is rendered by the Upload component once the analyzeResume server action resolves successfully, and it delegates the “start over” action back to Upload via the onReset callback.

​
Signature

export const FeedbackDisplay: React.FC<FeedbackDisplayProps>

​
Props

​
feedback
Feedback
required
The complete analysis result returned by analyzeResume. Contains an overallScore (0–100) and five named section objects — ATS, toneAndStyle, content, skills, and structure — each with a score and an array of tips. See /reference/feedback-types for the full type definition.
​
onReset
() => void
required
Callback invoked when the user clicks the “Analyze Another Resume” button in the footer. Typically wired to the parent Upload component’s resetForm function to clear all state and return to the form.

​
Usage

import { FeedbackDisplay } from "@/components/FeedbackDisplay";
import type { Feedback } from "@/lib/google";

<FeedbackDisplay feedback={feedback} onReset={() => setFeedback(null)} />

​
Rendered Sections

The component is structured into four visual regions rendered top to bottom. A top bar that displays the “Resume Analysis Results” heading alongside an “Analyze Another Resume” button (outline variant) that fires onReset. This gives users a reset action without having to scroll down.

​
Overall Score Card

Prominently displays the overallScore out of 100. An animated ProgressBar fills to the overall score with a gradient that shifts from green (≥ 80) to yellow-orange (60–79) to red (< 60). A text descriptor ("Excellent", "Good", "Fair", "Needs Improvement", "Poor") appears below the number.

​
Section Grid

Five analysis cards arranged in a 2-column grid, one per feedback category. Each card contains:
  • Title and icon drawn from sectionConfig
  • ScoreBadge — color-coded by score tier (see Score Badge Variants below)
  • Animated ProgressBar — transitions from 0% to the section score (see ProgressBar Animation below)
  • Tips list — each tip color-coded by type (see Tip Rendering below)

​
Section Configuration

The five section keys and their display metadata are defined in sectionConfig:
KeyDisplay TitleGradient
ATSATS Compatibilityblue-500 → cyan-500
toneAndStyleTone & Stylepurple-500 → pink-500
contentContent Qualitygreen-500 → emerald-500
skillsSkills Relevanceorange-500 → red-500
structureStructure & Formattingindigo-500 → purple-500
A call-to-action card at the bottom of the scorecard containing a second “Analyze Another Resume” button that fires onReset when clicked. This mirrors the header button, giving users a convenient reset action without scrolling back up.

​
Score Badge Variants

Each section card displays a ScoreBadge whose visual style is determined by the section’s numeric score:
Score RangeVariantAppearance
≥ 80defaultGreen — strong performance
60–79secondaryNeutral — acceptable but improvable
< 60destructiveRed — needs significant work

​
Tip Rendering

Each tip in a section’s tips array carries a type field and an optional explanation string. 
// type: "good"
// Rendered in emerald color to highlight strengths already present in the resume.
// explanation is shown inline beneath the tip text when present.
The explanation field provides additional context beyond the short tip text. Always display it when present — it gives candidates actionable detail rather than a vague directive.

​
ProgressBar Animation

The animated ProgressBar sub-component uses a CSS transition to create a smooth fill effect:
  1. On mount, the bar starts at 0% width.
  2. After a 300 ms delay, the transition begins.
  3. Over 1000 ms (ease-out), the bar expands to the section’s actual score percentage.
This staggered entry ensures the animation is visible even on fast connections where the component renders nearly instantly.
The ProgressBar animation is driven by a CSS transition rather than a JavaScript animation loop, keeping it performant and accessible — the final value is always correct for users who prefer reduced motion or disable animations at the OS level.

Build docs developers (and LLMs) love

Get started for freeTalk to us