Page MenuHomeSealhub
Files F1389841

No OneTemporary
Actions

View Options

diff --git a/src/back/jdd-components/collage/collage.css b/src/back/jdd-components/collage/collage.css
new file mode 100644
index 0000000..3481624
--- /dev/null
+++ b/src/back/jdd-components/collage/collage.css
@@ -0,0 +1,25 @@
+.collage {
+ display: grid;
+ grid-template-columns: 150px 150px 150px;
+ grid-template-rows: 20px 160px 20px repeat(calc(var(--images-count) - 1), 160px 20px);
+ justify-content: center;
+
+ .collage__image {
+ grid-row: calc(2 * var(--collage-index) + 1) / calc(2 * var(--collage-index) + 4);
+
+ &:nth-child(2n + 1) {
+ grid-column: 1/3;
+ }
+
+ &:nth-child(2n) {
+ grid-column: 2/4;
+ }
+ }
+
+ @container (max-width: 520px) {
+ display: flex !important;
+ flex-flow: column;
+ gap: 16px;
+ align-items: center;
+ }
+}
diff --git a/src/back/jdd-components/collage/collage.jdd.tsx b/src/back/jdd-components/collage/collage.jdd.tsx
new file mode 100644
index 0000000..9dd4195
--- /dev/null
+++ b/src/back/jdd-components/collage/collage.jdd.tsx
@@ -0,0 +1,36 @@
+import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+
+const component_arguments = {
+ images: new ComponentArguments.List(new ComponentArguments.Image()),
+} as const;
+
+export class Collage extends Component<typeof component_arguments> {
+ getArguments() {
+ return component_arguments;
+ }
+
+ async toHTML({
+ args: { images },
+ classes,
+ jdd_context: { render_image },
+ }: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+ return (
+ <div
+ class={["collage", ...classes]}
+ style={`--images-count: ${images.length}`}
+ >
+ {images.map((image, index) => (
+ <div class="collage__image" style={`--collage-index: ${index}`}>
+ {render_image(image, {
+ container: { width: 300, height: 200 },
+ crop: { width: 300, height: 200 },
+ alt: "",
+ })}
+ </div>
+ ))}
+ </div>
+ );
+ }
+}

File Metadata

Mime Type
text/x-diff
Expires
Wed, Mar 26, 20:54 (12 h, 46 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
619406
Default Alt Text
(1 KB)

Event Timeline