feat(api table-popover): added the info popover to the API table

added the info popover to the API table- to check

Author: itaim18

apps/website/src/components/api-table/api-table.tsx

@@ -1,8 +1,12 @@
 import { component$ } from '@builder.io/qwik';
-
+import { Tooltip } from '@qwik-ui/headless';
+import { Popover, PopoverContent, PopoverTrigger } from '@qwik-ui/headless';
+import {} from '@qwik-ui/headless';
+import { Button } from '@qwik-ui/tailwind';
 type APITableProps = {
   propDescriptors: {
     name: string;
+    info: string;
     type: string;
     description: string;
   }[];
@@ -28,8 +32,37 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
                 <code>{propDescriptor.name}</code>
               </td>
               <td class="prose prose-sm py-3 align-baseline">
-                <span class="">
+                <span class="flex items-center">
                   <code>{propDescriptor.type}</code>
+                  {propDescriptor.info && (
+                    <Popover placement="top">
+                      <PopoverContent>
+                        <div class="bg-[#202425] text-[#7881fa] max-w-xs mb-2 text-md px-4 py-2  rounded-md">
+                          {propDescriptor?.info}
+                        </div>
+                      </PopoverContent>
+                      <PopoverTrigger>
+                        <div class="hover:bg-slate-500 hover:bg-opacity-50 h-[31px] mt-2 p-2 rounded-md">
+                          <svg
+                            width="15"
+                            height="15"
+                            viewBox="0 0 15 15"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            aria-hidden="true"
+                            focusable="false"
+                          >
+                            <path
+                              d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                              clip-rule="evenodd"
+                            ></path>
+                          </svg>
+                        </div>{' '}
+                      </PopoverTrigger>
+                    </Popover>
+                  )}
                 </span>
               </td>
               <td class="py-3 align-baseline">

apps/website/src/routes/docs/headless/(components)/accordion/index.mdx

@@ -164,7 +164,8 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'onClick$',
-      type: 'PropFunction<() => void>',
+      type: 'function',
+      info: 'PropFunction<() => void>',
       description: 'A custom click handler',
     },
   ]}

apps/website/src/routes/docs/headless/(components)/autocomplete/index.mdx

@@ -164,7 +164,8 @@ By default, the API holds available attributes of both native DOM elements and c
     },
     {
       name: 'onClick$',
-      type: 'PropFunction<() => void>',
+      type: 'function',
+      info: 'PropFunction<() => void>',
       description: 'A custom click handler',
     },
   ]}

apps/website/src/routes/docs/headless/(components)/popover/index.mdx

@@ -65,12 +65,14 @@ import { APITable } from '../../../../../components/api-table/api-table';
   propDescriptors={[
     {
       name: 'placement',
-      type: '"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"',
+      type:"enum",
+      info: '"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"',
       description: 'The side where to show the popover.',
     },
     {
       name: 'triggerEvent',
-      type: '"click" | "mouseOver"',
+      type: 'enum',
+      info: '"click" | "mouseOver"',
       description: 'Popover is opened when trigger is clicked or mouse overed.',
     },
     {
@@ -91,8 +93,11 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'onUpdate$',
-      type: 'PropFunction<(isOpen: boolean) => void>',
+      type: 'function',
+      info: 'PropFunction<(isOpen: boolean) => void>',
+
       description: 'Notify a state update to the parent.',
     },
-  ]}
+
+]}
 />

apps/website/src/routes/docs/headless/(components)/tabs/index.mdx

@@ -182,7 +182,8 @@ by default, the tabs are horizontal, but you can adjust the underlying behavior
     },
     {
       name: 'onSelectedIndexChange$',
-      type: '(index: number) => void',
+      type: 'function',
+      info: '(index: number) => void',
       description:
         'An event hook that getting notified whenever the selected index changes',
     },
@@ -200,7 +201,8 @@ by default, the tabs are horizontal, but you can adjust the underlying behavior
     },
     {
       name: 'onClick',
-      type: '(event: QwikMouseEvent) => void',
+      info: '(event: QwikMouseEvent) => void',
+      type: 'function',
       description: 'A custom click handler to wire to tab click event',
     },
     {

apps/website/src/routes/docs/headless/(components)/toggle/index.mdx

@@ -83,7 +83,8 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'onClick$',
-      type: 'PropFunction<() => void>',
+      info: 'PropFunction<() => void>',
+      type: 'function',
       description: 'A custom click handler to wire to the toggle click event',
     },
     {

apps/website/src/routes/docs/headless/(components)/tooltip/index.mdx

@@ -99,7 +99,8 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'position',
-      type: '"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"',
+      type: 'enum',
+      info: '"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"',
       description: 'Determines the position the Tooltip is rendered.',
     },
   ]}

apps/website/src/routes/docs/tailwind/(components)/accordion/index.mdx

@@ -137,7 +137,8 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'onClick$',
-      type: 'PropFunction<() => void>',
+      info: 'PropFunction<() => void>',
+      type: 'function',
       description: 'A custom click handler',
     },
   ]}