[FEATURE]: Add optional preview override to ComponentPreview

Feature Description 📝

I would love the ability to override the preview for the ComponentPreview component.

The default preview works great for standalone components (ex: buttons, toggles, etc.).

But, for non-standalone components (ex: cards, containers, or effects) that are dependent on children to display properly, it would be beneficial to provide a preview through the ComponentPreview component.

Motivation 🌟

in src/showcase/ui-group/EffectCards.tsx I specify a custom preview that is displayed in the card. this is because the BorderGlow effect is just a container that accepts children to be easily used for people taking the code.

{
  id: 2,
  title: 'Border Glow',
  preview: (
    <div className="flex flex-col gap-2">
      <BorderGlow>Border Glow</BorderGlow>
      <BorderGlow>Border Glow</BorderGlow>
    </div>
  ),
  link: '/docs/effects/border-glow',
},

This also means that when ComponentPreview loads the component it displays as a small empty oval which is incorrect. But, if we add this optional preview then I can reference it in the docs like this:

<ComponentPreview
  preview={
    <div className="flex flex-col gap-2">
      <BorderGlow>Border Glow</BorderGlow>
      <BorderGlow>Border Glow</BorderGlow>
    </div>
  }
  path="effects/BorderGlow"
/>

Expected Behavior 🤔

interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
  path: string
  align?: 'center' | 'start' | 'end'
  preview?: React.ReactNode
}

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])

Additional Information ℹ️

No response

SyntaxUI / syntaxui