Grid Newspaper

1import * as React from 'react';
2import { cn } from '@/lib/utils';
3import './grid-newspaper.css';
4 
5export const GridNewspaper = React.forwardRef<
6  HTMLDivElement,
7  React.HTMLAttributes<HTMLDivElement>
8>(({ className, children, ...props }, ref) => {
9  return (
10    <div
11      ref={ref}
12      className={cn('grid-newspaper-wrapper w-full', className)}
13      {...props}
14    >
15      <div className='grid-newspaper-container'>
16        <main className='grid-newspaper-main'>{children}</main>
17      </div>
18    </div>
19  );
20});
21GridNewspaper.displayName = 'GridNewspaper';
22 
23export const GridNewspaperHeader = React.forwardRef<
24  HTMLDivElement,
25  React.HTMLAttributes<HTMLDivElement> & { title: string }
26>(({ className, title, children, ...props }, ref) => {
27  return (
28    <div
29      ref={ref}
30      className={cn('grid-newspaper-header-wrap', className)}
31      {...props}
32    >
33      <h1>{title}</h1>
34      <aside className='grid-newspaper-aside'>
35        <div>{children}</div>
36      </aside>
37    </div>
38  );
39});
40GridNewspaperHeader.displayName = 'GridNewspaperHeader';
41 
42export interface GridNewspaperArticleProps extends React.HTMLAttributes<HTMLDivElement> {
43  withBorder?: boolean;
44  hoverImage?: boolean;
45  hoverBg?: boolean;
46}
47 
48export const GridNewspaperArticle = React.forwardRef<
49  HTMLDivElement,
50  GridNewspaperArticleProps
51>(({ className, withBorder, hoverImage, hoverBg, children, ...props }, ref) => {
52  return (
53    <div
54      ref={ref}
55      className={cn(
56        withBorder && 'gn-with-border',
57        hoverImage && 'gn-hover-image',
58        hoverBg && 'gn-hover-bg',
59        className
60      )}
61      {...props}
62    >
63      {children}
64    </div>
65  );
66});
67GridNewspaperArticle.displayName = 'GridNewspaperArticle';