Function ComponentPreviewUsingCn

src/components/code/ComponentPreview.tsx:208–367

({
  path,
  className,
  align = 'center',
  preview,
  usingFramer,
  ...props
}: Omit<ComponentPreviewProps, 'usingCn'>)

}

function ComponentPreviewUsingCn({
  path,
  className,
  align = 'center',
  preview,
  usingFramer,
  ...props
}: Omit<ComponentPreviewProps, 'usingCn'>) {
  const name = formatName(path)
  const nameWithoutSpace = name.replace(/\s/g, '')

  const Preview = React.useMemo(() => {
    if (preview) return preview

    try {
      const Component = require(`../../showcase/${path}.tsx`).default
      return <Component />
    } catch (error) {
      console.error(`Failed to load component ${path}:`, error)
      return (
        <p className="text-muted-foreground text-sm">
          Component{' '}
          <RawCode className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
            {path}
          </RawCode>{' '}
          not found.
        </p>
      )
    }
  }, [path, preview])

  const codeString = React.useMemo(() => {
    try {
      const code = require(`!!raw-loader!../../showcase/${path}.tsx`).default
      const filteredCode = code.replace(/'use client'\n/, '')
      return filteredCode
    } catch (error) {
      console.error(`Failed to load code for component ${path}:`, error)
      return null
    }
  }, [path])
  const cnString = React.useMemo(() => {
    try {
      return require(`!!raw-loader!../../lib/utils.ts`).default
    } catch (error) {
      console.error(`Failed to load code for the cn function:`, error)
      return null
    }
  }, [])

  return (
    <div
      className={cn(
        'group relative my-10 flex w-full max-w-5xl flex-col space-y-2',
        className,
      )}
      {...props}
    >