docs(headless): add pagination page

Author: fabiobiondi

apps/website/src/_state/component-statuses.ts

@@ -43,6 +43,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Accordion: ComponentStatus.Beta,
     Carousel: ComponentStatus.Planned,
     Combobox: ComponentStatus.Beta,
+    Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Draft,
     Modal: ComponentStatus.Beta,
     Select: ComponentStatus.Draft,

apps/website/src/routes/docs/headless/(components)/pagination/index.tsx renamed to apps/website/src/routes/docs/headless/(components)/pagination/_index.tsx

@@ -0,0 +1,31 @@
+import { JSXNode, component$ } from '@builder.io/qwik';
+import { PreviewCodeExampleTabs } from '../../../_components/preview-code-example/preview-code-example-tabs';
+
+import Basic from './examples/basic';
+import basicCode from './examples/basic?raw';
+
+export type Example = {
+  component: JSXNode;
+  code: string;
+  cssClasses?: string;
+};
+
+export const examples: Record<string, Example> = {
+  basic: {
+    component: <Basic />,
+    code: basicCode,
+  },
+};
+
+export type ShowExampleProps = {
+  example: string;
+};
+
+export const ShowExample = component$(({ example }: ShowExampleProps) => {
+  const { component, code } = examples[example];
+  return (
+    <PreviewCodeExampleTabs code={code}>
+      <div q:slot="actualComponent">{component}</div>
+    </PreviewCodeExampleTabs>
+  );
+});

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

@@ -0,0 +1,8 @@
+import { component$, useSignal, type QwikIntrinsicElements } from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+
+  return <>ciao giorgio</>;
+});

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

@@ -0,0 +1,6 @@
+export { statusByComponent } from '../../../../../_state/component-statuses';
+export { APITable } from '../../../_components/api-table/api-table';
+export { KeyboardInteractionTable } from '../../../_components/keyboard-interaction-table/keyboard-interaction-table';
+export { StatusBanner } from '../../../_components/status-banner/status-banner';
+export { AnatomyTable } from '../../../_components/anatomy-table/anatomy-table';
+export * from './examples';

apps/website/src/routes/docs/headless/(components)/pagination/exports.ts

@@ -0,0 +1,25 @@
+---
+title: Qwik UI | Modal
+---
+import ImgTestImage from '/public/images/test-image.png?jsx';
+
+import {
+  KeyboardInteractionTable,
+  APITable,
+  AnatomyTable,
+  StatusBanner,
+  statusByComponent,
+  ShowExample,
+  BackdropCss,
+  BuildingBlocksSnip,
+  PageLoadSnip,
+  AnimationSnip
+} from './exports';
+
+import testImage from '../../../../../../public/images/test-image.png'
+
+<StatusBanner status={statusByComponent.headless.Modal}/>
+
+# Pagination
+
+<ShowExample example="basic" />

apps/website/src/routes/docs/headless/(components)/pagination/index.css

@@ -11,6 +11,7 @@
 - [Accordion](/docs/headless/accordion)
 - [Combobox](/docs/headless/combobox)
 - [Modal](/docs/headless/modal)
+- [Pagination](/docs/headless/pagination)
 - [Popover](/docs/headless/popover)
 - [Select](/docs/headless/select)
 - [Separator](/docs/headless/separator)