[FEATURE]: Add optional preview override to ComponentPreview
Closed this issue ยท 0 comments
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