Pagination

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class PaginationGlance(Component):
    template = '<c-CPagination c-pages="24" c-page="8" href="?page={page}" />'


preview = PaginationGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class LinkPagination(Component):
    template = '<c-CPagination c-pages="12" c-page="4" href="/field-notes?page={page}" />'


preview = LinkPagination()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ControlledPagination(Component):
    template = """
      <section x-data="{ page: 3 }">
        <p>Plate <strong x-text="page"></strong> of 18</p>
        <c-CPagination
          c-pages="18"
          c-page="3"
          $c-props="{ page, onPageChange: (next) => page = next }"
        />
      </section>
    """


preview = ControlledPagination()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class PaginationRanges(Component):
    template = """
      <c-CStack gap="md">
        <c-CPagination c-pages="100" c-page="50" c-siblings="0" c-boundaries="1" />
        <c-CPagination c-pages="100" c-page="50" c-siblings="2" c-boundaries="2" />
      </c-CStack>
    """


preview = PaginationRanges()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class PaginationControls(Component):
    template = """
      <c-CStack gap="md">
        <c-CPagination c-pages="14" c-page="7" c-show_edges="True" />
        <c-CPagination c-pages="14" c-page="7" c-show_controls="False" />
      </c-CStack>
    """


preview = PaginationControls()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class PaginationPresentation(Component):
    template = """
      <c-CStack gap="md">
        <c-CPagination c-pages="8" c-page="3" variant="soft" size="sm" />
        <c-CPagination c-pages="8" c-page="3" variant="outline" />
        <c-CPagination c-pages="8" c-page="3" variant="plain" size="lg" />
      </c-CStack>
    """


preview = PaginationPresentation()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class PaginationCustomization(Component):
    template = '<c-CPagination class_="lunar-pages" c-pages="9" c-page="5" />'
    css = """
      :where(.lunar-pages) {
        --cui-pagination-current-background: light-dark(#6d28d9, #c4b5fd);
        --cui-pagination-current-foreground: light-dark(white, #2e1065);
        --cui-pagination-radius: 999px;
      }
    """


preview = PaginationCustomization()
preview  # noqa: B018