Add tabs demo

Author: adamwathan

next.config.js

@@ -3,6 +3,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 })
 const withSyntaxHighlighting = require('./remark/withSyntaxHighlighting')
+const withProse = require('./remark/withProse')
 
 module.exports = withBundleAnalyzer({
   pageExtensions: ['js', 'jsx', 'mdx'],
@@ -28,7 +29,7 @@ module.exports = withBundleAnalyzer({
       {
         loader: '@mdx-js/loader',
         options: {
-          remarkPlugins: [withSyntaxHighlighting],
+          remarkPlugins: [withProse, withSyntaxHighlighting],
         },
       },
     ]

package.json

@@ -9,6 +9,7 @@
     "build:rss": "node ./.next/server/scripts/build-rss.js"
   },
   "dependencies": {
+    "@headlessui/react": "^1.4.0",
     "@mdx-js/loader": "^1.6.22",
     "@tailwindcss/aspect-ratio": "^0.2.1",
     "@tailwindcss/typography": "^0.4.0",

remark/withProse.js

@@ -0,0 +1,33 @@
+const proseComponents = ['Heading']
+
+const isJsNode = (node) => {
+  return (
+    ['jsx', 'import', 'export'].includes(node.type) &&
+    !/^<[a-z]+(>|\s)/.test(node.value) &&
+    !new RegExp(`^<(${proseComponents.join('|')})(>|\\s)`).test(node.value)
+  )
+}
+
+module.exports = function () {
+  return (tree) => {
+    let insideProse = false
+    tree.children = tree.children.flatMap((node, i) => {
+      if (insideProse && isJsNode(node)) {
+        insideProse = false
+        return [{ type: 'jsx', value: '</div>' }, node]
+      }
+      if (!insideProse && !isJsNode(node)) {
+        insideProse = true
+        return [
+          { type: 'jsx', value: '<div className="prose max-w-none">' },
+          node,
+          ...(i === tree.children.length - 1 ? [{ type: 'jsx', value: '</div>' }] : []),
+        ]
+      }
+      if (i === tree.children.length - 1 && insideProse) {
+        return [node, { type: 'jsx', value: '</div>' }]
+      }
+      return [node]
+    })
+  }
+}

src/components/Post.js

@@ -181,7 +181,7 @@ export default function Post({ meta, children, posts }) {
                 </dd>
               </dl>
               <div className="divide-y divide-gray-200 xl:pb-0 xl:col-span-3 xl:row-span-2">
-                <div className="prose max-w-none pt-10 pb-8">
+                <div className="max-w-none pt-10 pb-8">
                   <MDXProvider>{children}</MDXProvider>
                 </div>
                 {meta.footer && (

src/getAllPostPreviews.js

@@ -12,13 +12,16 @@ function dateSortDesc(a, b) {
 }
 
 export default function getAllPostPreviews() {
+  return []
   return importAll(require.context('./pages/?preview', true, /\.mdx$/))
     .filter((p) => !p.link.includes('/snippets/'))
     .filter((p) => p.module.meta.private !== true)
     .sort((a, b) => dateSortDesc(a.module.meta.date, b.module.meta.date))
 }
 
 export function getAllPosts() {
+  return []
+
   return importAll(require.context('./pages/?rss', true, /\.mdx$/))
     .filter((p) => !p.link.includes('/snippets/'))
     .filter((p) => p.module.meta.private !== true)

src/pages/headless-ui-v1-4/components/Demo.js

@@ -0,0 +1,126 @@
+import { useState } from 'react'
+import { Tab } from '@headlessui/react'
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Example() {
+  let [categories] = useState({
+    Recent: [
+      {
+        id: 1,
+        title: 'Does drinking coffee make you smarter?',
+        date: '5h ago',
+        commentCount: 5,
+        shareCount: 2,
+      },
+      {
+        id: 2,
+        title: "So you've bought coffee... now what?",
+        date: '2h ago',
+        commentCount: 3,
+        shareCount: 2,
+      },
+    ],
+    Popular: [
+      {
+        id: 1,
+        title: 'Is tech making coffee better or worse?',
+        date: 'Jan 7',
+        commentCount: 29,
+        shareCount: 16,
+      },
+      {
+        id: 2,
+        title: 'The most innovative things happening in coffee',
+        date: 'Mar 19',
+        commentCount: 24,
+        shareCount: 12,
+      },
+    ],
+    Trending: [
+      {
+        id: 1,
+        title: 'Ask Me Anything: 10 answers to your questions about coffee',
+        date: '2d ago',
+        commentCount: 9,
+        shareCount: 5,
+      },
+      {
+        id: 2,
+        title: "The worst advice we've ever heard about coffee",
+        date: '4d ago',
+        commentCount: 1,
+        shareCount: 2,
+      },
+    ],
+  })
+
+  return (
+    <div className="my-8 rounded-lg bg-gradient-to-r from-sky-400 to-blue-600 h-[360px]">
+      <div className="mx-auto w-full max-w-md px-2 py-16 sm:px-0">
+        <Tab.Group>
+          <Tab.List className="flex p-1 space-x-1 bg-blue-900/20 rounded-xl">
+            {Object.keys(categories).map((category) => (
+              <Tab
+                key={category}
+                className={({ selected }) =>
+                  classNames(
+                    'w-full py-2.5 text-sm leading-5 font-medium text-blue-700 rounded-lg',
+                    'focus:outline-none focus:ring-2 ring-offset-2 ring-offset-blue-400 ring-white ring-opacity-60',
+                    selected
+                      ? 'bg-white shadow'
+                      : 'text-blue-100 hover:bg-white/[0.12] hover:text-white'
+                  )
+                }
+              >
+                {category}
+              </Tab>
+            ))}
+          </Tab.List>
+          <Tab.Panels className="mt-2">
+            {Object.values(categories).map((posts, idx) => (
+              <Tab.Panel
+                key={idx}
+                className={classNames(
+                  'bg-white rounded-xl p-3',
+                  'focus:outline-none focus:ring-2 ring-offset-2 ring-offset-blue-400 ring-white ring-opacity-60'
+                )}
+              >
+                <ul>
+                  {posts.map((post) => (
+                    <li
+                      key={post.id}
+                      className="relative p-3 rounded-md hover:bg-gray-100"
+                    >
+                      <h3 className="text-sm font-medium leading-5">
+                        {post.title}
+                      </h3>
+
+                      <ul className="flex mt-1 space-x-1 text-xs font-normal leading-4 text-gray-500">
+                        <li>{post.date}</li>
+                        <li>&middot;</li>
+                        <li>{post.commentCount} comments</li>
+                        <li>&middot;</li>
+                        <li>{post.shareCount} shares</li>
+                      </ul>
+
+                      <a
+                        href="#"
+                        className={classNames(
+                          'absolute inset-0 rounded-md',
+                          'focus:z-10 focus:outline-none focus:ring-2 ring-blue-400'
+                        )}
+                      />
+                    </li>
+                  ))}
+                </ul>
+              </Tab.Panel>
+            ))}
+          </Tab.Panels>
+        </Tab.Group>
+      </div>
+    </div>
+  )
+}

src/pages/headless-ui-v1-4/index.mdx

@@ -1,5 +1,6 @@
 import { adamwathan, robinmalfait } from '@/authors'
 import card from './card.jpg'
+import Demo from './components/Demo'
 
 export const meta = {
   title: 'Headless UI v1.4: The One With Tabs',
@@ -33,6 +34,8 @@ Earlier this year we started working on [Tailwind UI Ecommerce](https://tailwind
 
 Here's what we ended up with:
 
+<Demo />
+
 ```jsx
 import { Tab } from '@headlessui/react'
 
@@ -61,7 +64,7 @@ function MyTabs() {
 
 Like all Headless UI components, this totally abstracts away stuff like keyboard navigation for you so you can create custom tabs in a completely declarative way, without having to think about any of the tricky accessibility details.
 
-[Check out the documentation](https://headlessui.dev/react/tabs) to play with a working example.
+[Check out the documentation](https://headlessui.dev/react/tabs) to learn more.
 
 ### Closing Disclosures and Popovers
 

yarn.lock

@@ -272,6 +272,11 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.0.tgz#f3933a44e365864f4dad5db94158106d511e8131"
   integrity sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug==
 
+"@headlessui/react@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.0.tgz#c6d424d8ab10ac925e4423d7f3cbab02c30d736a"
+  integrity sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==
+
 "@mdx-js/loader@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4"