working now, layout.tsx has issues

src/app/components/ui/blockquote.tsx

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