Quote

rx.text(
    "His famous quote, ",
    rx.text.quote("Styles come and go. Good design is a language, not a style"),
    ", elegantly sums up Massimo's philosophy of design.",
)

rx.text(
    "The guide says ",
    rx.text.quote("Simple is better than complex", cite="https://peps.python.org/pep-0020/"),
    ", and we agree.",
    size="4",
)

rx.flex(
    rx.text("Small: ", rx.text.quote("Less is more"), size="2", color_scheme="gray"),
    rx.text("Large: ", rx.text.quote("Less is more"), size="6", weight="bold"),
    rx.heading("In a heading: ", rx.text.quote("Less is more"), as_="h3", size="5"),
    direction="column",
    spacing="3",
)

class QuoteSayingState(rx.State):
    sayings: list[dict[str, str]] = [
        {"text": "Simple is better than complex", "who": "The Zen of Python"},
        {"text": "Readability counts", "who": "The Zen of Python"},
        {"text": "Now is better than never", "who": "The Zen of Python"},
    ]
    pick: int = 0

    @rx.event
    def next_saying(self):
        self.pick = (self.pick + 1) % len(self.sayings)


rx.flex(
    rx.text(
        "As ",
        QuoteSayingState.sayings[QuoteSayingState.pick]["who"],
        " puts it, ",
        rx.text.quote(QuoteSayingState.sayings[QuoteSayingState.pick]["text"]),
        ".",
        size="4",
    ),
    rx.button("Another one", on_click=QuoteSayingState.next_saying, size="1", variant="soft"),
    direction="column",
    align="start",
    spacing="3",
)

rx.card(
    rx.text(
        "Our support lead calls this the ",
        rx.text.quote("ten-minute rule"),
        ": every message gets a first reply within ten minutes. Customers say it feels ",
        rx.text.quote("like talking to a friend"),
        ".",
        size="3",
    ),
    max_width="440px",
)