Information Grid Component

A responsive React component that displays information items in a customizable grid layout with icons, titles, and values.

Features

• Responsive Design: Configure different column counts for different screen sizes (xs, sm, md, lg, xl)
• Flexible Layout: Each item displays with an icon, title, and value in a clean, organized format
• Customizable Styling: Built with Tailwind CSS and supports custom className props
• Mobile Optimized: Title applies minimum width for better mobile viewing experience
• TypeScript Support: Fully typed with TypeScript interfaces

Installation

npm install @metadiv-studio/information-grid

Usage

Basic Usage

import { InformationGrid, InformationGridItem } from '@metadiv-studio/information-grid';
import { User, Mail, Phone } from 'lucide-react';

const items: InformationGridItem[] = [
  {
    icon: <User className="w-5 h-5" />,
    title: "Full Name",
    value: "John Doe"
  },
  {
    icon: <Mail className="w-5 h-5" />,
    title: "Email",
    value: "[email protected]"
  },
  {
    icon: <Phone className="w-5 h-5" />,
    title: "Phone",
    value: "+1 (555) 123-4567"
  }
];

function MyComponent() {
  return <InformationGrid items={items} />;
}

Custom Column Configuration

<InformationGrid 
  items={items} 
  cols={{ 
    xs: 1,    // 1 column on extra small screens
    sm: 2,    // 2 columns on small screens
    md: 3,    // 3 columns on medium screens
    lg: 4,    // 4 columns on large screens
    xl: 5     // 5 columns on extra large screens
  }}
/>

Custom Styling

<InformationGrid 
  items={items} 
  className="gap-6 max-w-4xl mx-auto"
/>

Props

InformationGridProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | InformationGridItem[] | required | Array of information items to display | | cols | Object | { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 } | Column configuration for different breakpoints | | className | string | "" | Additional CSS classes to apply |

InformationGridItem

| Prop | Type | Description | |------|------|-------------| | icon | React.ReactNode | Icon element to display (recommended: 20x20 or 24x24) | | title | React.ReactNode | Title text or element | | value | React.ReactNode | Value text or element |

Breakpoints

The component uses Tailwind CSS breakpoints:

• xs: Default (mobile first)
• sm: 640px and up
• md: 768px and up
• lg: 1024px and up
• xl: 1280px and up

Layout Details

• Icon: Fixed width (32px) with centered alignment
• Title: Minimum width of 120px on mobile, 1/3 width on larger screens
• Value: Takes remaining space with text truncation
• Responsive: Stacks vertically on mobile, horizontal layout on larger screens
• Spacing: Consistent 16px gaps between grid items and 12px gaps within items

Examples

Single Column Layout

<InformationGrid 
  items={items} 
  cols={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }}
  className="max-w-2xl mx-auto"
/>

Compact Grid

<InformationGrid 
  items={items} 
  cols={{ xs: 2, sm: 3, md: 4, lg: 5, xl: 6 }}
  className="gap-3"
/>

Custom Breakpoint Configuration

<InformationGrid 
  items={items} 
  cols={{ 
    xs: 1,    // Mobile: 1 column
    sm: 1,    // Small: 1 column
    md: 2,    // Medium: 2 columns
    lg: 3,    // Large: 3 columns
    xl: 4     // Extra large: 4 columns
  }}
/>

Styling

The component uses CSS custom properties for theming:

• --txtc-lv1: Primary text color
• --txtc-lv2: Secondary text color
• --bgc-lv1: Primary background color
• --bgc-lv2: Secondary background color
• --bgc-lv3: Border color

Browser Support

• Modern browsers with CSS Grid support
• React 18+
• TypeScript 4.5+

License

UNLICENSED