Begin work on tab components for beer by id page

components/BeerById/BeerPostCommentsSection.tsx

@@ -46,7 +46,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
 
   const sectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
   return (
-    <div className="w-full space-y-3 md:w-[60%]">
+    <div className="w-full space-y-3">
       <div className="card h-96 bg-base-300">
         <div className="card-body h-full" ref={sectionRef}>
           {user ? (

hooks/useMediaQuery.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const useMediaQuery = (query: string) => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    window.addEventListener('resize', listener);
+    return () => window.removeEventListener('resize', listener);
+  }, [matches, query]);
+
+  return matches;
+};
+
+export default useMediaQuery;

package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@hapi/iron": "^7.0.1",
+        "@headlessui/react": "^1.7.13",
+        "@headlessui/tailwindcss": "^0.1.2",
         "@hookform/resolvers": "^3.0.0",
         "@prisma/client": "^4.12.0",
         "@react-email/components": "^0.0.4",
@@ -649,6 +651,32 @@
         "@hapi/hoek": "^11.0.2"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.13",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.13.tgz",
+      "integrity": "sha512-9n+EQKRtD9266xIHXdY5MfiXPDfYwl7zBM7KOx2Ae3Gdgxy8QML1FkCMjq6AsOf0l6N9uvI4HcFtuFlenaldKg==",
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@headlessui/tailwindcss": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.1.2.tgz",
+      "integrity": "sha512-AQNESz+f1grCxifrocOE6hDMDFqhqY0g3xrSGOS0ocGkmVkssaBzXaAPAPNSs/nHmr4ZUhfl5THQpYrvaouWlQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.0"
+      }
+    },
     "node_modules/@hookform/resolvers": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.0.0.tgz",
@@ -10691,6 +10719,20 @@
         "@hapi/hoek": "^11.0.2"
       }
     },
+    "@headlessui/react": {
+      "version": "1.7.13",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.13.tgz",
+      "integrity": "sha512-9n+EQKRtD9266xIHXdY5MfiXPDfYwl7zBM7KOx2Ae3Gdgxy8QML1FkCMjq6AsOf0l6N9uvI4HcFtuFlenaldKg==",
+      "requires": {
+        "client-only": "^0.0.1"
+      }
+    },
+    "@headlessui/tailwindcss": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.1.2.tgz",
+      "integrity": "sha512-AQNESz+f1grCxifrocOE6hDMDFqhqY0g3xrSGOS0ocGkmVkssaBzXaAPAPNSs/nHmr4ZUhfl5THQpYrvaouWlQ==",
+      "requires": {}
+    },
     "@hookform/resolvers": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.0.0.tgz",

package.json

@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@hapi/iron": "^7.0.1",
+    "@headlessui/react": "^1.7.13",
+    "@headlessui/tailwindcss": "^0.1.2",
     "@hookform/resolvers": "^3.0.0",
     "@prisma/client": "^4.12.0",
     "@react-email/components": "^0.0.4",

pages/beers/[id]/index.tsx

@@ -17,6 +17,8 @@ import { z } from 'zod';
 
 import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
 import { Carousel } from 'react-responsive-carousel';
+import useMediaQuery from '@/hooks/useMediaQuery';
+import { Tab } from '@headlessui/react';
 
 interface BeerPageProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
@@ -27,6 +29,8 @@ interface BeerPageProps {
 }
 
 const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }) => {
+  const isMd = useMediaQuery('(min-width: 768px)');
+
   return (
     <>
       <Head>
@@ -59,12 +63,36 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
           <div className="mb-12 mt-10 flex w-full items-center justify-center ">
             <div className="w-11/12 space-y-3 xl:w-9/12">
               <BeerInfoHeader beerPost={beerPost} />
-              <div className="mt-4 flex flex-col space-y-3 md:flex-row md:space-x-3 md:space-y-0">
+
-                <BeerPostCommentsSection beerPost={beerPost} />
+              {isMd ? (
-                <div className="md:w-[40%]">
+                <div className="mt-4 flex flex-row space-x-3 space-y-0">
-                  <BeerRecommendations beerRecommendations={beerRecommendations} />
+                  <div className="w-[60%]">
+                    <BeerPostCommentsSection beerPost={beerPost} />
+                  </div>
+                  <div className="w-[40%]">
+                    <BeerRecommendations beerRecommendations={beerRecommendations} />
+                  </div>
                 </div>
-              </div>
+              ) : (
+                <Tab.Group>
+                  <Tab.List className="card flex flex-row bg-base-300">
+                    <Tab className="ui-selected:bg-gray w-1/2 p-3 uppercase">
+                      Comments
+                    </Tab>
+                    <Tab className="ui-selected:bg-gray w-1/2 p-3 uppercase">
+                      Recommendations
+                    </Tab>
+                  </Tab.List>
+                  <Tab.Panels className="mt-2">
+                    <Tab.Panel>
+                      <BeerPostCommentsSection beerPost={beerPost} />
+                    </Tab.Panel>
+                    <Tab.Panel>
+                      <BeerRecommendations beerRecommendations={beerRecommendations} />
+                    </Tab.Panel>
+                  </Tab.Panels>
+                </Tab.Group>
+              )}
             </div>
           </div>
         </div>

tailwind.config.js

@@ -48,7 +48,11 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [require('daisyui'), require('tailwindcss-animate')],
+  plugins: [
+    require('@headlessui/tailwindcss'),
+    require('daisyui'),
+    require('tailwindcss-animate'),
+  ],
 
   daisyui: {
     logs: false,