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: fix profile avatars in comments

Browse Source 
This reverts the change to the comment content body component in the previous commit.
This commit is contained in:
Aaron William Po
2023-11-06 15:56:25 -05:00
parent fe778f83e1
commit 3b973252fc
4 changed files with 72 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
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';
@@ -19,65 +19,47 @@ const CommentContentBody: FC<CommentContentBodyProps> = ({ comment, setInEditMod
const timeDistance = useTimeDistance(new Date(comment.createdAt));
return (
<div className="card-body animate-in fade-in-10">
<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>
</div>
<div className="pr-3 py-4 animate-in fade-in-10 space-y-1">
<div className="space-y-2">
<div className="flex flex-row justify-between">
<div>
<p>{comment.content}</p>
<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>
</div>
</div>
<div>
<p className="text-sm">{comment.content}</p>
</div>
</div>
);