1 files changed, 40 insertions, 0 deletions

diff --git a/src/ui/objects/CardImage.tsx b/src/ui/objects/CardImage.tsx
new file mode 100644
index 0000000..12b9735
--- /dev/null
+++ b/src/ui/objects/CardImage.tsx
@@ -0,0 +1,40 @@
+import type { Props as ImageProps } from "corvos/plugins/images.ts";
+import type { CSSProperties } from "https://cdn.jsdelivr.net/gh/oscarotero/ssx@0.1.14/css.ts";
+
+import { Image } from "corvos/plugins/images.ts";
+
+export type Props = ImageProps & {
+        "list"?: boolean;
+        "img-class"?: unknown;
+        "img-style"?: CSSProperties;
+        "aspect"?: `${number} / ${number}`;
+        "content-class"?: unknown;
+        "children"?: JSX.Element;
+};
+
+export const CardImage = ({
+        children,
+        list,
+        "img-class": imgClass,
+        aspect,
+        "content-class": contentClass,
+        alt,
+        class: cls,
+        style,
+        "img-style": imgStyle,
+        ...props
+}: Props) => (
+        <div class:list={["o-card__image", cls]} style={style}>
+                <Image
+                        class:list={["o-card__image-img", { "l-card-list__card-image": list }, imgClass]}
+                        style={{
+                                "aspect-ratio": aspect,
+                                "block-size": aspect ? "auto" : undefined,
+                                ...imgStyle,
+                        }}
+                        alt={alt}
+                        {...props}
+                />
+                {children && <div class:list={["o-card__image-overlay", contentClass]}>{children}</div>}
+        </div>
+);