react-smartphone/dist/components/Smartphone.js


var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import styled from 'styled-components';
import Case from './Case';
import UpperSpeaker from './UpperSpeaker';
import Screen from './Screen';
import HomeButton from './HomeButton';
import Camera from './Camera';
import VolumeButtons from './VolumeButtons';
import LockButton from './LockButton';
import PhoneContent from './PhoneContent';
import Lockscreen from './Lockscreen';
var Phone = function (props) {
    var height = props.height, width = props.width, caseColor = props.caseColor, detailsColor = props.detailsColor, cameraColor = props.cameraColor, shadowColor = props.shadowColor, volumeButtonsColor = props.volumeButtonsColor, text = props.text, children = props.children, content = props.content, screenColor = props.screenColor, onHomeButtonPress = props.onHomeButtonPress, onVolumeButtonPress = props.onVolumeButtonPress;
    var component = children
        ? children
        : content
            ? content
            : renderDefault(text);
    var _a = React.useState(false), lockscreen = _a[0], toggleLockScreen = _a[1];
    return (_jsxs(Case, __assign({ height: height, width: width, shadowColor: shadowColor, color: caseColor }, { children: [_jsx(UpperSpeaker, { color: detailsColor }, void 0),
            _jsx(Camera, { color: cameraColor, width: width }, void 0),
            _jsx(VolumeButtons, { callback: onVolumeButtonPress, color: volumeButtonsColor }, void 0),
            _jsx(LockButton, { onClick: function () { return toggleLockScreen(!lockscreen); } }, void 0),
            _jsxs(Screen, __assign({ color: screenColor, height: height, width: width }, { children: [_jsx(Lockscreen, { status: lockscreen }, void 0),
                    _jsx(PhoneContent, { children: component }, void 0)] }), void 0),
            _jsx(HomeButton, { onClick: onHomeButtonPress, color: detailsColor, shadowColor: shadowColor }, void 0)] }), void 0));
};
export default Phone;
var renderDefault = function (text) { return (_jsx(Title, { children: text || 'Thanks for using react-phone.' }, void 0)); };
var Title = styled.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: white;\n  padding-top: 20vmin;\n  font-weight: 700;\n  height: 100%;\n  width: 100%;\n  text-align: center;\n"], ["\n  color: white;\n  padding-top: 20vmin;\n  font-weight: 700;\n  height: 100%;\n  width: 100%;\n  text-align: center;\n"])));
var templateObject_1;
//# sourceMappingURL=Smartphone.js.map