import { Meta, Story, Canvas, Controls, Markdown } from '@storybook/blocks';
import * as Stories from './story';
import Code from './code?raw';

<Meta of={Stories} />

# Example: Card with Custom Children Rendering

This example demonstrates how to use a card component with a custom `onSetSize` method. The `onSetSize` method overrides the default behavior of the `MeasuredNode` component.

When using a `measured node`, it is recommended **not** to define `width` and `height` directly in the node's data. This ensures that the node's size is dynamically calculated based on its content.

### Demo
Below is a live demo of the card component in action:

<Canvas of={Stories.Default} />

### Code
Here is the code used in this example:

<Markdown>
{`\`\`\`tsx
${Code}
\`\`\``}
</Markdown>