From c1e28224aa2e1450031669d9a7e359b63e04687d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 19:40:59 +0200
Subject: Init

---
 src/ui/objects/CardImage.tsx | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/ui/objects/CardImage.tsx

(limited to 'src/ui/objects/CardImage.tsx')

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>
+);
-- 
cgit v1.3.1