Page MenuHomeSealhub
Files F7188899

No OneTemporary
Actions

View Options

diff --git a/src/back/jdd-components/items-list/items-list.css b/src/back/jdd-components/items-list/items-list.css
new file mode 100644
index 0000000..a39fc32
--- /dev/null
+++ b/src/back/jdd-components/items-list/items-list.css
@@ -0,0 +1,20 @@
+.items-list {
+ overflow-x: scroll;
+
+ &.items-list--mode-horizontal {
+ display: flex;
+ flex-flow: row nowrap;
+ gap: 16px;
+ }
+
+ .items-list__item {
+ background-color: var(--color-brand-text-bg);
+ color: var(--color-brand-text-fg);
+ padding: 16px;
+ min-width: 260px;
+
+ .items-list__item__title {
+ font-size: 32px;
+ }
+ }
+}
diff --git a/src/back/jdd-components/items-list/items-list.jdd.tsx b/src/back/jdd-components/items-list/items-list.jdd.tsx
new file mode 100644
index 0000000..648ed82
--- /dev/null
+++ b/src/back/jdd-components/items-list/items-list.jdd.tsx
@@ -0,0 +1,53 @@
+import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+import { Collection } from "sealious";
+
+const component_arguments = {
+ mode: new ComponentArguments.Enum(["horizontal"]),
+ collection: new ComponentArguments.ShortText().setExampleValues(["pages"]),
+ title_field: new ComponentArguments.ShortText().setExampleValues(["title"]),
+ text_content_field: new ComponentArguments.ShortText().setExampleValues([
+ "description",
+ ]),
+ count: new ComponentArguments.ShortText().setExampleValues(["3", "5"]),
+} as const;
+
+interface OptimisticCollectionItem {
+ get: (name: string) => string;
+}
+
+export class ItemsList extends Component<typeof component_arguments> {
+ getArguments() {
+ return component_arguments;
+ }
+
+ async toHTML({
+ args: { mode, collection, title_field, text_content_field },
+ classes,
+ jdd_context: { render_markdown, render_image, language, ctx },
+ }: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+ classes.push(`items-list--mode-${mode}`);
+ const collections = ctx.$app.collections;
+ const { items } = await collections[collection as keyof typeof collections]
+ .list(ctx.$context)
+ .fetch();
+ return (
+ <div class={["items-list", ...classes]}>
+ {items.map((item) => (
+ <div class="items-list__item">
+ <span class="items-list__item__title">
+ {(item as OptimisticCollectionItem).get(title_field)}
+ </span>
+ <div>
+ {render_markdown(
+ language,
+ (item as OptimisticCollectionItem).get(text_content_field)
+ )}
+ </div>
+ </div>
+ ))}
+ </div>
+ );
+ }
+}

File Metadata

Mime Type
text/x-diff
Expires
Tue, Jul 8, 08:35 (7 h, 53 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
810493
Default Alt Text
(2 KB)

Event Timeline