{"size": 687, "ext": "js", "max_stars_repo_path": "packages/site/src/components/overlay.js", "max_stars_repo_name": "socket-studio/socket-studio", "max_stars_repo_stars_event_min_datetime": "2021-04-13T10:26:05.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-13T23:55:57.000Z", "max_issues_repo_path": "packages/site/src/components/overlay.js", "max_issues_repo_name": "socket-studio/socket-studio", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "packages/site/src/components/overlay.js", "max_forks_repo_name": "socket-studio/socket-studio", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 4, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.1612903226, "max_line_length": 86, "alphanum_fraction": 0.5094614265}
/** @jsx jsx */
import { jsx } from 'theme-ui';
import Card from './card';

const Overlay = ({ state }) => {
  return (
    <Card>
      <h2>Your Overlay URL</h2>
      <p>
        Add the following URL as a browser source in your streaming software to
        enable Socket Studio sound effects.
      </p>
      <input
        type="url"
        value={`https://api.streamblitz.com/overlay?channel=${state.context.channel}`}
        disabled
        sx={{
          border: t => `1px solid ${t.colors.primary}`,
          borderRadius: 3,
          fontSize: 2,
          mb: 3,
          p: 2,
          width: '100%',
        }}
      />
    </Card>
  );
};

export default Overlay;
