): Code appearance
+ * - overflow-x-auto: Handles long lines gracefully
+ *
+ * ## Usage Examples
+ *
+ * ```tsx
+ * // Success response with title
+ *
+ *
+ * // Error response without title
+ *
+ *
+ * // Custom status label
+ *
+ * ```
+ *
+ * ## Content Guidelines
+ *
+ * Response Content:
+ * - Use actual JSON/text from your API
+ * - Format with proper indentation (2 or 4 spaces)
+ * - Include realistic data (not just placeholders)
+ * - Show relevant fields (omit excessive detail)
+ * - Keep under 20-30 lines for readability
+ *
+ * Status Labels:
+ * - Include status code (200, 400, etc.)
+ * - Add descriptive text (Success, Error, Created)
+ * - Use checkmark (✓) for success
+ * - Use X (✗) for errors
+ * - Keep concise (2-3 words max)
+ *
+ * ## Accessibility
+ *
+ * - Semantic HTML structure ()
+ * - Color is supplementary (text + symbols)
+ * - High contrast text colors
+ * - StatusBadge includes aria-label
+ * - Proper heading hierarchy if title used
+ * - Scrollable overflow for long content
+ *
+ * ## Visual Language
+ *
+ * The ResponseBlock creates:
+ * - Immediate status recognition through color
+ * - Professional code presentation
+ * - Clear example/documentation relationship
+ * - Consistent pattern across all API docs
+ * - Supports learn-by-example documentation style
+ *
+ * @component
+ * @example
+ *
+ */
+
+import { StatusBadge, StatusType } from './StatusBadge';
+
+/**
+ * Props for the ResponseBlock component
+ */
+export interface ResponseBlockProps {
+ /** Status type determining color scheme */
+ status: Extract;
+ /** HTTP status code (e.g., 200, 400, 500) */
+ statusCode: number;
+ /** The response content to display (typically JSON) */
+ content: string;
+ /** Optional title above the response */
+ title?: string;
+ /** Optional custom status label (default: auto-generated from statusCode) */
+ statusLabel?: string;
+ /** Optional CSS class name for additional styling */
+ className?: string;
+}
+
+/**
+ * Status styles mapping status type to background, border, and shadow colors
+ */
+const statusStyles = {
+ success: 'bg-green-500/5 border-green-500/30 shadow-lg shadow-green-500/10',
+ error: 'bg-red-500/5 border-red-500/30 shadow-lg shadow-red-500/10',
+};
+
+/**
+ * Generate default status label from code and status
+ */
+const getDefaultStatusLabel = (code: number, status: 'success' | 'error'): string => {
+ const symbol = status === 'success' ? '✓' : '✗';
+ const text = status === 'success' ? 'Success' : 'Error';
+ return `${symbol} ${code} ${text}`;
+};
+
+export const ResponseBlock = ({
+ status,
+ statusCode,
+ content,
+ title,
+ statusLabel,
+ className = '',
+}: ResponseBlockProps) => {
+ const label = statusLabel || getDefaultStatusLabel(statusCode, status);
+
+ return (
+
+ {/* Status Badge - Floating Top Right */}
+
+
+ {label}
+
+
+
+ {/* Optional Title */}
+ {title && (
+
{title}
+ )}
+
+ {/* Response Content */}
+
+ {content}
+
+