components/editor-badge/comps/user_card.tsx

import { useMemo } from "react";

import { BadgeType } from "@/types/badge";
import { useUser } from "@/utils/auth";
import DefaultAvatar from "assets/images/avatars/default-avatar.svg";
import { Moderator } from "@/components/svg/icons/discord";
import { Boost2 } from "@/components/svg/icons/discord";
import { Preview } from "./preview";
import { DownloadButton } from "./download_button";

export const UserCard = ({
  badge,
  onSave,
}: {
  badge: BadgeType;
  onSave: (e?: boolean) => void;
}) => {
  const { user, loading } = useUser();

  const convertNumberToStringColor = (color: number) => {
    if (!color) return "#121212";
    return "#" + color?.toString(16);
  };

  const bannerStyle = useMemo(() => {
    let style: any = { backgroundColor: "#121212", height: 60 };

    if (user?.id) {
      if (user?.banner) {
        style.backgroundImage = `url(https://cdn.discordapp.com/banners/${user.id}/${user.banner}.gif?size=1024)`;
        style.height = 120;
        style.borderLeft = "5px solid #232429";
        style.borderTop = "5px solid #232429";
        style.borderRight = "5px solid #232429";
      } else {
        // style.backgroundColor = convertNumberToStringColor(user?.accent_color);
        style.backgroundColor = user?.accent_color;
      }
    }

    return style;
  }, [user]);

  return (
    <div className="bg-dark-500 rounded-lg w-full overflow-hidden">
      <header
        className={`w-full rounded-t-lg bg-cover bg-center bg-no-repeat p-6 relative ${
          loading && "animate-pulse"
        }`}
        style={bannerStyle}
      >
        <figure
          style={{
            backgroundImage: `url(${
              user?.id
                ? user.avatar
                  ? `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`
                  : `https://cdn.discordapp.com/embed/avatars/${
                      user?.id % 5
                    }.png`
                : DefaultAvatar.src
            })`,
          }}
          className="w-[80px] h-[80px] rounded-full ring-[6px] ring-dark-500  absolute bottom-0 left-5 translate-y-1/2 bg-cover bg-center"
        >
          <div className="bg-[#22A55A] w-[16px] h-[16px] rounded-full absolute bottom-1 right-1 ring-[6px] ring-dark-500"></div>
        </figure>
      </header>
      <main className="px-5 pb-5 pt-4 flex flex-col gap-4 items-end">
        <div className="rounded-md bg-[#111214] p-1.5 flex items-center justify-end gap-2">
          <svg
            width={16}
            height={16}
            viewBox="0 0 160 189"
            fill="#FFAC32"
            style={{ minWidth: 16, minHeight: 16 }}
          >
            <Moderator />
          </svg>
          <svg
            width={16}
            height={16}
            viewBox="0 0 170 144"
            fill="#FF73FA"
            style={{ minWidth: 16, minHeight: 16 }}
          >
            <Boost2 />
          </svg>
        </div>
        <div className="bg-[#111214] rounded-lg px-3 pt-3 pb-4 w-full">
          <p className="text-white font-bold text-xl">
            Captain Astro
          </p>
          <p className="text-white text-sm">
            captainastro
          </p>
          <div className="w-full h-[1px] bg-[#2E2F35] my-3" />
          <p className="text-xs uppercase font-bold text-white mb-2">
            About me
          </p>
          <Preview badge={badge} />
          {/* <p className="text-xs uppercase font-bold text-white mt-3 mb-2">
            Member since
          </p> */}
          <DownloadButton onSave={onSave} />
          <p className="text-xs text-dark-200 mt-2">
            Image will be split into multiple parts. You will upload them as
            server emojis on Discord to use them on your discord Profile.
          </p>
        </div>
      </main>
    </div>
  );
};