Hi there, not sure exactly what am i doing wrong here
I have Faq component
export const Faq = component$(() => {
return (
<div class="mt-10">
<h2 class="text-xl lg:text-2xl font-bold">Faq</h2>
<Details title="blah blah">
blah blah blah
</Details>
</div>
);
});
and Details component
export const Details = component$(({ title, open }: Props) => {
const contentRef = useSignal<HTMLDivElement>();
const isOpen = useSignal(open ?? false);
const onSummary = $((ev: QwikMouseEvent<HTMLElement, MouseEvent>) => {
const elem = ev.target as HTMLElement;
if (!isOpen.value) {
scrollIntoView(elem.parentElement!, { time: 350, maxSynchronousAlignments: 1, align: { top: 0 } });
}
isOpen.value = !isOpen.value;
});
return (
<details class="group bg-base-200 rounded-2xl mt-6" open={open}>
<summary class="flex justify-between items-center text-xl font-medium cursor-pointer list-none px-4 py-4" onClick$={onSummary}>
<span class="pr-4">{title}</span>
<span class="transition group-open:rotate-180">
<svg
fill="none"
height="24"
shape-rendering="geometricPrecision"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="24"
>
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<div class="transition-all duration-1000 px-4 pb-4" ref={contentRef}>
<Slot />
</div>
</details>
);
});
If i make some changed in Details component they are not visible untill i also resave Faq component
Is it supposed to be like that?