fix(headless/tabs): flickering is fixed

Author: shairez

apps/website/src/routes/docs/headless/(components)/tabs/examples.tsx

@@ -5,35 +5,24 @@ import styles from './index.css?inline';
 
 export const Example01 = component$(() => {
   useStyles$(styles);
-  return (
-    <div class="tabs-example">
-      <h3>Danish Composers</h3>
-      <Tabs behavior="automatic">
-        <TabPanel title="Maria Ahlefeldt">
-          <p>Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was a ...</p>
-        </TabPanel>
-        <TabPanel title="Carl Andersen">
-          <p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
-        </TabPanel>
-        <TabPanel title="Ida Henriette da Fonseca">
-          <p>Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...</p>
-        </TabPanel>
-      </Tabs>
-    </div>
-  );
 
   return (
     <PreviewCodeExample>
       <div q:slot="actualComponent" class="tabs-example">
         <h3>Danish Composers</h3>
         <Tabs behavior="automatic">
-          <TabPanel title="Maria Ahlefeldt">
+          <TabList>
+            <Tab>Maria Ahlefeldt</Tab>
+            <Tab>Carl Andersen</Tab>
+            <Tab>Ida Henriette da Fonseca</Tab>
+          </TabList>
+          <TabPanel>
             <p>Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was a ...</p>
           </TabPanel>
-          <TabPanel title="Carl Andersen">
+          <TabPanel>
             <p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
           </TabPanel>
-          <TabPanel title="Ida Henriette da Fonseca">
+          <TabPanel>
             <p>Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...</p>
           </TabPanel>
         </Tabs>
@@ -214,7 +203,7 @@ export const OnSelectedIndexChangeTabsExample = component$(() => {
     <PreviewCodeExample>
       <div q:slot="actualComponent" class="tabs-example mr-auto">
         <Tabs
-          onSelectedIndexChange$={(index) => {
+          onSelectedIndexChange$={(index: number) => {
             selectedIndexSig.value = index;
           }}
         >