{"size": 1174, "ext": "js", "max_stars_repo_path": "website/docs/components/feature-popover/components/playground.js", "max_stars_repo_name": "YoMama84/intergalactic", "max_stars_repo_stars_event_min_datetime": "2021-01-21T16:32:07.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-16T21:51:43.000Z", "max_issues_repo_path": "website/docs/components/feature-popover/components/playground.js", "max_issues_repo_name": "YoMama84/intergalactic", "max_issues_repo_issues_event_min_datetime": "2021-02-03T15:15:40.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T10:06:02.000Z", "max_forks_repo_path": "website/docs/components/feature-popover/components/playground.js", "max_forks_repo_name": "YoMama84/intergalactic", "max_forks_repo_forks_event_min_datetime": "2021-02-03T13:13:43.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-20T18:02:23.000Z"}
{"max_stars_count": 71, "max_issues_count": 40, "max_forks_count": 20, "avg_line_length": 30.8947368421, "max_line_length": 100, "alphanum_fraction": 0.6839863714}
import React from 'react';

import Button from '@semcore/button';
import FeaturePopover from '@semcore/feature-popover';
import PlaygroundGeneration from 'components/PlaygroundGeneration';

export default PlaygroundGeneration((createGroupWidgets) => {
  const { bool, onChange } = createGroupWidgets('FeaturePopover');

  const closeIcon = bool({
    key: 'icon',
    defaultValue: true,
    label: 'Show icon close',
  });

  const visible = bool({
    key: 'visible',
    defaultValue: true,
    label: 'Visible',
  });

  return (
    <FeaturePopover visible={visible} onVisibleChange={(v) => onChange('visible', v)}>
      <FeaturePopover.Trigger>
        <Button>
          Open Popover
          {visible && <FeaturePopover.Spot />}
        </Button>
      </FeaturePopover.Trigger>
      <FeaturePopover.Popper closeIcon={closeIcon} wMax={350}>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at, atque eveniet
        excepturi fugit illum perspiciatis praesentium sequi totam vel. Consequatur delectus dolorem
        eos itaque numquam officia reprehenderit temporibus ut!
      </FeaturePopover.Popper>
    </FeaturePopover>
  );
});
