Grid

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4export type GridPreset =
5  | '2-col'
6  | '3-col'
7  | '4-col'
8  | 'sidebar-main'
9  | 'main-sidebar'
10 
11/**
12 * Responsive Tailwind classes for each preset.
13 * When `columns` prop is provided these are skipped and a custom
14 * grid-template-columns inline style is used instead.
15 */
16const PRESET_CLASSES: Record<GridPreset, string> = {
17  '2-col':        'grid-cols-1 sm:grid-cols-2',
18  '3-col':        'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
19  '4-col':        'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
20  'sidebar-main': 'grid-cols-1 md:grid-cols-[240px_1fr]',
21  'main-sidebar': 'grid-cols-1 md:grid-cols-[1fr_240px]',
22}
23 
24export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
25  preset?:  GridPreset
26  /** Custom CSS grid-template-columns — overrides preset and disables responsive classes */
27  columns?: string
28  gap?:     string | number
29  /** Custom CSS grid-template-rows */
30  rows?:    string
31}
32 
33const Grid = React.forwardRef<HTMLDivElement, GridProps>(
34  (
35    {
36      className,
37      preset  = '2-col',
38      columns,
39      gap     = '1rem',
40      rows,
41      style,
42      ...props
43    },
44    ref
45  ) => {
46    return (
47      <div
48        ref={ref}
49        className={cn(
50          'grid',
51          // Use Tailwind responsive classes when no custom columns are set
52          !columns && PRESET_CLASSES[preset],
53          className
54        )}
55        style={{
56          // Custom columns override via inline style (no responsive behaviour)
57          ...(columns ? { gridTemplateColumns: columns } : {}),
58          gridTemplateRows: rows,
59          gap: typeof gap === 'number' ? `${gap}px` : gap,
60          ...style,
61        }}
62        {...props}
63      />
64    )
65  }
66)
67Grid.displayName = 'Grid'
68 
69export { Grid }