FlippingCard

[
  {
    "byline": "YAML WRITING TIPS",
    "title": "Be Direct and Clear",
    "description": "Direct and clear language in YAML fields enhances user understanding, reducing confusion and errors.",
    "frontContent": [
      "By eliminating unnecessary words, YAML becomes more user-friendly and maintainable.",
      "This approach allows users to grasp required information quickly."
    ],
    "checkYourKnowledge": {
      "question": "Which is the most direct and clear YAML input for a component name?",
      "options": [
        "Please provide the name of your component",
        "Enter the component's unique identifier",
        "The component name goes here",
        "Component name"
      ],
      "correctAnswer": 1,
      "explanations": [
        { "text": "Too verbose and polite for a YAML field.", "isCorrect": false },
        { "text": "Direct, clear, and specifies that it should be unique — an important aspect of component naming.", "isCorrect": true },
        { "text": "Not clear enough about what kind of input is expected.", "isCorrect": false },
        { "text": "Concise, but doesn't provide enough guidance.", "isCorrect": false }
      ]
    }
  },
  {
    "byline": "YAML WRITING TIPS",
    "title": "Use Short, Specific Descriptions",
    "description": "Concise, specific descriptions in YAML fields balance brevity and informativeness.",
    "frontContent": [
      "This approach reduces cognitive load and improves scannability.",
      "The goal is to clearly communicate requirements while avoiding information overload."
    ],
    "checkYourKnowledge": {
      "question": "Which description is both short and specific for a 'system' field?",
      "options": [
        "The system",
        "Enter the system name this component is part of",
        "Specify the broader system context for dependency tracking",
        "Please provide the name of the system that this particular component belongs to"
      ],
      "correctAnswer": 2,
      "explanations": [
        { "text": "Too vague — doesn't provide any useful information.", "isCorrect": false },
        { "text": "More specific, but doesn't explain why this information is important.", "isCorrect": false },
        { "text": "Concise and informative — explains what to enter and why it matters.", "isCorrect": true },
        { "text": "Too verbose — doesn't add much beyond the simpler options.", "isCorrect": false }
      ]
    }
  }
]

'use client'

import { FlippingCard } from '@/components/custom/flipping-card'
import cardData from '@/data/effective-yaml-inputs.json'

export function EffectiveYamlInputs() {
  return <FlippingCard data={cardData} />
}

import { EffectiveYamlInputs } from '@/components/custom/effective-yaml-inputs'

export const mdxComponents = {
  // ... existing components
  EffectiveYamlInputs,
}