Svelte Blockquote - Flowbite

<script lang="ts">
  import { Blockquote } from "flowbite-svelte";
</script>

<Blockquote size="xl">
  "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
</Blockquote>

<script lang="ts">
  import { Blockquote, P } from "flowbite-svelte";
</script>

<P class="text-body">
  Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you've designed? By running a usability test, you'll be able to see how
  users will interact with your design once it's live.
</P>
<Blockquote border bg class="my-4 p-4">
  <P size="xl" height="relaxed">
    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
  </P>
</Blockquote>
<P class="text-body">
  First of all you need to understand how Flowbite works. This library is not another framework. Rather, it is a set of components based on Tailwind CSS that you can just copy-paste from the
  documentation.
</P>

<script lang="ts">
  import { Blockquote } from "flowbite-svelte";
  import { QuoteSolid } from "flowbite-svelte-icons";
</script>

<Blockquote size="xl">
  <QuoteSolid class="text-heading h-10 w-10" />
  "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
</Blockquote>

<script lang="ts">
  import { Blockquote, P } from "flowbite-svelte";
</script>

<P class="text-body mb-3">
  Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have
  richer contextual information to rapidly respond to requests, incidents, and changes.
</P>
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-6">
  <P class="text-body mb-3">
    Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams
    have richer contextual information to rapidly respond to requests, incidents, and changes.
  </P>
  <Blockquote class="mb-3" size="xl">
    " Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application. "
  </Blockquote>
</div>
<P class="text-body mb-3">
  Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
  audit trail for every change.
</P>

<script lang="ts">
  import { Blockquote } from "flowbite-svelte";
  import { QuoteSolid } from "flowbite-svelte-icons";
</script>

<figure class="mx-auto max-w-(--breakpoint-md) text-center">
  <QuoteSolid class="text-heading mx-auto mb-3 h-12 w-12" />
  <Blockquote alignment="center" size="2xl">
    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
  </Blockquote>
  <figcaption class="mt-6 flex items-center justify-center space-x-3 rtl:space-x-reverse">
    <img class="h-6 w-6 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png" alt="Micheal Gough profile" />
    <div class="divide-default flex items-center divide-x rtl:divide-x-reverse">
      <cite class="text-heading pe-3 font-medium">Micheal Gough</cite>
      <cite class="text-body ps-3 text-sm">CEO at Google</cite>
    </div>
  </figcaption>
</figure>

<script lang="ts">
  import { Blockquote, Rating } from "flowbite-svelte";
</script>

<figure class="max-w-(--breakpoint-md)">
  <div class="text-fg-yellow mb-4 flex items-center">
    <Rating total={5} rating={4.66} size={24} />
  </div>
  <Blockquote italic={false} size="2xl">
    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
  </Blockquote>
  <figcaption class="mt-6 flex items-center space-x-3 rtl:space-x-reverse">
    <img class="h-6 w-6 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt="Bonnie Green profile" />
    <div class="divide-default flex items-center divide-x rtl:divide-x-reverse">
      <cite class="text-heading pe-3 font-medium">Bonnie Green</cite>
      <cite class="text-body ps-3 text-sm">CTO at Flowbite</cite>
    </div>
  </figcaption>
</figure>

<script lang="ts">
  import { Blockquote } from "flowbite-svelte";

  const alignments = ["left", "center", "right"] as const;
  type Alignment = (typeof alignments)[number];
  let selected = $state<Alignment>("left");
</script>

<div class="mb-6 flex flex-wrap gap-2">
  {#each alignments as alignment}
    <button
      type="button"
      onclick={() => (selected = alignment)}
      aria-pressed={selected === alignment}
      class="rounded-base border px-3 py-1 text-sm font-medium transition-colors
        {selected === alignment ? 'bg-brand border-transparent text-white' : 'bg-neutral-primary-soft text-body border-default hover:bg-neutral-secondary-medium'}"
    >
      {alignment}
    </button>
  {/each}
</div>

<Blockquote alignment={selected} size="xl">
  "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
</Blockquote>

<script lang="ts">
  import { Blockquote } from "flowbite-svelte";

  const sizes = ["sm", "base", "lg", "xl", "2xl", "3xl"] as const;
  type Size = (typeof sizes)[number];
  let selected = $state<Size>("xl");
</script>

<div class="mb-6 flex flex-wrap gap-2">
  {#each sizes as size}
    <button
      type="button"
      onclick={() => (selected = size)}
      aria-pressed={selected === size}
      class="rounded-base border px-3 py-1 text-sm font-medium transition-colors
        {selected === size ? 'bg-brand border-transparent text-white' : 'bg-neutral-primary-soft text-body border-default hover:bg-neutral-secondary-medium'}"
    >
      {size}
    </button>
  {/each}
</div>

<Blockquote size={selected}>
  "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
</Blockquote>