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

Did more work to beer post page, seed

Browse Source 
Worked on comments and beer recs features. Fine tuning database seed amounts.
This commit is contained in:
Aaron William Po
2023-01-29 21:53:05 -05:00
parent fe277d5964
commit 0b96c8f1f5
38 changed files with 833 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
components/BeerById/BeerInfoHeader.tsx
View File

@@ -1,6 +1,7 @@
import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
import Link from 'next/link';
import formatDistanceStrict from 'date-fns/formatDistanceStrict';
import format from 'date-fns/format';
import { useState } from 'react';
import { FaRegThumbsUp, FaThumbsUp } from 'react-icons/fa';
@@ -11,64 +12,71 @@ const BeerInfoHeader: React.FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost
const [isLiked, setIsLiked] = useState(false);
return (
<div className="flex h-full flex-col justify-center bg-base-300 p-10">
<h1 className="text-4xl font-bold">{beerPost.name}</h1>
<h2 className="text-2xl font-semibold">
by{' '}
<Link
href={`/breweries/${beerPost.brewery.id}`}
className="link-hover link text-2xl font-semibold"
>
{beerPost.brewery.name}
</Link>
</h2>
<h3 className="italic">
posted by{' '}
<Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
{beerPost.postedBy.username}
</Link>
{` ${timeDistance}`} ago
</h3>
<p>{beerPost.description}</p>
<div className="flex justify-between">
<div>
<div className="mb-1">
<Link
className="text-lg font-medium"
href={`/beers/types/${beerPost.type.id}`}
>
{beerPost.type.name}
</Link>
</div>
<div>
<span className="mr-4 text-lg font-medium">{beerPost.abv}% ABV</span>
<span className="text-lg font-medium">{beerPost.ibu} IBU</span>
</div>
</div>
<div className="card-actions">
<button
type="button"
className={`btn gap-2 rounded-2xl ${
!isLiked ? 'btn-ghost outline' : 'btn-primary'
}`}
onClick={() => {
setIsLiked(!isLiked);
}}
<div className="card flex flex-col justify-center bg-base-300">
<div className="card-body">
<h1 className="text-4xl font-bold">{beerPost.name}</h1>
<h2 className="text-2xl font-semibold">
by{' '}
<Link
href={`/breweries/${beerPost.brewery.id}`}
className="link-hover link text-2xl font-semibold"
>
{isLiked ? (
<>
<FaThumbsUp className="text-2xl" />
<span>Liked</span>
</>
) : (
<>
<FaRegThumbsUp className="text-2xl" />
<span>Like</span>
</>
)}
</button>
{beerPost.brewery.name}
</Link>
</h2>
<h3 className="italic">
posted by{' '}
<Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
{beerPost.postedBy.username}{' '}
</Link>
<span
className="tooltip tooltip-bottom"
data-tip={format(createdAtDate, 'MM/dd/yyyy')}
>
{timeDistance} ago
</span>
</h3>
<p>{beerPost.description}</p>
<div className="mt-5 flex justify-between">
<div>
<div className="mb-1">
<Link
className="link-hover link text-lg font-bold"
href={`/beers/types/${beerPost.type.id}`}
>
{beerPost.type.name}
</Link>
</div>
<div>
<span className="mr-4 text-lg font-medium">{beerPost.abv}% ABV</span>
<span className="text-lg font-medium">{beerPost.ibu} IBU</span>
</div>
</div>
<div className="card-actions">
<button
type="button"
className={`btn gap-2 rounded-2xl ${
!isLiked ? 'btn-ghost outline' : 'btn-primary'
}`}
onClick={() => {
setIsLiked(!isLiked);
}}
>
{isLiked ? (
<>
<FaThumbsUp className="text-2xl" />
<span>Liked</span>
</>
) : (
<>
<FaRegThumbsUp className="text-2xl" />
<span>Like</span>
</>
)}
</button>
</div>
</div>
</div>
</div>