Interactive Component Library Documentation

Interactive Component Library

This blog features a comprehensive library of reusable interactive components designed to make learning more engaging. All components are:

• ✅ Reusable - Use in any MDX blog post
• ✅ Configurable - Customizable through props
• ✅ Responsive - Work on all screen sizes
• ✅ Dark mode compatible - Adapt to theme automatically
• ✅ Self-contained - No external dependencies needed

Available Components

1. WaveVisualizer

Interactive sound wave visualizer for exploring audio properties.

<WaveVisualizer 
  title="Sound Wave Properties"
  showHarmonics={true}
  showPhase={true}
/>

Props:

• title (string): Component title
• showHarmonics (boolean): Enable harmonic controls
• showPhase (boolean): Enable phase control

Example:

2. SamplingVisualizer

Demonstrates digital audio concepts: waveforms, sample rate, and bit depth.

<SamplingVisualizer 
  title="Digital Audio Concepts"
/>

Props:

• title (string): Component title

Example:

3. CodePlayground

Live JavaScript code editor and executor.

<CodePlayground 
  title="JavaScript Example"
  initialCode={`console.log('Hello World');`}
  language="javascript"
/>

Props:

• title (string): Component title
• initialCode (string): Starting code
• language (string): Programming language (currently JavaScript)

Example:

4. PythonSimulator

Simplified Python code simulator for demonstrations.

<PythonSimulator
  title="Python Demo"
  initialCode={`print("Hello Python")`}
/>

Props:

• title (string): Component title
• initialCode (string): Starting Python code

Example:

# Python simulator example
x = 10
y = 20
result = x + y

print(f"x = {x}")
print(f"y = {y}")
print(f"x + y = {result}")

# Arrays (simplified numpy)
data = np.zeros(5)
print(f"Array shape: {data.shape}")

5. InteractiveChart

Dynamic data visualization with line and bar charts.

<InteractiveChart 
  title="Data Visualization"
  type="line"
  data={[
    { name: 'Jan', value: 100, value2: 80 },
    { name: 'Feb', value: 120, value2: 90 }
  ]}
  color="#3B82F6"
  color2="#10B981"
/>

Props:

• title (string): Chart title
• type ('line' | 'bar'): Chart type
• data (array): Data points with name, value, optional value2
• color (string): Primary series color
• color2 (string): Secondary series color

Example:

6. Quiz

Interactive quiz component with scoring and feedback.

<Quiz 
  title="Knowledge Check"
  questions={[
    {
      question: "What is 2 + 2?",
      options: ["3", "4", "5", "6"],
      correct: 1,
      explanation: "2 + 2 equals 4"
    }
  ]}
/>

Props:

• title (string): Quiz title
• questions (array): Array of question objects
  • question (string): Question text
  • options (string[]): Answer choices
  • correct (number): Index of correct answer
  • explanation (string): Optional explanation

Example:

7. Tabs

Organize content in tabbed interface.

<Tabs 
  tabs={[
    { 
      label: "Tab 1", 
      content: <div>Content 1</div> 
    },
    { 
      label: "Tab 2", 
      content: <div>Content 2</div> 
    }
  ]}
  defaultTab={0}
/>

Props:

• tabs (array): Tab objects with label and content
• defaultTab (number): Initially active tab index

Example:

8. AudioPlayer

Custom audio player with enhanced controls.

<AudioPlayer 
  src="https://example.com/audio.mp3"
  title="Audio Title"
/>

Props:

• src (string): Audio file URL
• title (string): Player title

Example:

Usage Guidelines

When to Use Each Component

Integration in MDX Files

1. Import Not Required: Components are automatically available in MDX files
2. Use JSX Syntax: Write components as JSX elements
3. Pass Props: Configure components through props
4. Nest Content: Some components accept JSX content as props

Example MDX File Structure

---
title: 'Your Blog Post'
date: '2024-03-22'
tags: ['topic']
---

## Introduction

Your content here...

## Interactive Demo

<WaveVisualizer title="Sound Demo" />

## Code Example

<CodePlayground 
  title="Try It"
  initialCode={`console.log('Edit me!');`}
/>

## Conclusion

Your summary...

Advanced Examples

Combining Multiple Components

You can create rich learning experiences by combining components:

Component Development

Adding New Components

1. Create component in /components/MDXComponents/
2. Export from /components/MDXComponents.tsx
3. Component is automatically available in all MDX files

Component Requirements

• Must be client-side components ('use client')
• Should handle loading and error states
• Must be responsive and theme-aware
• Should provide meaningful defaults

Tips & Best Practices

1. Performance: Components lazy-load for better performance
2. Accessibility: All components support keyboard navigation
3. Mobile: Test components on mobile devices
4. Content: Keep examples concise and relevant
5. Documentation: Always provide clear explanations

Troubleshooting

Common Issues

• Component not rendering: Check prop syntax
• Dark mode issues: Ensure using theme-aware classes
• Performance: Large datasets may slow charts
• Audio playback: Check CORS headers for audio files

Future Components

Planned additions to the library:

• 3D Visualizer: Three.js-based 3D graphics
• Network Graph: Interactive network diagrams
• Timeline: Event timeline component
• Code Differ: Side-by-side code comparison
• Math Renderer: LaTeX equation rendering

Conclusion

This component library enables creation of highly interactive and engaging educational content. Each component is designed to enhance learning through hands-on interaction and immediate feedback.

Use these components to transform static blog posts into dynamic learning experiences!