How to use react95 - 8 common examples

const { themes } = require('react95');
const ResizeObserver = require('resize-observer-polyfill').default;

const ProgressRuler = require('./ProgressRuler');

const progressMargin = 10;

// based on Cutout styles from react95
const progressContainerStyle = {
  background: 'white',
  height: 13,
  margin: progressMargin,
  marginBottom: 0,
  borderStyle: 'solid',
  borderWidth: 2,
  borderTopColor: themes.default.borderDark,
  borderLeftColor: themes.default.borderDark,
  borderBottomColor: themes.default.borderLightest,
  borderRightColor: themes.default.borderLightest,
  boxSizing: 'border-box'
};

const handle = (
  <div style="{{">
    </div>

const ProgressRuler = require('./ProgressRuler');

const progressMargin = 10;

// based on Cutout styles from react95
const progressContainerStyle = {
  background: 'white',
  height: 13,
  margin: progressMargin,
  marginBottom: 0,
  borderStyle: 'solid',
  borderWidth: 2,
  borderTopColor: themes.default.borderDark,
  borderLeftColor: themes.default.borderDark,
  borderBottomColor: themes.default.borderLightest,
  borderRightColor: themes.default.borderLightest,
  boxSizing: 'border-box'
};

const handle = (
  <div style="{{">
    </div>

const React = require('react');
const { themes } = require('react95');

const style = {
  width: 0,
  borderRight: `2px solid ${themes.default.borderLightest}`,
  borderLeft: `2px solid ${themes.default.borderDark}`,
  margin: 0,
  alignSelf: 'stretch',
  marginTop: -4,
  marginBottom: -4
};

const VerticalDivider = () => {
  return <div style="{style}">;
};

module.exports = VerticalDivider;
</div>

export const Win95: React.FC = (props) => {
  return (
    <>
      
      
        
          
            <span>react95.exe</span>
            <button size="{'sm'}" style="{{">
              <span style="{{">x</span>
            </button>
          
          
            <div>{props.children}</div>

const React = require('react');
const { themes } = require('react95');

const style = {
  height: 0,
  borderBottom: `1px solid ${themes.default.borderLightest}`,
  margin: 0
};

const SimpleDivider = () => {
  return <hr style="{style}">;
};

module.exports = SimpleDivider;

const React = require('react');
const { themes } = require('react95');

const style = {
  width: 0,
  borderRight: `2px solid ${themes.default.borderLightest}`,
  borderLeft: `2px solid ${themes.default.borderDark}`,
  margin: 0,
  alignSelf: 'stretch',
  marginTop: -4,
  marginBottom: -4
};

const VerticalDivider = () => {
  return <div style="{style}">;
};

module.exports = VerticalDivider;
</div>

className,
      style,
      fullscreen,
      requestFullscreen,
      requestExitFullscreen,
      playlist,
      activeTrackIndex,
      paused,
      currentTime,
      onTogglePause,
      onBackSkip,
      onForwardSkip
    } = this.props;
    const { width } = this.state;
    return (
      

export const Win95: React.FC = observer(() => {
  return (
    <div id="os">
      <br>
      
      
        <div>
          
            Win95 app
            
              
                  🎤 Sing
                  💃🏻 Dance
                  
                  I'm Win95
              
            
          
        </div>
      
    </div>
  );