AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 10:42:08 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Begin work on tab components for beer by id page

Browse Source
This commit is contained in:
Aaron William Po
2023-04-11 22:18:29 -04:00
parent f5abc518a4
commit 90f2cc2c0c
6 changed files with 102 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/BeerById/BeerPostCommentsSection.tsx
View File

@@ -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 ? (

19
hooks/useMediaQuery.ts Normal file
View File

@@ -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;

42
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

32
pages/beers/[id]/index.tsx
View File

@@ -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">
{isMd ? (
<div className="mt-4 flex flex-row space-x-3 space-y-0">
<div className="w-[60%]">
<BeerPostCommentsSection beerPost={beerPost} />
<div className="md:w-[40%]">
</div>
<div className="w-[40%]">
<BeerRecommendations beerRecommendations={beerRecommendations} />
</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>

6
tailwind.config.js
View File

@@ -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,