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

Feat: create user page, add user bio and avatar

Browse Source
This commit is contained in:
Aaron William Po
2023-11-05 21:54:09 -05:00
parent fcc43c305c
commit 7f9ddb40a1
26 changed files with 324 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/BeerBreweryComments/CommentContentBody.tsx
View File

@@ -5,7 +5,7 @@ import { Dispatch, FC, SetStateAction, useContext } from 'react';
import { Rating } from 'react-daisyui';
import Link from 'next/link';
import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
import Image from 'next/image';
import { z } from 'zod';
import CommentCardDropdown from './CommentCardDropdown';
@@ -20,41 +20,64 @@ const CommentContentBody: FC<CommentContentBodyProps> = ({ comment, setInEditMod
return (
<div className="card-body animate-in fade-in-10">
<div className="flex flex-row justify-between">
<div>
<p className="font-semibold sm:text-2xl">
<Link href={`/users/${comment.postedBy.id}`} className="link-hover link">
{comment.postedBy.username}
</Link>
</p>
<span className="italic">
posted{' '}
<time
className="tooltip tooltip-bottom"
data-tip={format(new Date(comment.createdAt), 'MM/dd/yyyy')}
>
{timeDistance}
</time>{' '}
ago
</span>
<div className="flex space-x-5">
<div className="w-2/12 avatar display flex items-center justify-center">
<div className="w-28 h-28 rounded-full ring ring-primary">
{comment.postedBy.userAvatar ? (
<Image
src={comment.postedBy.userAvatar.path}
alt={comment.postedBy.userAvatar.alt}
width={200}
height={200}
/>
) : (
<div className="flex items-center justify-center w-full h-full text-2xl font-bold text-white bg-primary rounded-full">
{comment.postedBy.username[0]}
</div>
)}
</div>
</div>
<div className="w-10/12 space-y-2">
<div className="flex flex-row justify-between">
<div>
<p className="font-semibold sm:text-2xl">
<Link href={`/users/${comment.postedBy.id}`} className="link-hover link">
{comment.postedBy.username}
</Link>
</p>
<span className="italic">
posted{' '}
<time
className="tooltip tooltip-bottom"
data-tip={format(new Date(comment.createdAt), 'MM/dd/yyyy')}
>
{timeDistance}
</time>{' '}
ago
</span>
</div>
{user && <CommentCardDropdown comment={comment} setInEditMode={setInEditMode} />}
</div>
<div className="space-y-1">
<Rating value={comment.rating}>
{Array.from({ length: 5 }).map((val, index) => (
<Rating.Item
name="rating-1"
className="mask mask-star cursor-default"
disabled
aria-disabled
key={index}
/>
))}
</Rating>
<p>{comment.content}</p>
{user && (
<CommentCardDropdown comment={comment} setInEditMode={setInEditMode} />
)}
</div>
<div className="space-y-1">
<Rating value={comment.rating}>
{Array.from({ length: 5 }).map((val, index) => (
<Rating.Item
name="rating-1"
className="mask mask-star cursor-default"
disabled
aria-disabled
key={index}
/>
))}
</Rating>
</div>
<div>
<p>{comment.content}</p>
</div>
</div>
</div>
</div>
);