Init

1 files changed, 46 insertions, 0 deletions

diff --git a/src/ui/objects/Thumbnail.tsx b/src/ui/objects/Thumbnail.tsx
new file mode 100644
index 0000000..4ef76d3
--- /dev/null
+++ b/src/ui/objects/Thumbnail.tsx
@@ -0,0 +1,46 @@
+import type { Props as ImageProps } from "corvos/plugins/images.ts";
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Image } from "corvos/plugins/images.ts";
+
+export type Props = HTMLAttributes<"a"> &
+        ImageProps & {
+                "x-bind:src"?: string;
+                "x-bind:srcset"?: string;
+                "x-bind:alt"?: string;
+                "variant"?: "static-black" | "static-white";
+        };
+
+export const Thumbnail = ({
+        src,
+        srcset,
+        alt,
+        "x-bind:src": xbindSrc,
+        "x-bind:srcset": xbindSrcset,
+        "x-bind:alt": xbindAlt,
+        variant,
+        class: cls,
+        widths,
+        width,
+        height,
+        densities,
+        "no-transform": noTransform,
+        ...props
+}: Props) => (
+        <a class:list={["o-thumbnail", { [`o-thumbnail--${variant}`]: variant }, cls]} {...props}>
+                <Image
+                        class="o-thumbnail__image"
+                        src={src}
+                        srcset={srcset}
+                        widths={widths as undefined}
+                        width={width}
+                        height={height}
+                        densities={densities}
+                        no-transform={noTransform}
+                        alt={alt}
+                        x-bind:src={xbindSrc}
+                        x-bind:srcset={xbindSrcset}
+                        x-bind:alt={xbindAlt}
+                />
+        </a>
+);