Function ComponentPreview

src/components/code/ComponentPreview.tsx:49–206

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

 */

export function ComponentPreview({
  path,
  className,
  align = 'center',
  preview,
  usingFramer,
  usingCn,
  ...props
}: ComponentPreviewProps) {
  const name = formatName(path)

  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 [selectedTab, setSelectedTab] = React.useState('preview')

  if (usingCn) {
    return (
      <ComponentPreviewUsingCn
        path={path}
        className={className}
        align={align}
        preview={preview}
        usingFramer={usingFramer}
        {...props}
      />
    )
  }
  return (
    <div