FreakU
/
canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pixel Whois & Header Improvements

This commit is contained in:
Ategon Dev 2024-07-15 17:09:45 +00:00 committed by Grant
parent 1147845ddd
commit 6df4eaa37d
2 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/client/src/components/Header/User.tsx
View File

@ -1,22 +1,22 @@
import { Card, User as UserElement } from "@nextui-org/react";
import { useAppContext } from "../../contexts/AppContext"; import { useAppContext } from "../../contexts/AppContext";
export const User = () => { export const User = () => {
const { user } = useAppContext(); const { user } = useAppContext();
return user ? ( return user ? (
<div className="user-card"> <Card>
<div className="user-card--overview"> <UserElement
<div className="user-name">{user.user.username}</div> name={user.user.username}
<div className="user-instance">{user.service.instance.hostname}</div> description={user.service.instance.hostname}
</div> avatarProps={{
{user.user.picture_url && ( showFallback: true,
<img name: undefined,
src={user.user.picture_url} src: user.user.picture_url
alt="User Avatar" }}
className="user-avatar" className="p-2"
/> />
)} </Card>
</div>
) : ( ) : (
<></> <></>
); );

22
packages/client/src/components/Profile/UserCard.tsx
View File

@ -1,6 +1,6 @@
import { faMessage, faWarning } from "@fortawesome/free-solid-svg-icons"; import { faMessage, faWarning } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button, Link, Spinner } from "@nextui-org/react"; import { Avatar, Button, Link, Spinner, User } from "@nextui-org/react";
import { ClientConfig } from "@sc07-canvas/lib/src/net"; import { ClientConfig } from "@sc07-canvas/lib/src/net";
import { MouseEvent, useEffect, useState } from "react"; import { MouseEvent, useEffect, useState } from "react";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
@ -74,17 +74,17 @@ export const UserCard = ({ user }: { user: IUser }) => {
return ( return (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex flex-row gap-2"> <div className="flex flex-row space-between p-2">
<img <User
src={user?.picture_url} name={user?.display_name || 'Unknown'}
alt={`${user?.sub}'s profile`} description={user?.sub || 'Unknown'}
className="w-12 h-12" avatarProps={{
showFallback: true,
name: undefined,
src: user?.picture_url
}}
/> />
<div className="flex flex-col gap-0.25 grow"> <div className="ml-auto">
<span>{user?.display_name}</span>
<span className="text-sm">{user?.sub}</span>
</div>
<div>
{config && ( {config && (
<Button <Button
isIconOnly isIconOnly