Newspaper

1import * as React from 'react';
2import { cn } from '@/lib/utils';
3import './newspaper.css';
4 
5export const Newspaper = React.forwardRef<
6  HTMLDivElement,
7  React.HTMLAttributes<HTMLDivElement>
8>(({ className, children, ...props }, ref) => {
9  return (
10    <div ref={ref} className={cn('w-full', className)} {...props}>
11      {children}
12    </div>
13  );
14});
15Newspaper.displayName = 'Newspaper';
16 
17export const NewspaperHeader = React.forwardRef<
18  HTMLHeadingElement,
19  React.HTMLAttributes<HTMLHeadingElement>
20>(({ className, children, ...props }, ref) => {
21  return (
22    <h1
23      ref={ref}
24      className={cn(
25        'newspaper-header mt-4 mb-6 text-5xl md:text-6xl',
26        className
27      )}
28      {...props}
29    >
30      {children}
31    </h1>
32  );
33});
34NewspaperHeader.displayName = 'NewspaperHeader';
35 
36export const NewspaperContent = React.forwardRef<
37  HTMLDivElement,
38  React.HTMLAttributes<HTMLDivElement>
39>(({ className, children, ...props }, ref) => {
40  return (
41    <section
42      ref={ref}
43      className={cn('flex flex-col gap-4 md:flex-row', className)}
44      {...props}
45    >
46      {children}
47    </section>
48  );
49});
50NewspaperContent.displayName = 'NewspaperContent';
51 
52export interface NewspaperArticleProps extends React.HTMLAttributes<HTMLDivElement> {
53  isBreaking?: boolean;
54}
55 
56export const NewspaperArticle = React.forwardRef<
57  HTMLDivElement,
58  NewspaperArticleProps
59>(({ className, isBreaking, children, ...props }, ref) => {
60  return (
61    <article
62      ref={ref}
63      className={cn(
64        'newspaper-article mb-4',
65        isBreaking ? 'flex-[2]' : 'flex-[1]',
66        className
67      )}
68      {...props}
69    >
70      {children}
71    </article>
72  );
73});
74NewspaperArticle.displayName = 'NewspaperArticle';