---
to: plugin.tsx
---
<%_ const hasImportData = !!importData _%>
import React, { type FC } from 'react';
<%_ if (hasImportData) { _%>
import type { <%- importData.namedImport -%> } from '<%- importData.packageName -%>/<%- importData.subpathImport -%>'; 
<%_ } _%>
import {
  WixDesignSystemProvider,
  Card,
  Text,
  TextButton,
} from '@wix/design-system';
import '@wix/design-system/styles.global.css';

<%_ if (hasImportData) { _%>
type Props = <%- importData.namedImport -%>.<%- importData.propsName -%>.<%- importData.propsNamespace -%>;

const Plugin: FC<Props> = (props) => {
<%_ } else { _%>
const Plugin: FC = () => {
<%_ } _%>
  return (
    <WixDesignSystemProvider features={{ newColorsBranding: true }}>
      <Card>
        <Card.Header title="Dashboard Plugin" />
        <Card.Divider />
        <Card.Content size="medium">
          <Text>
            This dashboard plugin was generated with Wix CLI. Customize it according to your logic. To learn more, read our{' '}
            <TextButton as="a" href="https://wix.to/dFFuEki" target="_blank">
              documentation
            </TextButton>
            .
          </Text>
        </Card.Content>
      </Card>
    </WixDesignSystemProvider>
  );
};

export default Plugin;
