[V0_FILE]typescriptreact:file="lib/types/resume.ts" isMerged="true" // JSON Resume Schema Types // Based on https://jsonresume.org/schema export interface ResumeBasics { name?: string label?: string image?: string email?: string phone?: string url?: string summary?: string location?: { address?: string postalCode?: string city?: string countryCode?: string region?: string } profiles?: Array<{ network?: string username?: string url?: string }> } export interface ResumeWork { name?: string position?: string url?: string startDate?: string endDate?: string summary?: string highlights?: string[] } export interface ResumeVolunteer { organization?: string position?: string url?: string startDate?: string endDate?: string summary?: string highlights?: string[] } export interface ResumeEducation { institution?: string url?: string area?: string studyType?: string startDate?: string endDate?: string score?: string courses?: string[] } export interface ResumeAward { title?: string date?: string awarder?: string summary?: string } export interface ResumeCertificate { name?: string date?: string issuer?: string url?: string } export interface ResumePublication { name?: string publisher?: string releaseDate?: string url?: string summary?: string } export interface ResumeSkill { name?: string level?: string keywords?: string[] } export interface ResumeLanguage { language?: string fluency?: string } export interface ResumeInterest { name?: string keywords?: string[] } export interface ResumeReference { name?: string reference?: string } export interface ResumeProject { name?: string startDate?: string endDate?: string description?: string highlights?: string[] url?: string } export interface Resume { basics?: ResumeBasics work?: ResumeWork[] volunteer?: ResumeVolunteer[] education?: ResumeEducation[] awards?: ResumeAward[] certificates?: ResumeCertificate[] publications?: ResumePublication[] skills?: ResumeSkill[] languages?: ResumeLanguage[] interests?: ResumeInterest[] references?: ResumeReference[] projects?: ResumeProject[] } // Default empty resume structure export const createEmptyResume = (): Resume => ({ basics: { name: "", label: "", email: "", phone: "", url: "", summary: "", location: { address: "", postalCode: "", city: "", countryCode: "", region: "", }, profiles: [], }, work: [], volunteer: [], education: [], awards: [], certificates: [], publications: [], skills: [], languages: [], interests: [], references: [], projects: [], }) [V0_FILE]typescriptreact:file="components/resume-form.tsx" isMerged="true" "use client" import type { Resume } from "@/lib/types/resume" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Plus, Trash2, User, Briefcase, GraduationCap, FileText, Code } from "lucide-react" interface ResumeFormProps { resume: Resume onChange: (resume: Resume) => void } export function ResumeForm({ resume, onChange }: ResumeFormProps) { const updateResume = (updates: Partial) => { onChange({ ...resume, ...updates }) } const updateBasics = (updates: Partial) => { updateResume({ basics: { ...resume.basics, ...updates }, }) } const updateBasicsLocation = (updates: Partial) => { updateResume({ basics: { ...resume.basics, location: { ...resume.basics?.location, ...updates }, }, }) } const addArrayItem = (key: keyof Resume, defaultItem: T) => { const currentArray = (resume[key] as T[]) || [] updateResume({ [key]: [...currentArray, defaultItem], }) } const updateArrayItem = (key: keyof Resume, index: number, updates: Partial) => { const currentArray = (resume[key] as T[]) || [] const updatedArray = currentArray.map((item, i) => (i === index ? { ...item, ...updates } : item)) updateResume({ [key]: updatedArray, }) } const removeArrayItem = (key: keyof Resume, index: number) => { const currentArray = (resume[key] as any[]) || [] updateResume({ [key]: currentArray.filter((_, i) => i !== index), }) } const addProfile = () => { const currentProfiles = resume.basics?.profiles || [] updateBasics({ profiles: [...currentProfiles, { network: "", username: "", url: "" }], }) } const updateProfile = (index: number, updates: Partial) => { const currentProfiles = resume.basics?.profiles || [] const updatedProfiles = currentProfiles.map((profile, i) => (i === index ? { ...profile, ...updates } : profile)) updateBasics({ profiles: updatedProfiles }) } const removeProfile = (index: number) => { const currentProfiles = resume.basics?.profiles || [] updateBasics({ profiles: currentProfiles.filter((_, i) => i !== index), }) } return (

{/* Basics Section */} Personal Information

Full Name updateBasics({ name: e.target.value })} placeholder="John Doe" />

Professional Title updateBasics({ label: e.target.value })} placeholder="Software Engineer" />

Email updateBasics({ email: e.target.value })} placeholder="john@example.com" />

Phone updateBasics({ phone: e.target.value })} placeholder="(555) 123-4567" />

Website updateBasics({ url: e.target.value })} placeholder="https://johndoe.com" />

Professional Summary

updateBasics({ summary: e.target.value })}
                placeholder="A brief summary of your professional background and goals..."
                rows={4}
              />
            </div>

{/* Location */}
            <Card>
              <CardHeader>
                <CardTitle className="text-sm">Location</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="address">Address</Label>
                    <Input
                      id="address"
                      value={resume.basics?.location?.address || ""}
                      onChange={(e) => updateBasicsLocation({ address: e.target.value })}
                      placeholder="123 Main St"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="city">City</Label>
                    <Input
                      id="city"
                      value={resume.basics?.location?.city || ""}
                      onChange={(e) => updateBasicsLocation({ city: e.target.value })}
                      placeholder="San Francisco"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="region">State/Region</Label>
                    <Input
                      id="region"
                      value={resume.basics?.location?.region || ""}
                      onChange={(e) => updateBasicsLocation({ region: e.target.value })}
                      placeholder="California"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="postalCode">Postal Code</Label>
                    <Input
                      id="postalCode"
                      value={resume.basics?.location?.postalCode || ""}
                      onChange={(e) => updateBasicsLocation({ postalCode: e.target.value })}
                      placeholder="94105"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Social Profiles */}
            <Card>
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle className="text-sm">Social Profiles</CardTitle>
                <Button onClick={addProfile} size="sm" variant="outline">
                  <Plus className="h-4 w-4 mr-2" />
                  Add Profile
                </Button>
              </CardHeader>
              <CardContent className="space-y-4">
                {resume.basics?.profiles?.map((profile, index) => (
                  <div key={index} className="flex gap-2 items-end">
                    <div className="flex-1 grid grid-cols-3 gap-2">
                      <div className="space-y-2">
                        <Label>Network</Label>
                        <Input
                          value={profile.network || ""}
                          onChange={(e) => updateProfile(index, { network: e.target.value })}
                          placeholder="LinkedIn"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Username</Label>
                        <Input
                          value={profile.username || ""}
                          onChange={(e) => updateProfile(index, { username: e.target.value })}
                          placeholder="johndoe"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>URL</Label>
                        <Input
                          value={profile.url || ""}
                          onChange={(e) => updateProfile(index, { url: e.target.value })}
                          placeholder="https://linkedin.com/in/johndoe"
                        />
                      </div>
                    </div>
                    <Button
                      onClick={() => removeProfile(index)}
                      size="sm"
                      variant="outline"
                      className="text-destructive hover:text-destructive"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
              </CardContent>
            </Card>
          </AccordionContent>
        </AccordionItem>

{/* Work Experience */}
        <AccordionItem value="work">
          <AccordionTrigger className="flex items-center gap-2">
            <Briefcase className="h-4 w-4" />
            Work Experience
          </AccordionTrigger>
          <AccordionContent className="space-y-4">
            <Button
              onClick={() =>
                addArrayItem("work", {
                  name: "",
                  position: "",
                  url: "",
                  startDate: "",
                  endDate: "",
                  summary: "",
                  highlights: [],
                })
              }
              variant="outline"
              className="w-full"
            >
              <Plus className="h-4 w-4 mr-2" />
              Add Work Experience
            </Button>

{resume.work?.map((work, index) => (
              <Card key={index}>
                <CardHeader className="flex flex-row items-center justify-between">
                  <CardTitle className="text-sm">Position {index + 1}</CardTitle>
                  <Button
                    onClick={() => removeArrayItem("work", index)}
                    size="sm"
                    variant="outline"
                    className="text-destructive hover:text-destructive"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>Company Name</Label>
                      <Input
                        value={work.name || ""}
                        onChange={(e) => updateArrayItem("work", index, { name: e.target.value })}
                        placeholder="Company Inc."
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Position</Label>
                      <Input
                        value={work.position || ""}
                        onChange={(e) => updateArrayItem("work", index, { position: e.target.value })}
                        placeholder="Software Engineer"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Start Date</Label>
                      <Input
                        type="date"
                        value={work.startDate || ""}
                        onChange={(e) => updateArrayItem("work", index, { startDate: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>End Date</Label>
                      <Input
                        type="date"
                        value={work.endDate || ""}
                        onChange={(e) => updateArrayItem("work", index, { endDate: e.target.value })}
                        placeholder="Leave empty if current"
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label>Company URL</Label>
                    <Input
                      value={work.url || ""}
                      onChange={(e) => updateArrayItem("work", index, { url: e.target.value })}
                      placeholder="https://company.com"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Summary</Label>
                    <Textarea
                      value={work.summary || ""}
                      onChange={(e) => updateArrayItem("work", index, { summary: e.target.value })}
                      placeholder="Brief description of your role and responsibilities..."
                      rows={3}
                    />
                  </div>
                </CardContent>
              </Card>
            ))}
          </AccordionContent>
        </AccordionItem>

{/* Education */}
        <AccordionItem value="education">
          <AccordionTrigger className="flex items-center gap-2">
            <GraduationCap className="h-4 w-4" />
            Education
          </AccordionTrigger>
          <AccordionContent className="space-y-4">
            <Button
              onClick={() =>
                addArrayItem("education", {
                  institution: "",
                  area: "",
                  studyType: "",
                  startDate: "",
                  endDate: "",
                  score: "",
                  courses: [],
                })
              }
              variant="outline"
              className="w-full"
            >
              <Plus className="h-4 w-4 mr-2" />
              Add Education
            </Button>

{resume.education?.map((edu, index) => (
              <Card key={index}>
                <CardHeader className="flex flex-row items-center justify-between">
                  <CardTitle className="text-sm">Education {index + 1}</CardTitle>
                  <Button
                    onClick={() => removeArrayItem("education", index)}
                    size="sm"
                    variant="outline"
                    className="text-destructive hover:text-destructive"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>Institution</Label>
                      <Input
                        value={edu.institution || ""}
                        onChange={(e) => updateArrayItem("education", index, { institution: e.target.value })}
                        placeholder="University of Example"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Degree Type</Label>
                      <Input
                        value={edu.studyType || ""}
                        onChange={(e) => updateArrayItem("education", index, { studyType: e.target.value })}
                        placeholder="Bachelor's"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Field of Study</Label>
                      <Input
                        value={edu.area || ""}
                        onChange={(e) => updateArrayItem("education", index, { area: e.target.value })}
                        placeholder="Computer Science"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>GPA/Score</Label>
                      <Input
                        value={edu.score || ""}
                        onChange={(e) => updateArrayItem("education", index, { score: e.target.value })}
                        placeholder="3.8"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Start Date</Label>
                      <Input
                        type="date"
                        value={edu.startDate || ""}
                        onChange={(e) => updateArrayItem("education", index, { startDate: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>End Date</Label>
                      <Input
                        type="date"
                        value={edu.endDate || ""}
                        onChange={(e) => updateArrayItem("education", index, { endDate: e.target.value })}
                      />
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </AccordionContent>
        </AccordionItem>

{/* Skills */}
        <AccordionItem value="skills">
          <AccordionTrigger className="flex items-center gap-2">
            <Code className="h-4 w-4" />
            Skills
          </AccordionTrigger>
          <AccordionContent className="space-y-4">
            <Button
              onClick={() =>
                addArrayItem("skills", {
                  name: "",
                  level: "",
                  keywords: [],
                })
              }
              variant="outline"
              className="w-full"
            >
              <Plus className="h-4 w-4 mr-2" />
              Add Skill Category
            </Button>

{resume.skills?.map((skill, index) => (
              <Card key={index}>
                <CardHeader className="flex flex-row items-center justify-between">
                  <CardTitle className="text-sm">Skill {index + 1}</CardTitle>
                  <Button
                    onClick={() => removeArrayItem("skills", index)}
                    size="sm"
                    variant="outline"
                    className="text-destructive hover:text-destructive"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>Skill Category</Label>
                      <Input
                        value={skill.name || ""}
                        onChange={(e) => updateArrayItem("skills", index, { name: e.target.value })}
                        placeholder="Programming Languages"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Proficiency Level</Label>
                      <Input
                        value={skill.level || ""}
                        onChange={(e) => updateArrayItem("skills", index, { level: e.target.value })}
                        placeholder="Expert"
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label>Keywords (comma-separated)</Label>
                    <Input
                      value={skill.keywords?.join(", ") || ""}
                      onChange={(e) =>
                        updateArrayItem("skills", index, {
                          keywords: e.target.value
                            .split(",")
                            .map((k) => k.trim())
                            .filter((k) => k),
                        })
                      }
                      placeholder="JavaScript, TypeScript, React, Node.js"
                    />
                  </div>
                </CardContent>
              </Card>
            ))}
          </AccordionContent>
        </AccordionItem>

{/* Projects */}
        <AccordionItem value="projects">
          <AccordionTrigger className="flex items-center gap-2">
            <FileText className="h-4 w-4" />
            Projects
          </AccordionTrigger>
          <AccordionContent className="space-y-4">
            <Button
              onClick={() =>
                addArrayItem("projects", {
                  name: "",
                  description: "",
                  startDate: "",
                  endDate: "",
                  url: "",
                  highlights: [],
                })
              }
              variant="outline"
              className="w-full"
            >
              <Plus className="h-4 w-4 mr-2" />
              Add Project
            </Button>

{resume.projects?.map((project, index) => (
              <Card key={index}>
                <CardHeader className="flex flex-row items-center justify-between">
                  <CardTitle className="text-sm">Project {index + 1}</CardTitle>
                  <Button
                    onClick={() => removeArrayItem("projects", index)}
                    size="sm"
                    variant="outline"
                    className="text-destructive hover:text-destructive"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>Project Name</Label>
                      <Input
                        value={project.name || ""}
                        onChange={(e) => updateArrayItem("projects", index, { name: e.target.value })}
                        placeholder="My Awesome Project"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Project URL</Label>
                      <Input
                        value={project.url || ""}
                        onChange={(e) => updateArrayItem("projects", index, { url: e.target.value })}
                        placeholder="https://github.com/user/project"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Start Date</Label>
                      <Input
                        type="date"
                        value={project.startDate || ""}
                        onChange={(e) => updateArrayItem("projects", index, { startDate: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>End Date</Label>
                      <Input
                        type="date"
                        value={project.endDate || ""}
                        onChange={(e) => updateArrayItem("projects", index, { endDate: e.target.value })}
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label>Description</Label>
                    <Textarea
                      value={project.description || ""}
                      onChange={(e) => updateArrayItem("projects", index, { description: e.target.value })}
                      placeholder="Brief description of the project..."
                      rows={3}
                    />
                  </div>
                </CardContent>
              </Card>
            ))}
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/file-upload.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useRef, useState } from "react"
import type { Resume } from "@/lib/types/resume"
import { Button } from "@/components/ui/button"
import { Upload, FileText, AlertCircle } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { Alert, AlertDescription } from "@/components/ui/alert"

interface FileUploadProps {
  onUpload: (resume: Resume) => void
}

export function FileUpload({ onUpload }: FileUploadProps) {
  const fileInputRef = useRef<HTMLInputElement>(null)
  const { toast } = useToast()
  const [isUploading, setIsUploading] = useState(false)
  const [dragActive, setDragActive] = useState(false)

const validateResumeStructure = (data: any): { isValid: boolean; errors: string[] } => {
    const errors: string[] = []

if (typeof data !== "object" || data === null) {
      errors.push("File must contain a valid JSON object")
      return { isValid: false, errors }
    }

// Check for required JSON Resume schema structure
    const requiredSections = ["basics"]
    const optionalSections = [
      "work",
      "volunteer",
      "education",
      "awards",
      "certificates",
      "publications",
      "skills",
      "languages",
      "interests",
      "references",
      "projects",
    ]

// Validate that at least basics section exists
    if (!data.basics || typeof data.basics !== "object") {
      errors.push('Resume must contain a "basics" section with personal information')
    }

// Validate array sections if they exist
    const arraySections = [
      "work",
      "volunteer",
      "education",
      "awards",
      "certificates",
      "publications",
      "skills",
      "languages",
      "interests",
      "references",
      "projects",
    ]
    arraySections.forEach((section) => {
      if (data[section] && !Array.isArray(data[section])) {
        errors.push(`Section "${section}" must be an array`)
      }
    })

// Check for unknown sections (warn but don't fail)
    const allValidSections = [...requiredSections, ...optionalSections]
    const unknownSections = Object.keys(data).filter((key) => !allValidSections.includes(key))
    if (unknownSections.length > 0) {
      errors.push(`Unknown sections found: ${unknownSections.join(", ")}. These will be ignored.`)
    }

return { isValid: errors.length === 0 || errors.every((e) => e.includes("Unknown sections")), errors }
  }

const handleFileUpload = async (file: File) => {
    if (!file) return

setIsUploading(true)

try {
      if (!file.name.toLowerCase().endsWith(".json") && file.type !== "application/json") {
        throw new Error("Please upload a JSON file (.json extension)")
      }

if (file.size > 5 * 1024 * 1024) {
        throw new Error("File size must be less than 5MB")
      }

const content = await file.text()

let resume: Resume
      try {
        resume = JSON.parse(content)
      } catch (parseError) {
        throw new Error("Invalid JSON format. Please check your file syntax.")
      }

const validation = validateResumeStructure(resume)
      if (!validation.isValid) {
        throw new Error(`Invalid resume structure:\n${validation.errors.join("\n")}`)
      }

// Show warnings for unknown sections
      const warnings = validation.errors.filter((e) => e.includes("Unknown sections"))
      if (warnings.length > 0) {
        toast({
          title: "Resume uploaded with warnings",
          description: warnings.join("\n"),
          variant: "default",
        })
      }

onUpload(resume)
      toast({
        title: "Resume uploaded successfully",
        description: `Loaded resume for ${resume.basics?.name || "Unknown"}`,
      })
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : "Unknown error occurred"
      toast({
        title: "Upload failed",
        description: errorMessage,
        variant: "destructive",
      })
    } finally {
      setIsUploading(false)
      // Reset the input
      if (fileInputRef.current) {
        fileInputRef.current.value = ""
      }
    }
  }

const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      handleFileUpload(file)
    }
  }

const handleButtonClick = () => {
    fileInputRef.current?.click()
  }

const handleDrag = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (e.type === "dragenter" || e.type === "dragover") {
      setDragActive(true)
    } else if (e.type === "dragleave") {
      setDragActive(false)
    }
  }

const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setDragActive(false)

if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      handleFileUpload(e.dataTransfer.files[0])
    }
  }

return (
    <div className="space-y-4">
      <input
        ref={fileInputRef}
        type="file"
        accept=".json,application/json"
        onChange={handleInputChange}
        className="hidden"
      />

<div
        className={`
          border-2 border-dashed rounded-lg p-6 text-center transition-colors
          ${dragActive ? "border-primary bg-primary/5" : "border-border hover:border-primary/50"}
          ${isUploading ? "opacity-50 pointer-events-none" : "cursor-pointer"}
        `}
        onDragEnter={handleDrag}
        onDragLeave={handleDrag}
        onDragOver={handleDrag}
        onDrop={handleDrop}
        onClick={handleButtonClick}
      >
        <FileText className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
        <div className="space-y-2">
          <p className="text-sm font-medium">
            {isUploading ? "Uploading..." : "Drop your JSON resume here or click to browse"}
          </p>
          <p className="text-xs text-muted-foreground">Supports JSON Resume schema format (max 5MB)</p>
        </div>
      </div>

<div className="flex gap-2">
        <Button onClick={handleButtonClick} variant="outline" size="sm" disabled={isUploading}>
          <Upload className="h-4 w-4 mr-2" />
          {isUploading ? "Uploading..." : "Upload JSON"}
        </Button>
      </div>

<Alert>
        <AlertCircle className="h-4 w-4" />
        <AlertDescription className="text-xs">
          <strong>JSON Resume Format:</strong> Upload a file following the{" "}
          <a
            href="https://jsonresume.org/schema"
            target="_blank"
            rel="noopener noreferrer"
            className="text-primary hover:underline"
          >
            JSON Resume schema
          </a>
          . The file must contain at least a "basics" section with your personal information.
        </AlertDescription>
      </Alert>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"

import { Moon, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useTheme } from "@/components/theme-provider"

export function ThemeToggle() {
  const { theme, setTheme } = useTheme()

return (
    <Button
      variant="ghost"
      size="sm"
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      className="h-9 w-9 px-0"
    >
      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"
import "./globals.css"

const geistSans = Geist({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-geist-sans",
})

const geistMono = Geist_Mono({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-geist-mono",
})

export const metadata: Metadata = {
  title: "Resume Builder",
  description: "Professional resume builder with JSON Resume schema support",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className={`${geistSans.variable} ${geistMono.variable} antialiased`} suppressHydrationWarning>
      <body className="font-sans">
        <ThemeProvider defaultTheme="dark" storageKey="resume-builder-theme">
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isQuickEdit="true" isMerged="true"
import type * as React from "react"

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

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm border-sidebar-border",
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
        "dark:border-gray-600 dark:hover:border-gray-500 dark:focus-visible:border-ring",
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isQuickEdit="true" isMerged="true"
import type * as React from "react"

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

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm border-sidebar-border",
        "dark:border-gray-600 dark:hover:border-gray-500 dark:focus-visible:border-ring",
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescript:file="lib/resume-themes.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export interface ResumeTheme {
  id: string
  name: string
  description: string
  styles: {
    container: string
    header: string
    name: string
    label: string
    contact: string
    sectionTitle: string
    sectionContent: string
    workItem: string
    dateRange: string
    highlights: string
  }
}

export const resumeThemes: ResumeTheme[] = [
  {
    id: "classic",
    name: "Classic",
    description: "Traditional professional layout with clean lines",
    styles: {
      container:
        "bg-white text-black p-8 max-w-4xl mx-auto shadow-lg print:shadow-none print:p-0 print:max-w-none print:mx-0",
      header: "text-center border-b-2 border-gray-800 pb-6 mb-6",
      name: "text-3xl font-bold text-gray-900 mb-2",
      label: "text-xl text-gray-600 mb-4",
      contact: "flex flex-wrap justify-center gap-4 text-sm text-gray-600",
      sectionTitle: "text-xl font-bold text-gray-900 border-b border-gray-300 pb-2 mb-4",
      sectionContent: "text-gray-700 leading-relaxed",
      workItem: "border-l-2 border-gray-200 pl-4 print:break-inside-avoid",
      dateRange: "text-sm text-gray-500 whitespace-nowrap ml-4",
      highlights: "list-disc list-inside text-gray-700 space-y-1",
    },
  },
  {
    id: "modern",
    name: "Modern",
    description: "Contemporary design with accent colors and clean typography",
    styles: {
      container:
        "bg-white text-black p-8 max-w-4xl mx-auto shadow-lg print:shadow-none print:p-0 print:max-w-none print:mx-0",
      header: "text-left bg-gradient-to-r from-blue-50 to-indigo-50 p-6 mb-6 rounded-lg",
      name: "text-4xl font-bold text-gray-900 mb-2",
      label: "text-xl text-blue-600 font-medium mb-4",
      contact: "flex flex-wrap gap-6 text-sm text-gray-600",
      sectionTitle: "text-xl font-bold text-blue-600 border-l-4 border-blue-600 pl-4 mb-4",
      sectionContent: "text-gray-700 leading-relaxed",
      workItem: "border-l-2 border-blue-200 pl-4 mb-4 print:break-inside-avoid",
      dateRange: "text-sm text-blue-600 font-medium whitespace-nowrap ml-4",
      highlights: "list-none text-gray-700 space-y-1 ml-4",
    },
  },
  {
    id: "minimal",
    name: "Minimal",
    description: "Clean and simple design with plenty of white space",
    styles: {
      container:
        "bg-white text-black p-12 max-w-3xl mx-auto shadow-lg print:shadow-none print:p-0 print:max-w-none print:mx-0",
      header: "text-center pb-8 mb-8",
      name: "text-2xl font-light text-gray-900 mb-3 tracking-wide",
      label: "text-lg text-gray-500 mb-6 font-light",
      contact: "flex flex-wrap justify-center gap-8 text-sm text-gray-500",
      sectionTitle: "text-lg font-medium text-gray-900 mb-6 tracking-wide uppercase",
      sectionContent: "text-gray-600 leading-relaxed",
      workItem: "mb-6 print:break-inside-avoid",
      dateRange: "text-sm text-gray-400 whitespace-nowrap ml-4 font-light",
      highlights: "list-none text-gray-600 space-y-2 mt-3",
    },
  },
]

export function getThemeById(id: string): ResumeTheme {
  return resumeThemes.find((theme) => theme.id === id) || resumeThemes[0]
}
[V0_FILE]typescriptreact:file="components/theme-selector.tsx" isEdit="true" isMerged="true"
"use client"
import { Card } from "@/components/ui/card"
import { resumeThemes } from "@/lib/resume-themes"
import { Check } from "lucide-react"

interface ThemeSelectorProps {
  selectedTheme: string
  onThemeChange: (themeId: string) => void
}

export function ThemeSelector({ selectedTheme, onThemeChange }: ThemeSelectorProps) {
  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold">Choose Theme</h3>
      <div className="grid grid-cols-3 gap-4">
        {resumeThemes.map((theme) => (
          <Card
            key={theme.id}
            className={`p-4 cursor-pointer transition-all hover:shadow-md ${
              selectedTheme === theme.id
                ? "ring-2 ring-primary border-primary"
                : "border-border hover:border-primary/50"
            }`}
            onClick={() => onThemeChange(theme.id)}
          >
            <div className="flex items-start justify-between">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-2">
                  <h4 className="font-medium">{theme.name}</h4>
                  {selectedTheme === theme.id && <Check className="h-4 w-4 text-primary" />}
                </div>
                <p className="text-sm text-muted-foreground">{theme.description}</p>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/resume-preview.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type { Resume } from "@/lib/types/resume"
import { Button } from "@/components/ui/button"
import { Printer } from "lucide-react"
import { ThemeSelector } from "@/components/theme-selector"
import { getThemeById } from "@/lib/resume-themes"
import { useState } from "react"

interface ResumePreviewProps {
  resume: Resume
}

export function ResumePreview({ resume }: ResumePreviewProps) {
  const [selectedTheme, setSelectedTheme] = useState("classic")
  const theme = getThemeById(selectedTheme)

const handlePrint = () => {
    window.print()
  }

const formatDate = (dateString?: string) => {
    if (!dateString) return "Present"
    const date = new Date(dateString)
    return date.toLocaleDateString("en-US", { year: "numeric", month: "short" })
  }

return (
    <div className="space-y-6">
      <div className="screen-only no-print">
        <ThemeSelector selectedTheme={selectedTheme} onThemeChange={setSelectedTheme} />
      </div>

{/* Print Controls */}
      <div className="flex justify-end gap-2 screen-only no-print">
        <Button onClick={handlePrint} variant="default" size="sm">
          <Printer className="h-4 w-4 mr-2" />
          Print / Save as PDF
        </Button>
      </div>

<div className={`resume-preview-content ${theme.styles.container}`}>
        {/* Header */}
        <header className={`resume-header ${theme.styles.header}`}>
          <h1 className={theme.styles.name}>{resume.basics?.name || "Your Name"}</h1>
          {resume.basics?.label && <p className={theme.styles.label}>{resume.basics.label}</p>}

<div className={`resume-contact ${theme.styles.contact}`}>
            {resume.basics?.email && <span>{resume.basics.email}</span>}
            {resume.basics?.phone && <span>{resume.basics.phone}</span>}
            {resume.basics?.url && (
              <a href={resume.basics.url} className="text-blue-600 hover:underline">
                {resume.basics.url}
              </a>
            )}
            {resume.basics?.location && (
              <span>
                {[resume.basics.location.city, resume.basics.location.region, resume.basics.location.countryCode]
                  .filter(Boolean)
                  .join(", ")}
              </span>
            )}
          </div>
        </header>

{/* Summary */}
        {resume.basics?.summary && (
          <section className="resume-section mb-6 print:break-inside-avoid">
            <h2 className={theme.styles.sectionTitle}>Professional Summary</h2>
            <p className={`${theme.styles.sectionContent} text-justify`}>{resume.basics.summary}</p>
          </section>
        )}

{/* Work Experience */}
        {resume.work && resume.work.length > 0 && (
          <section className="resume-section mb-6">
            <h2 className={theme.styles.sectionTitle}>Work Experience</h2>
            <div className="space-y-4">
              {resume.work.map((work, index) => (
                <div key={index} className={`experience-item ${theme.styles.workItem}`}>
                  <div className="flex justify-between items-start mb-2">
                    <div className="flex-1">
                      <h3 className="text-lg font-semibold text-gray-900">{work.position || "Position"}</h3>
                      <p className="text-gray-600">
                        {work.name || "Company"}
                        {work.url && (
                          <a href={work.url} className="text-blue-600 hover:underline ml-2 text-sm">
                            {work.url}
                          </a>
                        )}
                      </p>
                    </div>
                    <span className={`date-range ${theme.styles.dateRange}`}>
                      {formatDate(work.startDate)} - {formatDate(work.endDate)}
                    </span>
                  </div>
                  {work.summary && <p className={theme.styles.sectionContent + " mb-2"}>{work.summary}</p>}
                  {work.highlights && work.highlights.length > 0 && (
                    <ul className={theme.styles.highlights}>
                      {work.highlights.map((highlight, i) => (
                        <li key={i}>{highlight}</li>
                      ))}
                    </ul>
                  )}
                </div>
              ))}
            </div>
          </section>
        )}

{/* Education */}
        {resume.education && resume.education.length > 0 && (
          <section className="resume-section mb-6">
            <h2 className={theme.styles.sectionTitle}>Education</h2>
            <div className="space-y-4">
              {resume.education.map((edu, index) => (
                <div key={index} className={`education-item ${theme.styles.workItem}`}>
                  <div className="flex justify-between items-start mb-2">
                    <div className="flex-1">
                      <h3 className="text-lg font-semibold text-gray-900">
                        {edu.studyType} in {edu.area}
                      </h3>
                      <p className="text-gray-600">{edu.institution}</p>
                      {edu.score && <p className="text-sm text-gray-500">GPA: {edu.score}</p>}
                    </div>
                    <span className={`date-range ${theme.styles.dateRange}`}>
                      {formatDate(edu.startDate)} - {formatDate(edu.endDate)}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </section>
        )}

{/* Skills */}
        {resume.skills && resume.skills.length > 0 && (
          <section className="resume-section mb-6 print:break-inside-avoid">
            <h2 className={theme.styles.sectionTitle}>Skills</h2>
            <div className="skills-grid grid grid-cols-1 md:grid-cols-2 gap-4">
              {resume.skills.map((skill, index) => (
                <div key={index}>
                  <h3 className="font-semibold text-gray-900 mb-1">
                    {skill.name}
                    {skill.level && <span className="text-sm text-gray-500 ml-2">({skill.level})</span>}
                  </h3>
                  {skill.keywords && skill.keywords.length > 0 && (
                    <p className={`${theme.styles.sectionContent} text-sm`}>{skill.keywords.join(", ")}</p>
                  )}
                </div>
              ))}
            </div>
          </section>
        )}

{/* Projects */}
        {resume.projects && resume.projects.length > 0 && (
          <section className="resume-section mb-6">
            <h2 className={theme.styles.sectionTitle}>Projects</h2>
            <div className="space-y-4">
              {resume.projects.map((project, index) => (
                <div key={index} className={`project-item ${theme.styles.workItem}`}>
                  <div className="flex justify-between items-start mb-2">
                    <div className="flex-1">
                      <h3 className="text-lg font-semibold text-gray-900">
                        {project.name || "Project"}
                        {project.url && (
                          <a href={project.url} className="text-blue-600 hover:underline ml-2 text-sm">
                            View Project
                          </a>
                        )}
                      </h3>
                    </div>
                    <span className={`date-range ${theme.styles.dateRange}`}>
                      {formatDate(project.startDate)} - {formatDate(project.endDate)}
                    </span>
                  </div>
                  {project.description && (
                    <p className={`${theme.styles.sectionContent} mb-2`}>{project.description}</p>
                  )}
                  {project.highlights && project.highlights.length > 0 && (
                    <ul className={theme.styles.highlights}>
                      {project.highlights.map((highlight, i) => (
                        <li key={i}>{highlight}</li>
                      ))}
                    </ul>
                  )}
                </div>
              ))}
            </div>
          </section>
        )}

{/* Social Profiles */}
        {resume.basics?.profiles && resume.basics.profiles.length > 0 && (
          <section className="resume-section mb-6 print:break-inside-avoid">
            <h2 className={theme.styles.sectionTitle}>Online Presence</h2>
            <div className="profiles-list flex flex-wrap gap-4">
              {resume.basics.profiles.map((profile, index) => (
                <div key={index} className="text-sm">
                  <span className="font-medium text-gray-900">{profile.network}:</span>
                  {profile.url ? (
                    <a href={profile.url} className="text-blue-600 hover:underline ml-1">
                      {profile.username || profile.url}
                    </a>
                  ) : (
                    <span className={`${theme.styles.sectionContent} ml-1`}>{profile.username}</span>
                  )}
                </div>
              ))}
            </div>
          </section>
        )}
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  /* Updated dark mode colors to match Vercel-style design brief */
  --background: oklch(0.12 0 0); /* Dark background #1e1e2f equivalent */
  --foreground: oklch(0.985 0 0); /* White text */
  --card: oklch(0.17 0 0); /* Card background #2a2a3b equivalent */
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.17 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.55 0.15 160); /* Emerald-600 #059669 equivalent */
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.35 0.02 240); /* Dark gray #475569 equivalent */
  --secondary-foreground: oklch(0.94 0 0); /* Light gray #f1f5f9 equivalent */
  --muted: oklch(0.94 0 0);
  --muted-foreground: oklch(0.45 0.02 240); /* Muted gray #4b5563 equivalent */
  --accent: oklch(0.65 0.15 160); /* Emerald-500 #10b981 equivalent */
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.55 0.22 15); /* Red #e63946 equivalent */
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.24 0.01 240); /* Border #3c3c4b equivalent */
  --input: oklch(0.17 0 0);
  --ring: oklch(0.55 0.15 160); /* Focus ring emerald */
  --chart-1: oklch(0.65 0.15 160);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.45 0.02 240);
  --chart-4: oklch(0.55 0.22 15);
  --chart-5: oklch(0.94 0 0);
  --sidebar: oklch(0.17 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.55 0.15 160);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.65 0.15 160);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.24 0.01 240);
  --sidebar-ring: oklch(0.55 0.15 160);
}

@theme inline {
  --font-sans: var(--font-geist-sans); /* Updated font variable names to match Next.js Geist font setup */
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Added comprehensive print styles for professional resume printing */
@media print {
  /* Page setup */
  @page {
    size: A4;
    margin: 0.75in;
  }

/* Hide all UI elements including header, tabs, and navigation during print */
  .print\\:hidden,
  header,
  nav,
  .tabs-list,
  [role="tablist"],
  [role="tab"],
  button,
  .button,
  [role="button"],
  .no-print,
  .container > .tabs,
  .tabs > .tabs-list {
    display: none !important;
  }

/* Show only the resume preview content */
  [role="tabpanel"][data-state="active"] {
    display: block !important;
  }

[role="tabpanel"][data-state="inactive"] {
    display: none !important;
  }

/* Body and container styles */
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt !important;
    line-height: 1.4 !important;
  }

/* Container adjustments */
  .container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

/* Card styles for print */
  .bg-card,
  .bg-background {
    background: white !important;
    box-shadow: none !important;
    border: none !important;
  }

/* Modern theme header gradient background */
  .bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: linear-gradient(to right, #eff6ff, #eef2ff) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

/* Modern theme blue colors */
  .text-blue-600 {
    color: #2563eb !important;
  }

.border-blue-600 {
    border-color: #2563eb !important;
  }

.border-l-4.border-blue-600 {
    border-left: 4pt solid #2563eb !important;
  }

.border-blue-200 {
    border-color: #dbeafe !important;
  }

.border-l-2.border-blue-200 {
    border-left: 2pt solid #dbeafe !important;
  }

/* Classic theme styles */
  .border-gray-800 {
    border-color: #1f2937 !important;
  }

.border-b-2.border-gray-800 {
    border-bottom: 2pt solid #1f2937 !important;
  }

.border-gray-300 {
    border-color: #d1d5db !important;
  }

.border-gray-200 {
    border-color: #e5e7eb !important;
  }

.border-l-2.border-gray-200 {
    border-left: 2pt solid #e5e7eb !important;
  }

/* Typography for print with theme preservation */
  h1 {
    font-size: 20pt !important;
    font-weight: bold !important;
    margin-bottom: 8pt !important;
  }

h2 {
    font-size: 14pt !important;
    font-weight: bold !important;
    margin-bottom: 6pt !important;
    margin-top: 12pt !important;
    padding-bottom: 2pt !important;
  }

/* Remove generic border-bottom from h2 to preserve theme-specific styling */
  h2:not(.border-l-4) {
    border-bottom: 1pt solid #d1d5db !important;
  }

h3 {
    font-size: 12pt !important;
    font-weight: bold !important;
    color: black !important;
    margin-bottom: 3pt !important;
  }

p {
    font-size: 10pt !important;
    color: black !important;
    margin-bottom: 6pt !important;
  }

/* Links for print */
  a {
    text-decoration: none !important;
  }

a[href]:after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #666 !important;
  }

/* Lists for print */
  ul,
  ol {
    margin: 0 0 6pt 0 !important;
    padding-left: 16pt !important;
  }

li {
    font-size: 10pt !important;
    color: black !important;
    margin-bottom: 2pt !important;
  }

/* Spacing and layout */
  .space-y-6 > * + * {
    margin-top: 12pt !important;
  }

.space-y-4 > * + * {
    margin-top: 8pt !important;
  }

.space-y-2 > * + * {
    margin-top: 4pt !important;
  }

.mb-6 {
    margin-bottom: 12pt !important;
  }

.mb-4 {
    margin-bottom: 8pt !important;
  }

.mb-2 {
    margin-bottom: 4pt !important;
  }

/* Grid layouts for print */
  .grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }

/* Flexbox adjustments */
  .flex {
    display: flex !important;
  }

.justify-between {
    justify-content: space-between !important;
  }

.items-start {
    align-items: flex-start !important;
  }

.items-center {
    align-items: center !important;
  }

.justify-center {
    justify-content: center !important;
  }

.flex-wrap {
    flex-wrap: wrap !important;
  }

/* Preserve theme-specific border styles */
  .border-l-2 {
    border-left: 2pt solid #e5e7eb !important;
  }

.border-l-4 {
    border-left: 4pt solid #2563eb !important;
  }

.border-b {
    border-bottom: 1pt solid #d1d5db !important;
  }

.border-b-2 {
    border-bottom: 2pt solid #1f2937 !important;
  }

/* Padding adjustments */
  .pl-4 {
    padding-left: 8pt !important;
  }

.pb-6 {
    padding-bottom: 12pt !important;
  }

.pb-2 {
    padding-bottom: 4pt !important;
  }

.p-8 {
    padding: 0 !important;
  }

.p-6 {
    padding: 8pt !important;
  }

/* Preserve rounded corners for modern theme */
  .rounded-lg {
    border-radius: 4pt !important;
  }

/* Text alignment */
  .text-center {
    text-align: center !important;
  }

.text-left {
    text-align: left !important;
  }

.text-justify {
    text-align: justify !important;
  }

/* Page breaks */
  .print\\:break-inside-avoid,
  .resume-section,
  .experience-item,
  .education-item,
  .project-item {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

/* Specific resume sections */
  .resume-header {
    padding-bottom: 12pt !important;
    margin-bottom: 12pt !important;
  }

.resume-contact {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12pt !important;
    font-size: 9pt !important;
    margin-top: 6pt !important;
  }

.resume-contact span,
  .resume-contact a {
    font-size: 9pt !important;
    color: #666 !important;
  }

/* Date ranges */
  .date-range {
    font-size: 9pt !important;
    white-space: nowrap !important;
  }

/* Skills grid */
  .skills-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6pt !important;
  }

/* Profiles list */
  .profiles-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8pt !important;
  }

/* Shadow removal */
  .shadow-lg {
    box-shadow: none !important;
  }

/* Preserve theme-specific text colors while ensuring readability */
  .text-gray-900,
  .text-gray-800,
  .text-gray-700 {
    color: black !important;
  }

.text-gray-600,
  .text-gray-500 {
    color: #666 !important;
  }

.text-gray-400 {
    color: #999 !important;
  }

.text-muted-foreground {
    color: #666 !important;
  }

/* Keep blue colors for modern theme but ensure they print */
  .text-blue-600 {
    color: #2563eb !important;
  }

.text-blue-800 {
    color: #1e40af !important;
  }

/* Ensure maximum width usage */
  .max-w-4xl,
  .max-w-3xl {
    max-width: none !important;
  }

/* Remove any transforms or animations */
  * {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

/* Force color printing for theme elements */
  .bg-gradient-to-r,
  .border-blue-600,
  .border-blue-200,
  .text-blue-600,
  .border-l-4 {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

/* Minimal theme specific font weight overrides for print */
  .font-light {
    font-weight: 300 !important;
  }

.font-medium {
    font-weight: 500 !important;
  }

/* Minimal theme specific typography */
  .text-2xl.font-light {
    font-size: 16pt !important;
    font-weight: 300 !important;
  }

.text-lg.font-light {
    font-size: 12pt !important;
    font-weight: 300 !important;
  }

.text-lg.font-medium {
    font-size: 12pt !important;
    font-weight: 500 !important;
  }

.tracking-wide {
    letter-spacing: 0.025em !important;
  }

.uppercase {
    text-transform: uppercase !important;
  }
}

/* Added print-specific utility classes */
@layer utilities {
  .print-only {
    display: none;
  }

@media print {
    .print-only {
      display: block;
    }

.screen-only {
      display: none !important;
    }
  }
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isEdit="true"
"use client"

import * as React from "react"

type Theme = "dark" | "light" | "system"

type ThemeProviderProps = {
  children: React.ReactNode
  defaultTheme?: Theme
  storageKey?: string
}

type ThemeProviderState = {
  theme: Theme
  setTheme: (theme: Theme) => void
}

const initialState: ThemeProviderState = {
  theme: "system",
  setTheme: () => null,
}

const ThemeProviderContext = React.createContext<ThemeProviderState>(initialState)

export function ThemeProvider({
  children,
  defaultTheme = "system",
  storageKey = "vite-ui-theme",
  ...props
}: ThemeProviderProps) {
  const [theme, setTheme] = React.useState<Theme>(defaultTheme)

React.useEffect(() => {
    if (typeof window !== "undefined") {
      const storedTheme = localStorage.getItem(storageKey) as Theme
      if (storedTheme) {
        setTheme(storedTheme)
      }
    }
  }, [storageKey])

React.useEffect(() => {
    const root = window.document.documentElement

root.classList.remove("light", "dark")

if (theme === "system") {
      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"

root.classList.add(systemTheme)
      return
    }

root.classList.add(theme)
  }, [theme])

const value = {
    theme,
    setTheme: (theme: Theme) => {
      if (typeof window !== "undefined") {
        localStorage.setItem(storageKey, theme)
      }
      setTheme(theme)
    },
  }

return (
    <ThemeProviderContext.Provider {...props} value={value}>
      {children}
    </ThemeProviderContext.Provider>
  )
}

export const useTheme = () => {
  const context = React.useContext(ThemeProviderContext)

if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider")

return context
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { type Resume, createEmptyResume } from "@/lib/types/resume"
import { ResumeForm } from "@/components/resume-form"
import { ResumePreview } from "@/components/resume-preview"
import { FileUpload } from "@/components/file-upload"
import { ThemeToggle } from "@/components/theme-toggle"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Download, FileText, Eye, Save, Trash2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export default function ResumePage() {
  const [resume, setResume] = useState<Resume>(createEmptyResume())
  const [activeTab, setActiveTab] = useState("edit")
  const { toast } = useToast()

const handleResumeChange = (updatedResume: Resume) => {
    setResume(updatedResume)
  }

const handleFileUpload = (uploadedResume: Resume) => {
    setResume(uploadedResume)
    // Switch to edit tab after successful upload
    setActiveTab("edit")
  }

const handleDownload = () => {
    try {
      const resumeName = resume.basics?.name || "resume"
      const sanitizedName = resumeName.toLowerCase().replace(/[^a-z0-9]/g, "-")
      const timestamp = new Date().toISOString().split("T")[0]
      const filename = `${sanitizedName}-${timestamp}.json`

// Add metadata to the JSON
      const resumeWithMetadata = {
        ...resume,
        $schema: "https://raw.githubusercontent.com/jsonresume/resume-schema/v1.0.0/schema.json",
        meta: {
          canonical: "https://raw.githubusercontent.com/jsonresume/resume-schema/v1.0.0/schema.json",
          version: "v1.0.0",
          lastModified: new Date().toISOString(),
          ...resume.meta,
        },
      }

const dataStr = JSON.stringify(resumeWithMetadata, null, 2)
      const dataUri = "data:application/json;charset=utf-8," + encodeURIComponent(dataStr)

const linkElement = document.createElement("a")
      linkElement.setAttribute("href", dataUri)
      linkElement.setAttribute("download", filename)
      linkElement.click()

toast({
        title: "Resume downloaded",
        description: `Saved as ${filename}`,
      })
    } catch (error) {
      toast({
        title: "Download failed",
        description: "There was an error downloading your resume.",
        variant: "destructive",
      })
    }
  }

const handleSaveLocal = () => {
    try {
      if (typeof window !== "undefined") {
        const resumeData = JSON.stringify(resume)
        localStorage.setItem("resume-builder-data", resumeData)
        localStorage.setItem("resume-builder-timestamp", new Date().toISOString())

toast({
          title: "Resume saved locally",
          description: "Your resume has been saved to browser storage.",
        })
      }
    } catch (error) {
      toast({
        title: "Save failed",
        description: "Could not save to browser storage.",
        variant: "destructive",
      })
    }
  }

const handleLoadLocal = () => {
    try {
      if (typeof window !== "undefined") {
        const savedData = localStorage.getItem("resume-builder-data")
        if (savedData) {
          const savedResume = JSON.parse(savedData) as Resume
          setResume(savedResume)

const timestamp = localStorage.getItem("resume-builder-timestamp")
          const timeStr = timestamp ? new Date(timestamp).toLocaleString() : "unknown time"

toast({
            title: "Resume loaded",
            description: `Loaded resume saved at ${timeStr}`,
          })
        } else {
          toast({
            title: "No saved resume found",
            description: "No resume data found in browser storage.",
            variant: "destructive",
          })
        }
      }
    } catch (error) {
      toast({
        title: "Load failed",
        description: "Could not load from browser storage.",
        variant: "destructive",
      })
    }
  }

const handleClear = () => {
    if (confirm("Are you sure you want to clear all resume data? This action cannot be undone.")) {
      setResume(createEmptyResume())
      toast({
        title: "Resume cleared",
        description: "All resume data has been cleared.",
      })
    }
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card print:hidden">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <FileText className="h-8 w-8 text-primary" />
              <div>
                <h1 className="text-2xl font-bold text-foreground">Resume Builder</h1>
                <p className="text-sm text-muted-foreground">Professional resumes with JSON Resume schema</p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <ThemeToggle />
              <div className="h-4 w-px bg-border mx-2" />
              <Button onClick={handleLoadLocal} variant="ghost" size="sm">
                <FileText className="h-4 w-4 mr-2" />
                Load Saved
              </Button>
              <Button onClick={handleSaveLocal} variant="ghost" size="sm">
                <Save className="h-4 w-4 mr-2" />
                Save Local
              </Button>
              <Button
                onClick={handleClear}
                variant="ghost"
                size="sm"
                className="text-destructive hover:text-destructive"
              >
                <Trash2 className="h-4 w-4 mr-2" />
                Clear
              </Button>
              <div className="h-4 w-px bg-border mx-2" />
              <Button onClick={handleDownload} variant="outline" size="sm">
                <Download className="h-4 w-4 mr-2" />
                Download JSON
              </Button>
            </div>
          </div>
        </div>
      </header>

{/* Main Content */}
      <div className="container mx-auto px-4 py-6">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid w-full grid-cols-3 mb-6 bg-card border border-border print:hidden">
            <TabsTrigger
              value="upload"
              className="flex items-center gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
            >
              <FileText className="h-4 w-4" />
              Upload Resume
            </TabsTrigger>
            <TabsTrigger
              value="edit"
              className="flex items-center gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
            >
              <FileText className="h-4 w-4" />
              Edit Resume
            </TabsTrigger>
            <TabsTrigger
              value="preview"
              className="flex items-center gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
            >
              <Eye className="h-4 w-4" />
              Preview
            </TabsTrigger>
          </TabsList>

<TabsContent value="upload" className="space-y-6">
            <Card className="p-6">
              <div className="space-y-4">
                <div>
                  <h2 className="text-xl font-semibold mb-2">Upload Existing Resume</h2>
                  <p className="text-muted-foreground text-sm mb-4">
                    Upload a JSON resume file following the JSON Resume schema format.
                  </p>
                </div>
                <FileUpload onUpload={handleFileUpload} />
              </div>
            </Card>
          </TabsContent>

About

Tags

Share

About

Tags

Share

More from jouwdan

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jouwdan

More Templates Like This