<template>
    <div>
        <p>
            In order to use this content area, you can overwrite the component using the global
            <code>window.toubizWidgetComponentReplacement</code> object to replace the component
            with your own component. This must happen <strong>before</strong> the widget javascript
            is being loaded.
        </p>

        <pre class="p-2 bg-gray-800 text-gray-200 text-sm"><code>
import registry from 'Packages/Plugins/Newland.ToubizWidgetRendering/Resources/Private/Scripts/component-registry';
import YourComponent from './your-component.vue';

registry.replaceComponent('{{ name }}', YourComponent);
        </code></pre>

        <p>
            Note: Content Areas are not subject to server side rendering. As such, they will only ever
            be rendered on the client.
        </p>
    </div>
</template>

<script>
export default {

    name: 'TbWContentAreaUsageInstructions',

    props: {
        name: { type: String, required: true },
    },

};
</script>
