Blockquote

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6

<Blockquote cite="http://www.worldwildlife.org/who/index.html">
	<P>
		For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members
		in the United States and close to 5 million globally.
	</P>
</Blockquote>

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13

import { forwardRef, type BlockquoteHTMLAttributes, type DetailedHTMLProps } from 'react'
import { cn } from '#app/utils/tailwind-merge.ts'

/**
 * A blockquote component.
 */
const Blockquote = forwardRef<HTMLQuoteElement, DetailedHTMLProps<BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>>(({ className, ...props }, ref) => (
	<blockquote ref={ref} className={cn('blockquote', className)} {...props} />
))
Blockquote.displayName = 'Blockquote'

export { Blockquote }

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13

.blockquote {
	@apply text-fluid-md border-muted-200 my-fluid-13 text-muted-900 pl-fluid-8 max-w-prose border-l-4 font-medium italic;

	& > .p:first-of-type {
		@apply before:content-[open-quote];
	}
	& > .p {
		@apply text-muted-900 my-0 font-medium;
	}
	& > .p:last-of-type {
		@apply after:content-[close-quote];
	}
}