Skip to content

Instantly share code, notes, and snippets.

@amineo

amineo/tag-list.js

Last active February 25, 2021 19:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amineo/2ce8e8c57290ce136163375f7fb7915a to your computer and use it in GitHub Desktop.
Save amineo/2ce8e8c57290ce136163375f7fb7915a to your computer and use it in GitHub Desktop.
Download ZIP
AnthonyMineo.com - Output all tags as a list
Raw
tag-list.js
// If you just want a list of linkable tags
import React from 'react'
import { tags } from '@/tags'
function TagList() {
return (
<ul className="divide-y divide-gray-200">
// our tag map
{tags.map((tag) => {
return (
<li key={tag.slug} className="py-12">
<Link key={`${tag.slug}-link`} href="/tag/[tag]" as={`/tag/${tag.slug}`}>
{tag.name}
</Link>
</li>
)
})}
</ul>
)
}
Raw
tags.js
// If you want to output a list of tags as a page
// src/pages/tags.js
import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import { tags } from '@/tags'
export default function Tags() {
return (
<div>
<Head>
<title>All Tags</title>
<meta name="ROBOTS" content="NOINDEX, FOLLOW" />
</Head>
<div className="text-lg mx-auto mb-6 border-b-4 border-gray-200">
<h1 className="mt-2 mb-8 text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
All Tags
</h1>
</div>
<ul className="divide-y divide-gray-200">
{tags.map((tag) => {
return (
<li key={tag.slug} className="py-12">
<Link key={`${tag.slug}-link`} href="/tag/[tag]" as={`/tag/${tag.slug}`}>
{tag.name}
</Link>
</li>
)
})}
</ul>
</div>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment