@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
42 lines • 2.1 kB
JSX
"use client";
import Image from "next/image";
import Style from "./Avatar.styled";
export default function Avatar(props) {
const name = props?.name;
const scale = props?.scale || 1;
const size = props?.size || 3;
const color = props?.color || "white";
const character = props?.character || 1;
const display = props?.display;
const hideName = props?.hideName || false;
const fill = props?.fill || false;
const align = props?.align || "left";
const ellipsis = props?.ellipsis || "...";
const avatar = () => {
return ((name || (props?.img && props?.img !== "")) && (<div>
{props?.img && props?.img !== "" ? (<Image src={props?.img} fill sizes="100%" alt={""} title={props?.title}/>) : (((typeof character === "string" && character !== "") || (name && name !== "")) && (<span>
<span>
{typeof character === "number"
? name?.startsWith("0x")
? name?.substring(2, 2 + character)
: name?.substring(0, character)
: character}
</span>
</span>))}
</div>));
};
return (<>
{((props?.img && props?.img !== "") || (props?.name && props?.name !== "")) && (<Style $color={color} $scale={scale} $size={size} $fill={fill} $stroke={props?.stroke} $fit={props?.fit || false} style={props?.style}>
{align === "left" && avatar()}
{!hideName && name && name !== "" && (<span>
{display && display < name?.length
? `${(name?.startsWith("0x") ? name?.substring(0, 2 + display) : name?.substring(0, display)) +
ellipsis +
name?.substring(name?.length - display)}`
: name}
</span>)}
{align === "right" && avatar()}
</Style>)}
</>);
}
//# sourceMappingURL=Avatar.jsx.map