Blockquote component

docs/.vitepress/config.mts

@@ -85,10 +85,12 @@ 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' },
     { text: 'Link', link: '/components/link' }
+
   ]
 }
 

docs/components/blockquote.md

@@ -0,0 +1,87 @@
+<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. Each example will demonstrate different ways to customize the blockquote using props like `size`, `align`, `type`, and `cite`.
+
+## Default blockquote
+
+Use this example to quote an external source inside a `<FwbBlockquote>` component.
+
+<FwbBlockquoteExample/>
+
+```vue
+<FwbBlockquote>
+    "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."
+</FwbBlockquote>
+```
+
+## Solid background
+This example can be used as an alternative style to the default style by applying a solid background color with `type="solid"`.
+
+<FwbBlockquoteSolidExample />
+
+```vue
+<FwbBlockquote type="solid">
+    "Flowbite is just awesome.Perfect choice for your next SaaS application."
+</FwbBlockquote>
+```
+
+## Alignment
+
+From the examples below, select the blockquote text alignment based on the `align`prop, starting from the left and moving from middle to right.
+
+<FwbBlockquoteAlignExample align="left" />
+<hr />
+<br/>
+<FwbBlockquoteAlignExample align="center" />
+<hr />
+<br/>
+<FwbBlockquoteAlignExample align="right" />
+
+```vue
+<FwbBlockquote align="left">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application."
+</FwbBlockquote>
+<FwbBlockquote align="center">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application."
+</FwbBlockquote>
+<FwbBlockquote align="right">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application."
+</FwbBlockquote>
+```
+
+## Size
+
+Choose from multiple sizes with the `size` prop for the default blockquote component based on surrounding elements and dimensions.
+
+<FwbBlockquoteSizeExample size="sm" />
+<hr />
+<br/>
+<FwbBlockquoteSizeExample size="md" />
+<hr />
+<br/>
+<FwbBlockquoteSizeExample size="lg" />
+
+```vue
+<FwbBlockquote size="sm">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application."
+</FwbBlockquote>
+<FwbBlockquote size="md">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application."
+</FwbBlockquote>
+<FwbBlockquote size="lg">
+    "Flowbite is just awesome. Perfect choice for your next SaaS application."
+</FwbBlockquote>
+```

docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="vp-raw flex">
+        <FwbBlockquote :align="align">
+            "Flowbite is just awesome. Perfect choice for your next SaaS application."
+        </FwbBlockquote>
+    </div>
+</template>
+
+<script setup>
+import { FwbBlockquote } from '../../../../src/index'
+
+const props = defineProps({
+    align: {
+        type: String,
+        default: 'left'
+    }
+})
+</script>

docs/components/typography/blockquote/FwbBlockquoteExample.vue

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

docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="vp-raw flex">
+        <FwbBlockquote :size="size">
+            "Flowbite is just awesome. Perfect choice for your next SaaS application."
+        </FwbBlockquote>
+    </div>
+</template>
+
+<script setup>
+import { FwbBlockquote } from '../../../../src/index'
+
+const props = defineProps({
+    size: {
+        type: String,
+        default: 'md'
+    }
+})
+
+</script>

docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue

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

src/components/FwbBlockquote/FwbBlockquote.vue

@@ -0,0 +1,29 @@
+<template>
+    <blockquote :class="blockquoteClasses" :cite="cite">
+        <slot></slot>
+    </blockquote>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+import { useBlockquoteClasses } from './composables/useBlockquoteClasses'
+import type { BlockquoteSize, BlockquoteAlign, BlockquoteType } from './types'
+
+interface BlockquoteProps {
+    type?: BlockquoteType;
+    size?: BlockquoteSize;
+    align?: BlockquoteAlign;
+    cite?: string;
+}
+
+const props = withDefaults(defineProps<BlockquoteProps>(), {
+    type: 'default',
+    size: 'md',
+    align: 'left',
+    cite: '',
+})
+
+const {
+    blockquoteClasses
+} = useBlockquoteClasses(props)
+</script>

src/components/FwbBlockquote/composables/useBlockquoteClasses.ts

@@ -0,0 +1,40 @@
+import type { BlockquoteSize, BlockquoteAlign, BlockquoteType } from "../types";
+import { computed, ref, useAttrs } from "vue";
+import { twMerge } from "tailwind-merge";
+
+const defaultBlockquoteClasses = "font-semibold italic text-gray-900 dark:text-white";
+const blockquoteAlignClasses: Record<BlockquoteAlign, string> = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+};
+const blockquoteSizeClasses: Record<BlockquoteSize, string> = {
+  sm: "text-lg",
+  md: "text-xl",
+  lg: "text-2xl",
+};
+
+export type UseBlockquoteClassesProps = {
+  size: BlockquoteSize;
+  align: BlockquoteAlign;
+  type: BlockquoteType;
+};
+
+export function useBlockquoteClasses(
+  props: UseBlockquoteClassesProps
+) {
+  const attrs = useAttrs();
+  const blockquoteClasses = computed(() => {
+    return twMerge(
+      blockquoteSizeClasses[props.size],
+      blockquoteAlignClasses[props.align],
+      props.type === "solid" ? "bg-gray-100 dark:bg-gray-800 border-l-4 border-gray-300 p-4 dark:border-gray-500" : "",
+      defaultBlockquoteClasses,
+      attrs.class as string
+    );
+  });
+
+  return {
+    blockquoteClasses,
+  };
+}

src/components/FwbBlockquote/types.ts

@@ -0,0 +1,3 @@
+export type BlockquoteType = 'default' | 'solid'
+export type BlockquoteAlign = 'left' | 'center' | 'right'
+export type BlockquoteSize = 'sm' | 'md' | 'lg'

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/FwbBlockquote/FwbBlockquote.vue'
 
 // utilities
 export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'