MockNewsletter

Visualização de newsletter/artigo estilo Substack com tipografia serif, tags, autor e reações.

Visão Geral

O MockNewsletter simula a visualização de um artigo de newsletter estilo Substack/Morning Brew. Inclui tipografia serif elegante, tags coloridas, informações do autor e reações.

Importação

import { MockNewsletter, demoNewsletterPost } from '@/components/linear/mock-newsletter'

Props

Prop	Tipo	Default	Descrição
`post`	`NewsletterPost`	—	Dados do artigo
`className`	`string`	—	Classes adicionais

NewsletterPost

interface NewsletterPost {
  publicationName: string;     // Nome da publicação
  tagline?: string;            // Slogan da publicação
  subscriberCount?: string;    // Ex: "12,000+"
  title: string;               // Título do artigo
  subtitle?: string;           // Subtítulo/descrição
  author: string;              // Nome do autor
  authorRole?: string;         // Cargo/função
  date: string;                // Data de publicação
  readTime?: string;           // Tempo de leitura
  tags?: { text: string; color: string }[];
  content: React.ReactNode;    // Conteúdo do artigo
  reactions?: number;          // Número de likes
  comments?: number;           // Número de comentários
}

Uso Básico

<MockNewsletter
  post={demoNewsletterPost}
  className="h-[600px]"
/>

Dados de Demo

export const demoNewsletterPost: NewsletterPost = {
  publicationName: 'Varejo Inteligente',
  tagline: 'Tecnologia para o varejo moderno',
  subscriberCount: '12,000+',
  title: 'Pedido automático: como redes estão eliminando ruptura...',
  subtitle: 'O sistema que aprende o ritmo de cada loja...',
  author: 'Marina Santos',
  authorRole: 'Editora de Tecnologia',
  date: '3 Mar 2026',
  readTime: '4 min',
  tags: [
    { text: 'Varejo', color: '#9333ea' },
    { text: 'Compras', color: '#30A46C' },
    { text: 'Automação', color: '#3E63DD' },
  ],
  reactions: 189,
  comments: 37,
  content: (
    <div className="space-y-4">
      <p>O comprador olha o estoque...</p>
      {/* Conteúdo do artigo */}
    </div>
  ),
}

Features Visuais

Header da Publicação

Nome em fonte serif
Tagline em uppercase
Contador de assinantes
Botão "Inscreva-se"

Título e Subtítulo

Título em fonte serif bold
Subtítulo em itálico

Autor

Avatar com gradiente primary → roxo
Nome e cargo
Data e tempo de leitura

Conteúdo

Área com scroll
Prose classes para tipografia
Suporta blockquotes, listas, etc.

Botão de like com emoji
Contador de comentários
Botões de compartilhar e salvar

Tipografia

O MockNewsletter usa font-serif para:

Nome da publicação
Título
Subtítulo
Conteúdo do artigo

Isso cria o visual clássico de newsletter/jornal.

Conteúdo Customizado

O content aceita qualquer React node:

const post = {
  // ...
  content: (
    <div className="space-y-4 text-muted-foreground">
      <p>
        <span className="text-foreground font-semibold">
          Destaque inicial.
        </span>{' '}
        Texto normal continuando...
      </p>

      <ul className="list-disc pl-5 space-y-1.5">
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>

      <div className="p-4 bg-muted/50 border-l-2 border-primary rounded-r-lg">
        <p className="text-sm">Citação em destaque</p>
        <p className="text-xs text-muted-foreground/60 mt-2">— Fonte</p>
      </div>
    </div>
  ),
}

Exemplo Customizado

import { MockNewsletter } from '@/components/linear/mock-newsletter'

const post = {
  publicationName: 'Tech Weekly',
  tagline: 'Insights de tecnologia',
  subscriberCount: '5,000+',
  title: 'Como startups estão usando AI para escalar operações',
  subtitle: 'Casos práticos de automação inteligente',
  author: 'Carlos Silva',
  authorRole: 'Editor Chefe',
  date: '5 Mar 2026',
  readTime: '6 min',
  tags: [
    { text: 'AI', color: '#5B5BD6' },
    { text: 'Startups', color: '#F5A623' },
  ],
  reactions: 234,
  comments: 45,
  content: (
    <div className="space-y-4 text-muted-foreground">
      <p>Conteúdo do artigo aqui...</p>
    </div>
  ),
}

export function Demo() {
  return <MockNewsletter post={post} className="h-96" />
}

Com BentoCard

<BentoCard
  title="Newsletter Automatizada"
  description="Curadoria de conteúdo gerada por AI"
  colSpan={2}
>
  <MockNewsletter post={demoNewsletterPost} />
</BentoCard>