Spaces:
Running
Running
File size: 3,827 Bytes
9cd6ddb a418585 9cd6ddb a418585 9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
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>
);
};
|