kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make item lists clickable

Browse Source
This commit is contained in:
Kuba Orlik 2025-03-03 21:35:30 +01:00
parent b1ff4a62c8
commit bb64b20312
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/back/jdd-components/items-list/items-list.css
View File

@ -8,6 +8,7 @@
} }
.items-list__item { .items-list__item {
text-decoration: none;
background-color: var(--color-brand-text-bg); background-color: var(--color-brand-text-bg);
color: var(--color-brand-text-fg); color: var(--color-brand-text-fg);
padding: 16px; padding: 16px;

7
src/back/jdd-components/items-list/items-list.jdd.tsx
View File

@ -10,6 +10,7 @@ const component_arguments = {
"description", "description",
]), ]),
count: new ComponentArguments.ShortText().setExampleValues(["3", "5"]), count: new ComponentArguments.ShortText().setExampleValues(["3", "5"]),
url: new ComponentArguments.ShortText().setExampleValues(["/items/:id/"]),
} as const; } as const;
interface OptimisticCollectionItem { interface OptimisticCollectionItem {
@ -22,7 +23,7 @@ export class ItemsList extends Component<typeof component_arguments> {
} }
async toHTML({ async toHTML({
args: { mode, collection, title_field, text_content_field }, args: { mode, collection, title_field, text_content_field, url },
classes, classes,
jdd_context: { render_markdown, language, ctx }, jdd_context: { render_markdown, language, ctx },
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> { }: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
@ -34,7 +35,7 @@ export class ItemsList extends Component<typeof component_arguments> {
return ( return (
<div class={["items-list", ...classes]}> <div class={["items-list", ...classes]}>
{items.map((item) => ( {items.map((item) => (
<div class="items-list__item"> <a class="items-list__item" href={url.replaceAll(":id", item.id)}>
<span class="items-list__item__title"> <span class="items-list__item__title">
{(item as OptimisticCollectionItem).get(title_field)} {(item as OptimisticCollectionItem).get(title_field)}
</span> </span>
@ -44,7 +45,7 @@ export class ItemsList extends Component<typeof component_arguments> {
(item as OptimisticCollectionItem).get(text_content_field) (item as OptimisticCollectionItem).get(text_content_field)
)} )}
</div> </div>
</div> </a>
))} ))}
</div> </div>
); );