🎨 MuizenMesh Webring Widget Demo

Explore different themes and configurations for the React/TypeScript widget. This interactive demo shows all available options for integrating the MuizenMesh Webring into your projects.

📁 Demo Files: View on GitHub | Open Interactive Demo | HTML/CSS Themes Demo

🚀 Quick Start

Copy the widget files to your React project:

npm install react next

# Copy these files to your project:
# - widgets/WebringWidget.tsx
# - widgets/WebringWidget.module.css  
# - widgets/types.ts

🎨 Available Themes

<WebringWidget title="Community Links" />

<WebringWidget 
  theme="minimal" 
  size="small" 
  showDescription={false}
/>

<WebringWidget 
  title="MuizenMesh Community"
  theme="ocean" 
  size="large"
/>

<WebringWidget 
  title="Community Sites"
  theme="sunset" 
  showImage={false}
/>

<WebringWidget 
  title="MuizenMesh Webring"
  theme="dark"
/>

<WebringWidget 
  title="Tokyo Webring"
  theme="tokyo"
  size="medium"
/>

<WebringWidget 
  title="Dark Community"
  theme="dracula"
  showImage={false}
/>

<WebringWidget 
  title="Retro Webring"
  theme="disco"
  size="large"
/>

<WebringWidget 
  title="Surprise Me!"
  theme="random"
/>

📏 Size Variants

• Small: Compact version perfect for sidebars
• Medium: Standard size (default)
• Large: Larger with more padding

🔧 Props

All props are optional with sensible defaults:

interface WebringWidgetProps {
  title?: string;           // Custom title (default: "Webring")
  webringUrl?: string;      // Webring URL (default: "https://meshring.netlify.app")
  theme?: 'default' | 'minimal' | 'ocean' | 'sunset' | 'dark' | 'tokyo' | 'dracula' | 'disco' | 'random';
  size?: 'small' | 'medium' | 'large';
  showImage?: boolean;      // Show surfer logo (default: true)
  showDescription?: boolean; // Show description text (default: true)
  className?: string;       // Additional CSS class
}

📚 Documentation

For complete documentation, installation instructions, and more examples:

• Widget Documentation
• Usage Examples
• Interactive Demo