Page MenuHomeSealhub
Files F10361193

No OneTemporary
Actions

View Options

diff --git a/src/back/jdd-components/components.ts b/src/back/jdd-components/components.ts
index 3d8516d..3e67dae 100644
--- a/src/back/jdd-components/components.ts
+++ b/src/back/jdd-components/components.ts
@@ -1,19 +1,22 @@
// DO NOT EDIT! This file is generated automaticaly with 'npm run generate-components'
import { Registry } from "@sealcode/jdd";
export const registry = new Registry();
import { AutoscrollingImages } from "./autoscrolling-images/autoscrolling-images.jdd.js";
registry.add("autoscrolling-images", AutoscrollingImages);
+import { HeaderWithImage } from "./header-with-image/header-with-image.jdd.js";
+registry.add("header-with-image", HeaderWithImage);
+
import { ImageDemo } from "./image-demo/image-demo.jdd.js";
registry.add("image-demo", ImageDemo);
import { MapWithPins } from "./map-with-pins/map-with-pins.jdd.js";
registry.add("map-with-pins", MapWithPins);
import { NiceBox } from "./nice-box/nice-box.jdd.js";
registry.add("nice-box", NiceBox);
import { Table } from "./table/table.jdd.js";
registry.add("table", Table);
diff --git a/src/back/jdd-components/header-with-image/header-with-image.css b/src/back/jdd-components/header-with-image/header-with-image.css
new file mode 100644
index 0000000..72afa25
--- /dev/null
+++ b/src/back/jdd-components/header-with-image/header-with-image.css
@@ -0,0 +1,146 @@
+.header-with-image {
+ display: flex;
+ justify-content: center;
+
+ color: #0d4d69;
+
+ * {
+ padding: 0;
+ margin: 0;
+ }
+
+ .container {
+ max-width: 1210px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto auto auto;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .container > * {
+ grid-column: 2/2;
+ }
+
+ .img-container {
+ max-width: 600px;
+ grid-column: 1/2;
+ grid-row: 1/4;
+ }
+
+ .container > div {
+ padding: 0 0 0px 24px;
+ }
+
+ .container > .img-container {
+ padding: 0;
+ }
+
+ .title-wrapper {
+ margin-bottom: 14px;
+ }
+
+ .title {
+ font-size: 48px;
+ line-height: 48px;
+ }
+
+ .img-container picture {
+ width: 100%;
+ border-radius: 10px;
+ }
+
+ .content {
+ font-size: 20px;
+ line-height: 30px;
+ }
+
+ .button-container {
+ margin-top: 14px;
+ }
+
+ .button {
+ color: #ffffff;
+ background-color: #0b456b;
+ text-align: center;
+ text-decoration: none;
+ padding: 8px 24px 8px 24px;
+ border-radius: 25px;
+ font-size: 16px;
+ line-height: 30px;
+ }
+}
+
+@container (width < 1100px) {
+ .header-with-image {
+ .title {
+ font-size: 38px;
+ line-height: 38px;
+ }
+
+ .content {
+ font-size: 19px;
+ line-height: 28px;
+ }
+ }
+}
+
+@container (width < 1024px) {
+ .header-with-image {
+ .container {
+ grid-template-columns: 1fr;
+ gap: 0;
+ }
+
+ .container {
+ grid-template-columns: 1fr;
+ }
+
+ .img-container {
+ grid-column: 1/1;
+ grid-row: auto;
+ order: 2;
+ }
+
+ .container > div {
+ grid-column: 1/1;
+ padding: 0 16px;
+ }
+
+ .container > .img-container {
+ padding: 0 16px;
+ }
+
+ .button-container {
+ order: 3;
+ display: flex;
+ justify-content: center;
+ }
+
+ .title {
+ font-size: 28px;
+ line-height: 33.52px;
+ }
+
+ .title-wrapper {
+ margin-bottom: 5px;
+ }
+
+ .content {
+ font-size: 18px;
+ line-height: 27px;
+ }
+
+ .img-container {
+ margin-top: 16px;
+ }
+
+ .button-container {
+ margin-top: 16px;
+ }
+
+ .container > div {
+ max-width: 650px;
+ }
+ }
+}
diff --git a/src/back/jdd-components/header-with-image/header-with-image.jdd.tsx b/src/back/jdd-components/header-with-image/header-with-image.jdd.tsx
new file mode 100644
index 0000000..dfa63e6
--- /dev/null
+++ b/src/back/jdd-components/header-with-image/header-with-image.jdd.tsx
@@ -0,0 +1,64 @@
+import { FlatTemplatable, TempstreamJSX } from "tempstream";
+import {
+ Component,
+ ComponentArguments,
+ ExtractStructuredComponentArgumentsValues,
+ JDDContext,
+} from "@sealcode/jdd";
+
+const component_arguments = {
+ title: new ComponentArguments.ShortText(),
+ content: new ComponentArguments.Markdown(),
+ image_with_alt: new ComponentArguments.Structured({
+ image: new ComponentArguments.Image(),
+ alt: new ComponentArguments.ShortText(),
+ }),
+ button: new ComponentArguments.Structured({
+ text: new ComponentArguments.ShortText().setExampleValues([""]),
+ link: new ComponentArguments.ShortText().setExampleValues([""]),
+ }),
+} as const;
+
+export class HeaderWithImage extends Component<typeof component_arguments> {
+ getArguments() {
+ return component_arguments;
+ }
+
+ toHTML(
+ {
+ title,
+ content,
+ image_with_alt,
+ button,
+ }: ExtractStructuredComponentArgumentsValues<typeof component_arguments>,
+ { render_markdown, render_image }: JDDContext
+ ): FlatTemplatable {
+ const buttonText = button.text.toUpperCase();
+ const titleUpperCase = title.toUpperCase();
+
+ return (
+ <div class="header-with-image">
+ <div class="container">
+ <div class="img-container">
+ {render_image(image_with_alt.image, {
+ container: { width: 600, height: 450, objectFit: "contain" },
+ alt: image_with_alt.alt,
+ // crop: { width: 600, height: 450 },
+ })}
+ </div>
+ <div class="title-wrapper">
+ <h2 class="title">{titleUpperCase}</h2>
+ </div>
+ <div class="content">{render_markdown(content)}</div>
+ {button.text === "" ? null : (
+ <div class="button-container">
+ <a class="button" href={button.link}>
+ {buttonText}
+ </a>
+ </div>
+ )}
+ </div>
+ </div>
+ );
+ }
+}
diff --git a/src/includes.css b/src/includes.css
index f1031be..223f0d5 100644
--- a/src/includes.css
+++ b/src/includes.css
@@ -1,12 +1,13 @@
/* DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-css-includes */
@import "../node_modules/@sealcode/sealgen/src/forms/forms.css";
@import "back/jdd-components/autoscrolling-images/autoscrolling-images.css";
+@import "back/jdd-components/header-with-image/header-with-image.css";
@import "back/jdd-components/image-demo/image-demo.css";
@import "back/jdd-components/map-with-pins/map-with-pins.css";
@import "back/jdd-components/nice-box/nice-box.css";
@import "back/jdd-components/table/table.css";
@import "back/routes/common/ui/input.css";
@import "back/routes/components.css";
@import "colors.css";
@import "tables.css";

File Metadata

Mime Type
text/x-diff
Expires
Sat, Nov 8, 12:01 (16 h, 55 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1034552
Default Alt Text
(6 KB)

Event Timeline