ComponentCard Component

Overview

The ComponentCard component provides a card-based interface for displaying components with labels and images. It's commonly used for component galleries, documentation showcases, and component libraries.

Basic Usage

import { ComponentCard } from '@dashflowx/core'

export default function ComponentCardExample() {
  return (
    <ComponentCard 
      label="Button Component"
      image={<div>🔘</div>}
    />
  )
}

Preview:

Button Component

🔘

Props

Prop	Type	Default	Description
`label`	`string`	`'Component Card'`	The label text for the component card
`image`	`JSX.Element`	-	The image or icon to display in the card
`className`	`string`	`''`	Additional CSS classes for the container

Examples

Basic Component Card

<ComponentCard 
  label="Button Component"
  image={<div>🔘</div>}
/>

Preview:

Button Component

🔘

Icon Component Card

<ComponentCard 
  label="Icon Component"
  image={<div>⭐</div>}
/>

Preview:

Icon Component

⭐

Custom Styled Component Card

<ComponentCard 
  label="Custom Styled"
  image={<div>🎨</div>}
  className="border-2 border-blue-500 rounded-xl"
/>

Preview:

Custom Styled

🎨

Component Gallery

const components = [
  { label: 'Button', image: '🔘' },
  { label: 'Input', image: '📝' },
  { label: 'Card', image: '🃏' },
  { label: 'Modal', image: '🪟' },
  { label: 'Table', image: '📊' },
  { title: 'Form', image: '📋' }
];

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  {components.map((component, index) => (
    <ComponentCard
      key={index}
      label={component.label}
      image={<div className="text-4xl">{component.image}</div>}
    />
  ))}
</div>

Preview:

Button

🔘

Input

📝

Card

🃏

Modal

🪟

Documentation Showcase

const docComponents = [
  {
    label: 'Getting Started',
    image: <div className="text-4xl">🚀</div>,
    description: 'Learn the basics'
  },
  {
    label: 'Components',
    image: <div className="text-4xl">🧩</div>,
    description: 'Browse all components'
  },
  {
    label: 'Examples',
    image: <div className="text-4xl">💡</div>,
    description: 'See real-world usage'
  },
  {
    label: 'API Reference',
    image: <div className="text-4xl">📚</div>,
    description: 'Complete API docs'
  }
];

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  {docComponents.map((item, index) => (
    <ComponentCard
      key={index}
      label={item.label}
      image={item.image}
      className="hover:scale-105 transition-transform"
    />
  ))}
</div>

Interactive Component Cards

const [selectedComponent, setSelectedComponent] = useState(null);

const interactiveComponents = [
  { id: 1, label: 'Button', image: '🔘', category: 'Form' },
  { id: 2, label: 'Input', image: '📝', category: 'Form' },
  { id: 3, label: 'Card', image: '🃏', category: 'Layout' },
  { id: 4, label: 'Modal', image: '🪟', category: 'Overlay' }
];

<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
  {interactiveComponents.map((component) => (
    <ComponentCard
      key={component.id}
      label={component.label}
      image={<div className="text-4xl">{component.image}</div>}
      className={`cursor-pointer transition-all ${
        selectedComponent === component.id 
          ? 'ring-2 ring-blue-500 bg-blue-50' 
          : 'hover:bg-gray-50'
      }`}
      onClick={() => setSelectedComponent(component.id)}
    />
  ))}
</div>

Category-Based Cards

const categories = {
  'Form Components': [
    { label: 'Button', image: '🔘' },
    { label: 'Input', image: '📝' },
    { label: 'Select', image: '📋' },
    { label: 'Checkbox', image: '☑️' }
  ],
  'Layout Components': [
    { label: 'Card', image: '🃏' },
    { label: 'Grid', image: '📊' },
    { label: 'Container', image: '📦' },
    { label: 'Flex', image: '🔧' }
  ],
  'Overlay Components': [
    { label: 'Modal', image: '🪟' },
    { label: 'Tooltip', image: '💬' },
    { label: 'Popover', image: '💭' },
    { label: 'Alert', image: '⚠️' }
  ]
};

{Object.entries(categories).map(([category, components]) => (
  <div key={category} className="mb-8">
    <h3 className="text-xl font-semibold mb-4">{category}</h3>
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {components.map((component, index) => (
        <ComponentCard
          key={index}
          label={component.label}
          image={<div className="text-4xl">{component.image}</div>}
        />
      ))}
    </div>
  </div>
))}

Common Use Cases

Component Library

const componentLibrary = [
  { label: 'Button', image: '🔘', status: 'stable' },
  { label: 'Input', image: '📝', status: 'stable' },
  { label: 'Card', image: '🃏', status: 'stable' },
  { label: 'Modal', image: '🪟', status: 'beta' },
  { label: 'Tooltip', image: '💬', status: 'alpha' }
];

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {componentLibrary.map((component, index) => (
    <ComponentCard
      key={index}
      label={component.label}
      image={<div className="text-4xl">{component.image}</div>}
      className={`relative ${
        component.status === 'alpha' ? 'border-orange-300' :
        component.status === 'beta' ? 'border-yellow-300' :
        'border-green-300'
      }`}
    />
  ))}
</div>

Feature Showcase

const features = [
  {
    label: 'Responsive Design',
    image: <div className="text-4xl">📱</div>,
    description: 'Works on all devices'
  },
  {
    label: 'Dark Mode',
    image: <div className="text-4xl">🌙</div>,
    description: 'Built-in dark theme support'
  },
  {
    label: 'Accessibility',
    image: <div className="text-4xl">♿</div>,
    description: 'WCAG compliant components'
  },
  {
    label: 'Customizable',
    image: <div className="text-4xl">🎨</div>,
    description: 'Easy to customize and theme'
  }
];

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  {features.map((feature, index) => (
    <ComponentCard
      key={index}
      label={feature.label}
      image={feature.image}
      className="hover:shadow-xl transition-shadow"
    />
  ))}
</div>

Template Gallery

const templates = [
  { label: 'Dashboard', image: '📊', category: 'Admin' },
  { label: 'Landing Page', image: '🏠', category: 'Marketing' },
  { label: 'Blog', image: '📝', category: 'Content' },
  { label: 'E-commerce', image: '🛒', category: 'Commerce' },
  { label: 'Portfolio', image: '💼', category: 'Personal' },
  { label: 'Documentation', image: '📚', category: 'Technical' }
];

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {templates.map((template, index) => (
    <ComponentCard
      key={index}
      label={template.label}
      image={<div className="text-4xl">{template.image}</div>}
      className="group hover:scale-105 transition-transform"
    />
  ))}
</div>

Best Practices

1. Clear Labels

Use clear and descriptive labels for component cards.

// ✅ Good - Clear labels
<ComponentCard 
  label="Primary Button Component"
  image={<div>🔘</div>}
/>

// ❌ Avoid - Unclear labels
<ComponentCard 
  label="Btn"
  image={<div>🔘</div>}
/>

2. Consistent Images

Use consistent image styles and sizes.

// ✅ Good - Consistent images
<ComponentCard 
  label="Button"
  image={<div className="text-4xl">🔘</div>}
/>

<ComponentCard 
  label="Input"
  image={<div className="text-4xl">📝</div>}
/>

3. Logical Grouping

Group related components together.

// ✅ Good - Logical grouping
const formComponents = [
  { label: 'Button', image: '🔘' },
  { label: 'Input', image: '📝' },
  { label: 'Select', image: '📋' }
];

const layoutComponents = [
  { label: 'Card', image: '🃏' },
  { label: 'Grid', image: '📊' },
  { label: 'Container', image: '📦' }
];

4. Responsive Design

Use responsive grid layouts.

// ✅ Good - Responsive grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {components.map(component => (
    <ComponentCard key={component.id} {...component} />
  ))}
</div>

5. Interactive States

Provide visual feedback for interactive cards.

// ✅ Good - Interactive states
<ComponentCard 
  label="Interactive Card"
  image={<div>🔘</div>}
  className="cursor-pointer hover:scale-105 transition-transform"
  onClick={handleClick}
/>

Customization

Custom Styling

You can customize the component card appearance using CSS classes:

<ComponentCard 
  label="Custom Styled"
  image={<div>🎨</div>}
  className="border-2 border-purple-500 rounded-xl shadow-lg hover:shadow-xl"
/>

Different Themes

Use different themes for different contexts:

// Light theme
<ComponentCard 
  label="Light Theme"
  image={<div>☀️</div>}
  className="bg-white border-gray-200"
/>

// Dark theme
<ComponentCard 
  label="Dark Theme"
  image={<div>🌙</div>}
  className="bg-gray-900 border-gray-700 text-white"
/>

Size Variations

Use different sizes for different emphasis levels:

// Small cards
<ComponentCard 
  label="Small"
  image={<div>🔘</div>}
  className="h-32"
/>

// Large cards
<ComponentCard 
  label="Large"
  image={<div>🔘</div>}
  className="h-80"
/>

Advanced Usage

Dynamic Content

Load component cards dynamically:

const [components, setComponents] = useState([]);

useEffect(() => {
  // Load components from API
  fetchComponents().then(setComponents);
}, []);

Search and Filter

Implement search and filter functionality:

const [searchTerm, setSearchTerm] = useState('');
const [filterCategory, setFilterCategory] = useState('all');

const filteredComponents = useMemo(() => {
  return components.filter(component => 
    component.label.toLowerCase().includes(searchTerm.toLowerCase()) &&
    (filterCategory === 'all' || component.category === filterCategory)
  );
}, [components, searchTerm, filterCategory]);

Lazy Loading

Implement lazy loading for large component galleries:

const [visibleComponents, setVisibleComponents] = useState(12);

const loadMore = () => {
  setVisibleComponents(prev => prev + 12);
};

return (
  <>
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {components.slice(0, visibleComponents).map(component => (
        <ComponentCard key={component.id} {...component} />
      ))}
    </div>
    {visibleComponents < components.length && (
      <button onClick={loadMore} className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
        Load More
      </button>
    )}
  </>
);

Card: For general card layouts
Grid: For grid layouts
Image: For image display
Typography: For text styling
Button: For interactive elements

API Reference

For the complete API reference and advanced usage patterns, see the ComponentCard API documentation.

Overview

Basic Usage

Props

Examples

Basic Component Card

Icon Component Card

Custom Styled Component Card

Component Gallery

Documentation Showcase

Interactive Component Cards

Category-Based Cards

Common Use Cases

Component Library

Feature Showcase

Template Gallery

Best Practices

1. Clear Labels

2. Consistent Images

3. Logical Grouping

4. Responsive Design

5. Interactive States

Customization

Custom Styling

Different Themes

Size Variations

Advanced Usage

Dynamic Content

Search and Filter

Lazy Loading

Related Components

API Reference