Page MenuHomeSealhub
Files F10360989

show-first-row.tsx
No OneTemporary
Actions

show-first-row.tsx
View Options

import { TempstreamJSX } from "tempstream";
import type { FlatTemplatable } from "tempstream";
const showFirstRowIds = (function* () {
let i = 0;
while (true) {
yield i++;
if (i == 999999999) {
i = 0;
}
}
})();
export async function showFirstRow({
items,
min_column_width_px = 250,
column_gap_px = 10,
make_show_more_button = () => (
<span class="show-first-row__default-button">Show more</span>
),
add_button_to_content = (content, button) => (
<>
{content}
{button}
</>
),
}: {
items: FlatTemplatable[];
min_column_width_px?: number;
make_show_more_button?: () => JSX.Element;
column_gap_px?: number;
add_button_to_content?: (content: JSX.Element, button: JSX.Element) => JSX.Element;
}): Promise<string> {
const id = showFirstRowIds.next().value;
const checkbox_id = "show-first-row__checkbox--" + id;
return (
<div
class={[
"show-first-row",
`show-first-row--id-${id}`,
`show-first-row--items-count-${items.length}`,
]}
style={`--min-column-width: ${min_column_width_px}px; --items-count: ${items.length}; --column-gap: ${column_gap_px}px`}
>
{
/* HTML */ `<style>
${[1, 2, 3, 4, 5, 6, 7, 8, 9]
.reverse()
.map(
(n) => `@container (min-width: ${
n * min_column_width_px + (n - 1) * column_gap_px
}px) {
.show-first-row--id-${id}:not(:has(.show-first-row__items > *:nth-child(${n + 1})))
.show-first-row__button {
display: none;
}
}`
)
.join("\n")}
</style>`
}
<input type="checkbox" id={checkbox_id} style="display: none" />
{add_button_to_content(
<div class={["show-first-row__items"]}>{items}</div>,
<label for={checkbox_id} class={["show-first-row__button"]}>
{make_show_more_button()}
</label>
)}
</div>
);
}

File Metadata

Mime Type
text/html
Expires
Sat, Nov 8, 10:21 (22 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1034459
Default Alt Text
show-first-row.tsx (1 KB)

Event Timeline