polynux
/
pchl-astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: polynux:599896ed5765c4da6d20df995b5a401ef0abbcf6
Branches Tags
polynux:main
polynux:member-lite
polynux:test-actions
polynux:v0.2
polynux:v0.1
..
compare: polynux:a6351250cf411d273d238e45cb3348c1cfe002f6
Branches Tags
polynux:member-lite
polynux:main
polynux:test-actions
polynux:v0.2
polynux:v0.1

No commits in common. "599896ed5765c4da6d20df995b5a401ef0abbcf6" and "a6351250cf411d273d238e45cb3348c1cfe002f6" have entirely different histories.
599896ed57 ... a6351250cf

2 changed files with 13 additions and 31 deletions
Show Stats Expand all files Collapse all files

23
src/components/Members/Avatar.tsx
View File

@ -1,21 +1,14 @@
import type { UsersResponse } from "../../types/pb_types"; import type { UsersResponse } from "../../types/pb_types";
type AvatarProps = { export default function Avatar({author}: {author: UsersResponse}) {
avatarUrl?: string; console.log(author);
firstName: string; if (!author) return null;
lastName: string; const avatarUrl = import.meta.env.PUBLIC_PB_API + `/api/files/${author.collectionId}/${author.id}/${author.avatar}?thumb=100x100`;
}
export default function Avatar({avatarUrl, firstName, lastName}: AvatarProps) {
if (avatarUrl !== undefined) {
return (
<img src={avatarUrl} alt={`${firstName} ${lastName}`} className="rounded-full border-2 border-gray-200 h-full" />
)
}
const avatar = `https://api.dicebear.com/7.x/adventurer/svg?flip=true&seed=${firstName}+${lastName}`;
return ( return (
<img src={avatar} alt="Profile" className="rounded-full border-2 border-gray-200 h-20" /> <div className="flex items-center p-4 border-b-2 border-gray-200 max-h-[6rem]">
<img src={avatarUrl} alt="Profile" className="rounded-full border-2 border-gray-200 h-full" />
<p className="ml-2 text-center flex-grow capitalize">{author.firstname} {author.lastname}</p>
</div>
) )
} }

21
src/components/Members/Chat/Message.tsx
View File

@ -1,6 +1,5 @@
import type { MessagesResponse, UsersResponse } from "../../../types/pb_types"; import type { MessagesResponse, UsersResponse } from "../../../types/pb_types";
import Avatar from "../Avatar"; import Avatar from "../Avatar";
import { FaRegClock } from "react-icons/fa";
export type MessageExpand = MessagesResponse<{ export type MessageExpand = MessagesResponse<{
author: UsersResponse; author: UsersResponse;
@ -8,23 +7,13 @@ export type MessageExpand = MessagesResponse<{
export default function Message({ message }: { message: MessageExpand }) { export default function Message({ message }: { message: MessageExpand }) {
if (!message.expand) return null; console.log(message);
const author = message.expand.author;
const avatarUrl = author.avatar ? import.meta.env.PUBLIC_PB_API + `/api/files/${author.collectionId}/${author.id}/${author.avatar}?thumb=100x100` : undefined;
const date = new Date(message.created);
const dateStr = `${date.getHours()}:${date.getMinutes()}`;
return ( return (
<div className='flex justify-start p-4' key={message.id}> <div className='flex flex-col items-start justify-center' key={message.id}>
{message.expand && <Avatar avatarUrl={avatarUrl} firstName={author.firstname} lastName={author.lastname} />} {message.expand && <Avatar author={message.expand.author} /> }
<div className='flex flex-col items-start justify-center'> <div className='p-2 bg-gray-100 rounded-md '>
<div className='flex items-center my-4 ml-2 gap-2'> <p>{message.content}</p>
<p className="pr-2 py-2 border-b border-gray-200 text-xl text-gray-600">{author.firstname} {author.lastname}</p>
<p className="flex gap-2 items-center"><FaRegClock />{dateStr}</p>
</div>
<div className='p-2 bg-gray-100 rounded-md '>
<p>{message.content}</p>
</div>
</div> </div>
</div> </div>
) )