hypnagaga/.storybook/add-ons/canvas-docs/Tab.tsx
2025-01-16 11:15:23 +00:00

32 lines
976 B
TypeScript

import React from 'react';
import { useParameter, useStorybookState } from '@storybook/manager-api';
import { AddonPanel } from '@storybook/components';
import { PARAM_KEY } from './constants.ts';
import * as Blocks from '@storybook/blocks';
interface PanelProps {
active: boolean | undefined;
}
const Tab: React.FC<PanelProps> = (props) => {
const { storyId } = useStorybookState(); // Get the current story ID
const markdownContent = useParameter<Record<string, string>>(PARAM_KEY, {});
// Fetch Markdown content specific to the current story
const content =
markdownContent[storyId] || 'No documentation provided for this story.';
console.log('PROPS', props);
return (
<AddonPanel active={!!props.active}>
<Blocks.Wrapper>
<div style={{ padding: '15px' }} className="sbdocs sbdocs-content">
<Blocks.Markdown>{content}</Blocks.Markdown>
</div>
</Blocks.Wrapper>
</AddonPanel>
);
};
export default Tab;