---
to: component.preview.tsx
---
// This file is the Editor preview entry point for your component.
// Override or extend it when you need Editor-specific behavior or rendering
// (e.g. mock data, Editor-only interactions, or a different visual state).

import React from 'react';
import type { ComponentProps, FC } from 'react';
import {
  withDefaults,
  withFallbackPlaceholder,
} from '@wix/react-component-utils';
import Component from './<%- config.kebabCaseName -%>';
import { defaultProps } from './<%- config.kebabCaseName -%>.props';

const <%- config.pascalCaseName -%>Preview: FC<ComponentProps<typeof Component>> = (props) => {
  return <Component {...props} />;
};

const <%- config.pascalCaseName -%>PreviewWithFallback = withFallbackPlaceholder(<%- config.pascalCaseName -%>Preview, {
  requiredDataFields: ['title', 'description'],
  rootClassName: '<%- config.kebabCaseName -%>',
});

export default withDefaults(
  <%- config.pascalCaseName -%>PreviewWithFallback,
  defaultProps
);