components#BlogNav TypeScript Examples
The following examples show how to use
components#BlogNav.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: [slug].tsx From vignette-web with MIT License | 4 votes |
|
PostLayout: NextPage<{ post: Post }> = ({ post }) => {
const Component = useMemo(
() => getMDXComponent(post.body.code),
[post.body.code],
)
const { t } = useTranslation(`blog`)
return (
<>
<SEO
title={t(`blog-template`, { title: post.title })}
desc={post.summary}
template={false}
/>
<BlogNav />
<article className="mx-auto py-8 lg:py-12 " id="content">
<div className="mx-auto mb-6 max-w-3xl px-4">
<Link href="/blog">
<a className="text-sm font-semibold uppercase tracking-tight text-pinkRed">
{post.category}
</a>
</Link>
<h1 className="mt-1 text-3xl font-bold lg:text-5xl">{post.title}</h1>
<p className=" prose mt-8 text-neutral-500 dark:prose-invert dark:text-neutral-400 sm:prose-lg">
{post.summary}
</p>
<div className="mt-8 flex items-center">
<Image
src={members.filter((item) => item.name == post.author)[0].avatar}
width={40}
height={40}
alt=""
className="rounded-full"
/>
<div className="pl-2 text-sm">
<span className="font-semibold">{post.author}</span>
<time
dateTime={post.date}
className="block text-gray-600 dark:text-gray-200"
>
{format(parseISO(post.date), `LLLL d, yyyy`)}
</time>
</div>
</div>
</div>
<div className="prose prose-lg prose-neutral relative mx-auto max-w-3xl px-4 prose-a:text-pinkRed prose-img:rounded dark:prose-invert">
<Component
components={
{
...components,
} as any
}
/>
</div>
</article>
<div className="mx-auto max-w-3xl px-4">
<h3 className="mb-1 font-semibold">Tags</h3>
<div className="mb-8 flex gap-2">
{post.tags.map((tag, i) => (
<div
className="max-w-min rounded bg-neutral-800 py-1 px-2 text-sm capitalize text-white "
key={i}
>
{tag}
</div>
))}
</div>
<Link href="/blog" passHref>
<a>
<span className="tracking-[0]"><-</span>
{` `}
{t(`back-to-list`)}
</a>
</Link>
</div>
<div className="relative left-0 h-80 w-80 lg:top-24 2xl:absolute">
<Image src={circles} layout="fill" priority alt="" />
</div>
<Footer />
</>
)
}
Example #2
| Source File: index.tsx From vignette-web with MIT License | 4 votes |
|
Blog: NextPage<{ posts: Post[] }> = ({ posts }) => {
const { t } = useTranslation(`blog`)
const [featuredPost] = posts.slice(0)
return (
<>
<SEO title={t(`title`)} desc={t(`hero-p`)} template={false} />
<Container noMargin id="content">
<div className="prose-invert relative z-20 w-full pb-14 text-white md:pb-28 ">
<Image
src={publicationCover}
layout="fill"
objectFit="cover"
objectPosition="center"
priority
alt=""
/>
<BlogNav />
<div className="relative z-20 px-4">
<h1 className="pt-4 pb-4 text-center text-4xl font-bold text-white md:pt-16 lg:text-5xl">
{t(`hero-title`)}
</h1>
<p className="text-center text-lg lg:text-xl ">{t(`hero-p`)}</p>
</div>
</div>
<div
className="mx-auto grid max-w-7xl gap-8 px-6 pt-8 sm:grid-cols-2 md:grid-cols-3"
id="blog-feed"
>
<div className="mx-0 mb-6 flex flex-wrap md:max-w-full md:flex-nowrap">
<Link href={featuredPost.url} passHref>
<a className="inline-flex h-44 overflow-hidden rounded xs:h-64 md:h-[28rem]">
<Image
src={featuredPost.image}
width="1080"
height="540"
quality={100}
className="rounded object-cover object-center"
alt=""
priority
/>
</a>
</Link>
<div className="py-4 md:px-8 md:py-8 lg:w-[32rem]">
<h3 className="my-1 text-xs font-bold uppercase text-pinkRed">
{featuredPost.category}
</h3>
<Link href={featuredPost.url} passHref>
<a>
<h2 className="text-2xl font-bold lg:text-4xl">
{featuredPost.title}
</h2>
<p className="mt-4">{featuredPost.summary}</p>
</a>
</Link>
<div className="mt-4 flex items-center">
<Link
href={
members.filter(
(item) => item.name == featuredPost.author,
)[0].url
}
>
<a>
<Image
src={
members.filter(
(item) => item.name == featuredPost.author,
)[0].avatar
}
width={40}
height={40}
alt=""
className="rounded-full"
/>
</a>
</Link>
<div className="pl-2 text-sm">
<Link
href={
members.filter(
(item) => item.name == featuredPost.author,
)[0].url
}
>
<a>
<span className="font-semibold">
{featuredPost.author}
</span>
</a>
</Link>
<time
dateTime={featuredPost.date}
className="block text-gray-600 dark:text-gray-200"
>
{format(parseISO(featuredPost.date), `LLLL d, yyyy`)}
</time>
</div>
</div>
</div>
</div>
{posts.slice(1, posts.length).map((post, idx) => (
<PostCard key={idx} {...post} />
))}
</div>
<div className="mx-auto mt-8 max-w-7xl px-6">
<Link href="/" passHref>
<a><- {t(`back-to-home`)}</a>
</Link>
</div>
</Container>
<Footer />
</>
)
}
