Blockquote component

docs/.vitepress/config.mts

@@ -85,6 +85,7 @@ function getUtils() {
 
 function getTypography() {
   return [
+    { text: "Blockquote", link: '/components/blockquote' },
     { text: 'Heading', link: '/components/heading' },
     { text: 'Paragraph', link: '/components/paragraph' },
     { text: 'Image', link: '/components/image' },

docs/components/blockquote.md

@@ -0,0 +1,73 @@
+<script setup>
+import FwbBlockquoteExample from './typography/blockquote/FwbBlockquoteExample.vue'
+import FwbBlockquoteSolidExample from './typography/blockquote/FwbBlockquoteSolidExample.vue'
+import FwbBlockquoteAlignExample from './typography/blockquote/FwbBlockquoteAlignExample.vue'
+import FwbBlockquoteSizeExample from './typography/blockquote/FwbBlockquoteSizeExample.vue'
+</script>
+
+# Vue Blockquote - Flowbite
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/typography/blockquote/](https://flowbite.com/docs/typography/blockquote/)
+:::
+
+## Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts.
+
+## Default blockquote
+
+Use this example to quote an external source inside a `<fwb-blockquote>` component.
+
+<fwb-blockquote-example/>
+
+```vue
+<fwb-blockquote>
+    "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."
+</fwb-blockquote>
+```
+
+## Solid background
+This example can be used as an alternative style to the default style by applying a solid background color with `type="solid"`.
+
+<fwb-blockquote-solid-example />
+
+```vue
+<fwb-blockquote type="solid">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+```
+
+## Alignment
+
+Choose from the following examples the blockquote text alignment from starting from left, center to right based on the utility classes from Tailwind CSS.
+
+<fwb-blockquote-align-example />
+```vue
+<fwb-blockquote class="text-left">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+<fwb-blockquote class="text-center">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+<fwb-blockquote class="text-right">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+```
+
+## Size
+
+Choose from one of the multiple sizes for the default blockquote component based on the surrounding elements and sizes.
+
+<fwb-blockquote-size-example />
+```vue
+<fwb-blockquote class="text-lg">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+<fwb-blockquote class="text-xl">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+<fwb-blockquote class="text-2xl">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+</fwb-blockquote>
+```

docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue

@@ -0,0 +1,21 @@
+<template>
+<div class="vp-raw flex flex-col gap-6">
+    <fwb-blockquote class="text-left">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+        application."
+    </fwb-blockquote>
+    <fwb-blockquote class="text-center">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+        application."
+    </fwb-blockquote>
+    <fwb-blockquote class="text-right">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+        application."
+    </fwb-blockquote>
+</div>
+</template>
+
+<script setup>
+import { FwbBlockquote } from '../../../../src/index'
+
+</script>

docs/components/typography/blockquote/FwbBlockquoteExample.vue

@@ -0,0 +1,12 @@
+<template>
+<div class="vp-raw">
+    <fwb-blockquote>
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+    </fwb-blockquote>
+</div>
+</template>
+
+<script setup>
+import { FwbBlockquote } from '../../../../src/index'
+
+</script>

docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue

@@ -0,0 +1,18 @@
+<template>
+<div class="vp-raw flex flex-col gap-6">
+    <fwb-blockquote class="text-lg">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+    </fwb-blockquote>
+    <fwb-blockquote class="text-xl">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+    </fwb-blockquote>
+    <fwb-blockquote class="text-2xl">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+    </fwb-blockquote>
+</div>
+</template>
+
+<script setup>
+import { FwbBlockquote } from '../../../../src/index'
+
+</script>

docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue

@@ -0,0 +1,12 @@
+<template>
+<div class="vp-raw flex">
+    <fwb-blockquote type="solid">
+        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+    </fwb-blockquote>
+</div>
+</template>
+
+<script setup>
+import { FwbBlockquote } from '../../../../src/index'
+
+</script>

src/components/Typography/FwbBlockquote.vue

@@ -0,0 +1,34 @@
+<template>
+    <blockquote :class="blockquoteClasses" :cite="cite">
+        <slot></slot>
+    </blockquote>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useMergeClasses } from '@/composables/useMergeClasses'
+
+type BlockquoteType = 'default' | 'solid'
+
+interface BlockquoteProps {
+  type?: BlockquoteType;
+  cite?: string;
+  class?: string;
+}
+
+const props = withDefaults(defineProps<BlockquoteProps>(), {
+  type: 'default',
+  cite: '',
+  class: '',
+})
+
+const defaultBlockquoteClasses = 'font-semibold text-lg italic text-gray-900 dark:text-white'
+const solidBlockquoteClasses = 'bg-gray-100 dark:bg-gray-800 border-l-4 border-gray-300 p-4 dark:border-gray-500'
+
+const blockquoteClasses = computed(() => useMergeClasses([
+  defaultBlockquoteClasses,
+  props.type === 'solid' ? solidBlockquoteClasses : '',
+  props.class,
+]))
+
+</script>

src/index.ts

@@ -72,6 +72,7 @@ export { default as FwbA } from './components/Typography/FwbA.vue'
 export { default as FwbHeading } from './components/Typography/FwbHeading.vue'
 export { default as FwbImg } from './components/Typography/FwbImg.vue'
 export { default as FwbP } from './components/Typography/FwbP.vue'
+export { default as FwbBlockquote } from './components/Typography/FwbBlockquote.vue'
 
 // utilities
 export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'