-
Notifications
You must be signed in to change notification settings - Fork 247
/
Blockquote.svelte
51 lines (48 loc) · 1.68 KB
/
Blockquote.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script lang="ts">
import { twMerge } from 'tailwind-merge';
import type { BlockQuoteType } from '../types';
export let border: boolean = false;
export let italic: boolean = true;
export let borderClass: string = 'border-s-4 border-gray-300 dark:border-gray-500';
export let bgClass: string = 'bg-gray-50 dark:bg-gray-800';
export let bg: boolean = false;
export let baseClass: string = 'font-semibold text-gray-900 dark:text-white';
export let alignment: 'left' | 'center' | 'right' = 'left';
export let size: BlockQuoteType = 'lg';
let alignmentClasses = {
left: 'text-left',
center: 'text-center',
right: 'text-right'
};
const sizes = {
xs: 'text-xs',
sm: 'text-sm',
base: 'text-base',
lg: 'text-lg',
xl: 'text-xl',
'2xl': 'text-2xl',
'3xl': 'text-3xl',
'4xl': 'text-4xl',
'5xl': 'text-5xl',
'6xl': 'text-6xl',
'7xl': 'text-7xl',
'8xl': 'text-8xl',
'9xl': 'text-9xl'
};
</script>
<blockquote {...$$restProps} class={twMerge(baseClass, alignmentClasses[alignment], sizes[size], bg && bgClass, border && borderClass, italic && 'italic', $$props.class)}>
<slot />
</blockquote>
<!--
@component
[Go to docs](https://flowbite-svelte.com/)
## Props
@prop export let border: boolean = false;
@prop export let italic: boolean = true;
@prop export let borderClass: string = 'border-s-4 border-gray-300 dark:border-gray-500';
@prop export let bgClass: string = 'bg-gray-50 dark:bg-gray-800';
@prop export let bg: boolean = false;
@prop export let baseClass: string = 'font-semibold text-gray-900 dark:text-white';
@prop export let alignment: 'left' | 'center' | 'right' = 'left';
@prop export let size: BlockQuoteType = 'lg';
-->