Q

1. 1
2. 2
3. 3
4. 4

<P>
	When Dave asks HAL to open the pod bay door, HAL answers:{' '}
	<Q cite="https://www.imdb.com/title/tt0062622/quotes/?item=qt0396921&ref_=ext_shr_lnk">I'm sorry, Dave. I'm afraid I can't do that.</Q>
</P>

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 QuoteHTMLAttributes, type DetailedHTMLProps } from 'react'
import { cn } from '#app/utils/tailwind-merge.ts'

/**
 * A Q (quote) component.
 */
const Q = forwardRef<HTMLQuoteElement, DetailedHTMLProps<QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>>(({ className, ...props }, ref) => (
	<q ref={ref} className={cn('q', className)} {...props} />
))
Q.displayName = 'Q'

export { Q }

1. 1
2. 2
3. 3

.q {
	@apply font-sans italic before:content-['“'] after:content-['”'];
}