1- import { ArrowLeft } from 'lucide-react'
1+ import { ArrowLeft , ChevronLeft } from 'lucide-react'
22import type { Metadata } from 'next'
33import Image from 'next/image'
44import Link from 'next/link'
5+ import { buttonVariants } from '@/components/emcn'
56import { FAQ } from '@/lib/blog/faq'
67import '@/app/(landing)/blog/[slug]/prose-studio.css'
78import { getAllPostMeta , getPostBySlug , getRelatedPosts } from '@/lib/blog/registry'
89import type { Author , BlogMeta } from '@/lib/blog/schema'
910import { buildArticleJsonLd , buildBreadcrumbJsonLd , buildPostMetadata } from '@/lib/blog/seo'
11+ import { cn } from '@/lib/core/utils/cn'
1012import { formatDate } from '@/lib/core/utils/formatting'
1113import { getBaseUrl } from '@/lib/core/utils/urls'
1214import { ArticleHeaderItem , ArticleHeaderMotion } from '@/app/(landing)/blog/[slug]/article-header'
@@ -38,8 +40,6 @@ export default async function Page({ params }: { params: Promise<{ slug: string
3840 const jsonLd = buildArticleJsonLd ( post )
3941 const breadcrumbLd = buildBreadcrumbJsonLd ( post )
4042
41- const category = getPrimaryCategory ( post . tags )
42- const categoryColor = category . color
4343 const displayAuthors = post . authors && post . authors . length > 0 ? post . authors : [ post . author ]
4444 const shareUrl = `${ getBaseUrl ( ) } /blog/${ slug } `
4545
@@ -59,34 +59,35 @@ export default async function Page({ params }: { params: Promise<{ slug: string
5959 < div data-blog-main-content className = 'w-full min-w-0 max-w-5xl xl:col-start-2 xl:mx-auto' >
6060 < Link
6161 href = '/blog'
62- className = 'group mb-8 inline-flex items-center gap-2 border border-[#2A2A2A] bg-[#232323] px-4 py-2 font-season text-[#999] text-[11px] uppercase tracking-widest transition-colors hover:text-[#ECECEC]'
63- style = { { borderRadius : '5px' } }
62+ className = { cn (
63+ buttonVariants ( { variant : 'ghost' , size : 'sm' } ) ,
64+ 'group mb-8 gap-1 font-season text-[#999] text-sm hover:text-[#ECECEC] !px-0'
65+ ) }
6466 >
65- < ArrowLeft
66- className = 'group-hover:-translate-x-1 h-3 w-3 transition-transform'
67- aria-hidden = 'true'
68- />
69- All Posts
67+ < span className = 'relative inline-flex h-4 w-4 shrink-0 group-hover:-translate-x-0.5 transition-transform duration-200' >
68+ < ChevronLeft
69+ className = 'absolute inset-0 h-4 w-4 opacity-100 transition-opacity duration-200 group-hover:pointer-events-none group-hover:opacity-0'
70+ aria-hidden
71+ />
72+ < ArrowLeft
73+ className = 'absolute inset-0 h-4 w-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100'
74+ aria-hidden
75+ />
76+ </ span >
77+ Back to Blog
7078 </ Link >
7179 < header className = 'mb-12 border-[#2A2A2A] border-b pb-8' >
7280 < ArticleHeaderMotion >
73- < ArticleHeaderItem className = 'mb-6 flex w-full flex-col gap-4 sm:flex-row sm:items-center sm:justify-between' >
81+ < ArticleHeaderItem className = 'mb-4 flex w-full flex-col gap-4 sm:flex-row sm:items-center sm:justify-between' >
7482 < div className = 'flex items-center gap-3' >
75- < span
76- className = 'inline-block h-3 w-3'
77- style = { { backgroundColor : categoryColor } }
78- aria-hidden = 'true'
79- />
80- < div className = 'font-season text-[#999] text-[11px] uppercase tracking-widest' >
81- < time dateTime = { post . date } itemProp = 'datePublished' >
83+ < div className = 'font-season text-[#999] tracking-widest' >
84+ < time dateTime = { post . date } itemProp = 'datePublished' className = 'text-[12px] uppercase' >
8285 { new Date ( post . date ) . toLocaleDateString ( 'en-US' , {
8386 month : 'short' ,
8487 day : '2-digit' ,
8588 year : 'numeric' ,
8689 } ) }
8790 </ time >
88- { ' // ' }
89- < span style = { { color : categoryColor } } > { category . label } </ span >
9091 </ div >
9192 </ div >
9293
@@ -96,7 +97,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
9697 </ ArticleHeaderItem >
9798 < ArticleHeaderItem >
9899 < h1
99- className = 'mb-6 font-[500] text-[#ECECEC] text-[36px] leading-[1.15] tracking-tight sm:text-[40px] md:text-[48px]'
100+ className = 'mb-4 font-[500] text-[#ECECEC] text-[36px] leading-[1.15] tracking-tight sm:text-[40px] md:text-[48px]'
100101 itemProp = 'headline'
101102 >
102103 { post . title }
0 commit comments