Merge branch 'whois-alt' into 'main'

import { Card, User as UserElement } from "@nextui-org/react";

import { useAppContext } from "../../contexts/AppContext";

export const User = () => {

  const { user } = useAppContext();

  return user ? (

    <div className="user-card">

      <div className="user-card--overview">

        <div className="user-name">{user.user.username}</div>

        <div className="user-instance">{user.service.instance.hostname}</div>

      </div>

      {user.user.picture_url && (

        <img

          src={user.user.picture_url}

          alt="User Avatar"

          className="user-avatar"

    <Card>

      <UserElement

        name={user.user.username}

        description={user.service.instance.hostname}

        avatarProps={{

          showFallback: true,

          name: undefined,

          src: user.user.picture_url

        }}

        className="p-2"

      />

      )}

    </div>

    </Card>

  ) : (

    <></>

  );

import { faMessage, faWarning } from "@fortawesome/free-solid-svg-icons";

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 { MouseEvent, useEffect, useState } from "react";

import { toast } from "react-toastify";

  return (

    <div className="flex flex-col gap-1">

      <div className="flex flex-row gap-2">

        <img

          src={user?.picture_url}

          alt={`${user?.sub}'s profile`}

          className="w-12 h-12"

      <div className="flex flex-row space-between p-2">

        <User 

          name={user?.display_name || 'Unknown'}

          description={user?.sub || 'Unknown'}

          avatarProps={{

            showFallback: true,

            name: undefined,

            src: user?.picture_url

          }}

        />

        <div className="flex flex-col gap-0.25 grow">

          <span>{user?.display_name}</span>

          <span className="text-sm">{user?.sub}</span>

        </div>

        <div>

        <div className="ml-auto">

          {config && (

            <Button

              isIconOnly