Advanced MDX Components

This post demonstrates more complex interactive components that work reliably in Astro MDX by separating them into individual component files.

Interactive Todo List

A complete CRUD (Create, Read, Update, Delete) todo application with state management:

Features:

• Add new todos with Enter key or button
• Toggle completion status
• Delete todos
• Real-time statistics

Dynamic Form with Validation

A comprehensive contact form with real-time validation and submission handling:

Features:

• Real-time field validation
• Multiple input types (text, email, select, textarea, checkbox)
• Form submission with success state
• Error handling and display

Interactive Data Dashboard

A dynamic dashboard with metric switching and time range selection:

Features:

• Multiple metrics (Users, Revenue, Orders)
• Time range filtering (24h, 7d, 30d, 90d)
• Interactive metric cards
• Responsive grid layout

Search and Filter Component

Advanced list filtering with search, sort, and category filtering:

Features:

• Real-time search across name and description
• Sort by name or popularity
• Category filtering
• Dynamic result count
• Responsive card layout

Key Learnings

Component Architecture

• Separation of Concerns: Components are in separate .tsx files
• Import Strategy: Use relative imports from MDX to component files
• Client Directives: Add client:load for interactive components

Performance Considerations

• Bundle Size: Each component adds to the JavaScript bundle
• Loading Strategy: Use appropriate client directives (client:load, client:visible, etc.)
• State Management: Keep state local to components when possible

Styling Approach

• Inline Styles: Most reliable across different environments
• CSS-in-JS: Can be used but may require additional configuration
• Tailwind: Available but requires class processing setup

Best Practices

1. Start Simple: Begin with basic HTML elements, then add complexity
2. Test Early: Verify components work in the Astro environment
3. Error Boundaries: Consider error handling for complex components
4. Accessibility: Include proper ARIA labels and keyboard navigation

Code Examples

Component Structure

// src/components/MyComponent.tsx
import { useState } from 'react';

export function MyComponent() {
  const [state, setState] = useState(initialValue);
  
  return (
    <div>
      {/* Component JSX */}
    </div>
  );
}

MDX Import and Usage

---
title: My MDX Post
---

import { MyComponent } from '../../components/MyComponent.tsx';

# My Post

<MyComponent client:load />

Conclusion

Separating complex components into individual files provides several advantages:

• Better Organization: Each component has its own file
• Reusability: Components can be used across multiple MDX files
• Development Experience: Better IDE support and debugging
• Maintainability: Easier to update and test individual components

This approach allows for sophisticated interactive content while maintaining the simplicity and power of MDX for content authoring.

All components use React hooks for state management and inline styles for reliable rendering across different environments.