main

src/components/ui/typography/blockquote.tsx

@@ -0,0 +1,27 @@
+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;