ballistic-builder/src/app/components/ui/blockquote.tsx

import { Blockquote as ChakraBlockquote } from "@chakra-ui/react"
import * as React from "react"

export interface BlockquoteProps extends ChakraBlockquote.RootProps {
  cite?: React.ReactNode
  citeUrl?: string
  icon?: React.ReactNode
  showDash?: boolean
}

export const Blockquote = React.forwardRef<HTMLDivElement, BlockquoteProps>(
  function Blockquote(props, ref) {
    const { children, cite, citeUrl, showDash, icon, ...rest } = props

    return (
      <ChakraBlockquote.Root ref={ref} {...rest}>
        {icon}
        <ChakraBlockquote.Content cite={citeUrl}>
          {children}
        </ChakraBlockquote.Content>
        {cite && (
          <ChakraBlockquote.Caption>
            {showDash ? <>&mdash;</> : null} <cite>{cite}</cite>
          </ChakraBlockquote.Caption>
        )}
      </ChakraBlockquote.Root>
    )
  },
)

export const BlockquoteIcon = ChakraBlockquote.Icon