Blog with Featured Post

import {
  Post,
  PostAuthor,
  PostContent,
  PostDate,
  PostExcerpt,
  PostGroup,
  PostMeta,
  PostTitle,
} from "@/components/editorial/post"
import {
  Section,
  SectionColumns,
  SectionContent,
} from "@/components/editorial/section"

const FEATURED = {
  href: "#",
  title: "How we cut first response time in half",
  excerpt:
    "Six months ago our median first reply took four hours. Here is what we changed in routing, staffing and saved replies to bring it under two, and what it asked of the team.",
  date: "2026-07-14",
  dateLabel: "Jul 14, 2026",
  author: "Sally Ride",
} as const

const POSTS = [
  {
    href: "#",
    title: "Routing rules that scale",
    description:
      "Start with three rules, not thirty. Add one only when a conversation lands in the wrong hands.",
    datetime: "2026-07-02",
    date: "Jul 2, 2026",
  },
  {
    href: "#",
    title: "Writing a help article",
    description:
      "Answer the question in the first line. Everything after it is for the reader who needs more detail.",
    datetime: "2026-06-24",
    date: "Jun 24, 2026",
  },
  {
    href: "#",
    title: "Weekends without a backlog",
    description:
      "A rota of two and a short list of saved replies keep Monday from starting with a pile.",
    datetime: "2026-06-11",
    date: "Jun 11, 2026",
  },
] as const

export default function Blog02() {
  return (
    <Section>
      <SectionContent>
        <SectionColumns>
          <PostGroup cols={1} className="max-w-lg">
            <Post size="lg">
              <PostContent>
                <PostMeta>
                  <PostDate dateTime={FEATURED.date}>
                    {FEATURED.dateLabel}
                  </PostDate>
                  <PostAuthor>{FEATURED.author}</PostAuthor>
                </PostMeta>
                <PostTitle>
                  <a href={FEATURED.href}>{FEATURED.title}</a>
                </PostTitle>
                <PostExcerpt>{FEATURED.excerpt}</PostExcerpt>
              </PostContent>
            </Post>
          </PostGroup>
          <PostGroup cols={1} variant="divided">
            {POSTS.map((post) => (
              <Post key={post.title}>
                <PostContent className="max-w-xl">
                  <PostMeta>
                    <PostDate dateTime={post.datetime}>{post.date}</PostDate>
                  </PostMeta>
                  <PostTitle>
                    <a href={post.href}>{post.title}</a>
                  </PostTitle>
                  <PostExcerpt>{post.description}</PostExcerpt>
                </PostContent>
              </Post>
            ))}
          </PostGroup>
        </SectionColumns>
      </SectionContent>
    </Section>
  )
}

pnpm dlx shadcn add @01orbital/blog-02

npx shadcn add @01orbital/blog-02

yarn shadcn add @01orbital/blog-02

bunx --bun shadcn add @01orbital/blog-02