chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

quick snapshot

Browse source
This commit is contained in:
Chris Kruining 2024-10-24 14:39:08 +02:00
parent b03f80f34f
commit 5367ed2f44
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
10 changed files with 309 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/tabs.tsx
View file

@ -1,4 +1,4 @@
import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, For, JSX, onMount, ParentComponent, Show, useContext } from "solid-js";
import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, For, JSX, onMount, ParentComponent, Setter, Show, useContext } from "solid-js";
import css from "./tabs.module.css";
interface TabsContextType {
@ -17,37 +17,18 @@ const useTabs = () => {
return context!;
}
export const Tabs: ParentComponent = (props) => {
export const Tabs: ParentComponent<{ active?: Setter<string | undefined> }> = (props) => {
const [active, setActive] = createSignal<string | undefined>(undefined);
const [tabs, setTabs] = createSignal<{ id: string, label: string }[]>([]);
// const resolved = children(() => props.children);
// const resolvedArray = createMemo(() => resolved.toArray());
// const tabs = createMemo(() => resolvedArray().map(t => ({ id: t.id, label: t.dataset?.label ?? '' })));
// createEffect(() => {
// for (const t of resolvedArray()) {
// console.log(t);
// }
// });
createEffect(() => {
props.active?.(active());
});
createEffect(() => {
setActive(tabs().at(-1)?.id);
});
// createRenderEffect(() => {
// if (isServer) {
// return;
// }
// for (const t of resolvedArray().filter(t => t instanceof HTMLElement)) {
// if (active() === t.id) {
// t.classList.add(css.active);
// } else {
// t.classList.remove(css.active);
// }
// }
// });
const ctx = {
register(id: string, label: string) {
setTabs(tabs => [...tabs, { id, label }]);
@ -56,10 +37,6 @@ export const Tabs: ParentComponent = (props) => {
},
};
createEffect(() => {
console.log(tabs());
});
return <TabsContext.Provider value={ctx}>
<div class={css.tabs}>
<header>