1 files changed, 69 insertions, 0 deletions

diff --git a/src/ui/objects/Avatar.tsx b/src/ui/objects/Avatar.tsx
new file mode 100644
index 0000000..459af12
--- /dev/null
+++ b/src/ui/objects/Avatar.tsx
@@ -0,0 +1,69 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+import { StatusIndicator } from "$/ui/objects/StatusIndicator.tsx";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+        "as"?: Tag;
+        "src"?: string;
+        "icon"?: JSX.Element;
+        "children"?: JSX.Element;
+        "class"?: string;
+        "circle"?: boolean;
+        "placeholder"?: boolean;
+        "color"?: `hsl(${number}, ${number}%, ${number}%)`;
+        "color2"?: `hsl(${number}, ${number}%, ${number}%)`;
+        "color-angle"?: number | `${number}`;
+        "size"?: "xs" | "sm" | "lg" | "xl" | "xxl" | "xxxl";
+        "status"?: "accent" | "positive" | "negative" | "warning";
+}>;
+
+const hslRegex = /^hsl\(([\d.]+), ([\d.]+%), ([\d.]+%)\)$/;
+
+export const Avatar = <T extends HTMLTag = "div">({
+        children,
+        as: Tag = "div" as T,
+        src,
+        icon,
+        circle,
+        placeholder,
+        color,
+        color2,
+        "color-angle": colorAngle,
+        size,
+        status,
+        class: cls,
+        ...props
+}: Props<T>) => (
+        <Tag
+                class:list={[
+                        "o-avatar",
+                        {
+                                "o-avatar--circle": circle,
+                                "o-avatar--placeholder": placeholder,
+                                "o-avatar--colored": color && !color2,
+                                "o-avatar--colored-gradient": color && !!color2,
+                                [`o-avatar--${size}`]: !!size,
+                        },
+                        cls,
+                ]}
+                style={{
+                        "--o-avatar--bg-angle": colorAngle,
+                        "--o-avatar--bg-color--h": color?.match(hslRegex)?.[1],
+                        "--o-avatar--bg-color--l": color?.match(hslRegex)?.[3],
+                        "--o-avatar--bg-color--s": color?.match(hslRegex)?.[2],
+                        "--o-avatar--bg-color-2--h": color2?.match(hslRegex)?.[1],
+                        "--o-avatar--bg-color-2--l": color2?.match(hslRegex)?.[3],
+                        "--o-avatar--bg-color-2--s": color2?.match(hslRegex)?.[2],
+                }}
+                {...props}
+        >
+                {status && <StatusIndicator class="o-avatar__status" status={status} />}
+                {icon && <div class="o-avatar__icon u-ai-end u-jc-end">{icon}</div>}
+
+                {src ? (
+                        <img alt="" class="o-avatar__content" src={src} />
+                ) : (
+                        <span class="o-avatar__content">{children}</span>
+                )}
+        </Tag>
+);