Page MenuHomeSealhub
Files F10360512

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>
),
make_show_less_button = () => (
<span class="show-first-row__default-button">Show less</span>
),
add_button_to_content = (content, show_more_button, show_less_button) => (
<>
{content}
{show_more_button}
{show_less_button}
</>
),
}: {
items: FlatTemplatable[];
min_column_width_px?: number;
make_show_more_button?: () => JSX.Element;
make_show_less_button?: () => JSX.Element;
column_gap_px?: number;
add_button_to_content?: (
content: JSX.Element,
show_more_button: JSX.Element,
show_less_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", "show-first-row__show-more-button"]}
>
{make_show_more_button()}
</label>,
<label
for={checkbox_id}
class={["show-first-row__button", "show-first-row__show-less-button"]}
>
{make_show_less_button()}
</label>
)}
</div>
);
}

File Metadata

Mime Type
text/html
Expires
Sat, Nov 8, 07:06 (1 d, 20 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1034261
Default Alt Text
show-first-row.tsx (2 KB)

Event Timeline