Components/AI
Editable Question
Interactive question component with inline editing, copy functionality, and real-time updates
How can I implement a responsive navigation menu in React?
Example
export default function EditableQuestionExample() {
const handleQuestionChange = (newQuestion: string) => {
console.log('Question updated:', newQuestion)
}
return (
<EditableQuestion
question="What are the best practices for state management in React?"
onQuestionChange={handleQuestionChange}
className="w-full"
/>
)
}Documentation
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes for styling |
question | string | "" | The question text to display and edit |
onQuestionChange | (newQuestion: string) => void | undefined | Callback when the question text changes |
Types
type EditableQuestionProps = {
className?: string
question?: string
onQuestionChange?: (newQuestion: string) => void
}Features
- Inline Editing: Click to edit question text directly in the interface
- Copy Functionality: One-click copy with visual feedback and success state
- Keyboard Shortcuts: Ctrl+Enter to save, Escape to cancel
- Real-time Updates: Immediate callback when question content changes
- Visual Feedback: Clear editing states and hover effects
- Responsive Design: Adapts to different screen sizes with proper text wrapping
- Dark Mode Support: Full dark mode compatibility with appropriate styling
- Accessibility Focused: Proper ARIA labels and keyboard navigation support