mintel.me/apps/web/app/blog/embed-demo/page.tsx

import React from 'react';
import { Tag } from '../../../src/components/Tag';
import { H2 } from '../../../src/components/ArticleHeading';
import { Paragraph, LeadParagraph } from '../../../src/components/ArticleParagraph';
import { UL, LI } from '../../../src/components/ArticleList';
import { CodeBlock } from '../../../src/components/ArticleBlockquote';
import { YouTubeEmbed } from '../../../src/components/YouTubeEmbed';
import { TwitterEmbed } from '../../../src/components/TwitterEmbed';
import { GenericEmbed } from '../../../src/components/GenericEmbed';
import { Mermaid } from '../../../src/components/Mermaid';
import { BlogPostClient } from '../../../src/components/BlogPostClient';

export default function EmbedDemoPage() {
  const post = {
    title: "Rich Content Embedding Demo",
    description: "Testing our new free embed components for YouTube, Twitter, Mermaid diagrams, and other platforms",
    date: "2024-02-15",
    slug: "embed-demo",
    tags: ["embeds", "components", "tutorial", "mermaid"]
  };

  const formattedDate = new Date(post.date).toLocaleDateString('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric'
  });

  const readingTime = 5;

  return (
    <div className="min-h-screen bg-white">
      <BlogPostClient readingTime={readingTime} title={post.title} />

      <main id="post-content" className="pt-24">
        <section className="py-12 md:py-16">
          <div className="max-w-3xl mx-auto px-6">
            <div className="text-center">
              <h1 className="text-3xl md:text-5xl font-serif font-bold text-slate-900 mb-6 leading-tight tracking-tight">
                {post.title}
              </h1>
              
              <div className="flex flex-wrap items-center justify-center gap-4 text-sm text-slate-600 mb-6 font-sans">
                <time dateTime={post.date} className="flex items-center gap-1.5 px-3 py-1 bg-slate-50 rounded-full">
                  <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zM4 8h12v8H4V8z"/>
                  </svg>
                  {formattedDate}
                </time>
                <span className="text-slate-400">•</span>
                <span className="flex items-center gap-1.5 px-3 py-1 bg-slate-50 rounded-full">
                  <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd"/>
                  </svg>
                  {readingTime} min
                </span>
              </div>

              <p className="text-xl md:text-2xl text-slate-600 leading-relaxed font-serif italic mb-8 max-w-2xl mx-auto">
                {post.description}
              </p>

              <div className="flex flex-wrap justify-center gap-2 mb-8">
                {post.tags.map((tag, index) => (
                  <Tag key={tag} tag={tag} index={index} className="text-xs" />
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="max-w-3xl mx-auto px-6 pb-24">
          <div className="prose prose-slate max-w-none">
            <LeadParagraph>
              This post demonstrates our new free embed components that give you full styling control over YouTube videos, Twitter tweets, and other rich content - all generated at build time.
            </LeadParagraph>
            
            <H2>YouTube Embed Example</H2>
            <Paragraph>
              Here's a YouTube video embedded with full styling control. The component uses build-time generation for optimal performance.
            </Paragraph>
            
            <div className="my-6">
              <YouTubeEmbed 
                videoId="dQw4w9WgXcQ"
                title="Demo Video"
                style="minimal"
                className="my-4"
              />
            </div>
            
            <Paragraph>
              You can customize the appearance using CSS variables or data attributes:
            </Paragraph>
            
            <CodeBlock
              language="jsx"
              showLineNumbers={true}
            >
{`<YouTubeEmbed
  videoId="dQw4w9WgXcQ"
  style="minimal"        // 'default' | 'minimal' | 'rounded' | 'flat'
  aspectRatio="56.25%"   // Custom aspect ratio
  className="my-4"       // Additional classes
/>`}
            </CodeBlock>
            
            <H2>Twitter/X Embed Example</H2>
            <Paragraph>
              Twitter embeds use the official Twitter iframe embed for reliable display.
            </Paragraph>
            
            <div className="my-4">
              <TwitterEmbed
                tweetId="20"
                theme="light"
                align="center"
              />
            </div>
            
            <CodeBlock
              language="jsx"
              showLineNumbers={true}
            >
{`<TwitterEmbed
  tweetId="20"
  theme="light"         // 'light' | 'dark'
  align="center"        // 'left' | 'center' | 'right'
/>`}
            </CodeBlock>
            
            <H2>Generic Embed Example</H2>
            <Paragraph>
              The generic component supports direct embeds for Vimeo, CodePen, GitHub Gists, and other platforms.
            </Paragraph>
            
            <div className="my-6">
              <GenericEmbed 
                url="https://vimeo.com/123456789"
                type="video"
                maxWidth="800px"
              />
            </div>
            
            <CodeBlock
              language="jsx"
              showLineNumbers={true}
            >
{`<GenericEmbed
  url="https://vimeo.com/123456789"
  type="video"          // 'video' | 'article' | 'rich'
  maxWidth="800px"
/>`}
            </CodeBlock>

            <H2>Mermaid Diagrams</H2>
            <Paragraph>
              We've added support for Mermaid diagrams! You can now create flowcharts, sequence diagrams, and more using a simple text-based syntax.
            </Paragraph>

            <div className="my-8">
              <Mermaid 
                graph={`graph LR
  A[Client] --> B[Load Balancer]
  B --> C[App Server 1]
  B --> D[App Server 2]
  C --> E[(Database)]
  D --> E`}
              />
            </div>

            <Paragraph>
              Usage is straightforward:
            </Paragraph>

            <CodeBlock
              language="jsx"
              showLineNumbers={true}
            >
{`<Mermaid 
  graph={\`graph LR
  A[Client] --> B[Load Balancer]
  B --> C[App Server 1]
  B --> D[App Server 2]
  C --> E[(Database)]
  D --> E\`}
/>`}
            </CodeBlock>
            
            <H2>Styling Control</H2>
            <Paragraph>
              All components use CSS variables for easy customization:
            </Paragraph>
            
            <CodeBlock
              language="css"
              showLineNumbers={true}
            >
{`.youtube-embed {
  --aspect-ratio: 56.25%;
  --bg-color: #000000;
  --border-radius: 12px;
  --shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Data attribute variations */
.youtube-embed[data-style="minimal"] {
  --border-radius: 4px;
  --shadow: none;
}`}
            </CodeBlock>
            
            <H2>Benefits</H2>
            <UL>
              <LI><strong>Free:</strong> No paid services required</LI>
              <LI><strong>Fast:</strong> Build-time generation, no runtime API calls</LI>
              <LI><strong>Flexible:</strong> Full styling control via CSS variables</LI>
              <LI><strong>Self-hosted:</strong> Complete ownership and privacy</LI>
              <LI><strong>SEO-friendly:</strong> Static HTML content</LI>
            </UL>
            
            <H2>Integration</H2>
            <Paragraph>
              Simply import the components in your blog posts:
            </Paragraph>
            
            <CodeBlock
              language="jsx"
              showLineNumbers={true}
            >
{`import { YouTubeEmbed } from '../components/YouTubeEmbed';
import { TwitterEmbed } from '../components/TwitterEmbed';
import { GenericEmbed } from '../components/GenericEmbed';

<YouTubeEmbed videoId="abc123" style="rounded" />
<TwitterEmbed tweetId="123456789" theme="dark" />`}
            </CodeBlock>
          </div>
        </section>
      </main>
    </div>
  );
}