@wener/console
Version:
Base console UI toolkit
242 lines (241 loc) • 13.5 kB
JavaScript
function _array_like_to_array(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
return arr2;
}
function _array_with_holes(arr) {
if (Array.isArray(arr)) return arr;
}
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _iterable_to_array_limit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally{
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally{
if (_d) throw _e;
}
}
return _arr;
}
function _non_iterable_rest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _object_spread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function _object_without_properties(source, excluded) {
if (source == null) return {};
var target = {}, sourceKeys, key, i;
if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
sourceKeys = Reflect.ownKeys(source);
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
return target;
}
target = _object_without_properties_loose(source, excluded);
if (Object.getOwnPropertySymbols) {
sourceKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _object_without_properties_loose(source, excluded) {
if (source == null) return {};
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
return target;
}
function _sliced_to_array(arr, i) {
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _tagged_template_literal(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
}
function _unsupported_iterable_to_array(o, minLen) {
if (!o) return;
if (typeof o === "string") return _array_like_to_array(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
function _templateObject() {
var data = _tagged_template_literal([
"\n /*========== Colors ==========*/\n --hue-color: 240;\n\n --first-color: hsl(var(--hue-color), 53%, 49%);\n --title-color: hsl(var(--hue-color), 53%, 15%);\n --text-color: hsl(var(--hue-color), 12%, 35%);\n --text-color-light: hsl(var(--hue-color), 12%, 65%);\n --white-color: #fff;\n --body-color: hsl(var(--hue-color), 24%, 94%);\n\n /*========== Font and typography ==========*/\n --body-font: 'Poppins', sans-serif;\n --biggest-font-size: 3rem;\n --small-font-size: 0.813rem;\n --smaller-font-size: 0.75rem;\n --tiny-font-size: 0.625rem;\n\n /*========== Font weight ==========*/\n --font-medium: 500;\n\n /*========== Margenes Bottom ==========*/\n --mb-0-25: 0.25rem;\n --mb-1: 1rem;\n --mb-1-5: 1.5rem;\n --mb-2-5: 2.5rem;\n\n /*========== z index ==========*/\n --z-normal: 1;\n --z-tooltip: 10;\n\n /*========== Button Dark/Light ==========*/\n\n .clock__theme {\n position: absolute;\n top: -1rem;\n right: -1rem;\n display: flex;\n padding: 0.25rem;\n border-radius: 50%;\n box-shadow:\n inset -1px -1px 1px hsla(var(--hue-color), 0%, 100%, 1),\n inset 1px 1px 1px hsla(var(--hue-color), 30%, 86%, 1);\n color: var(--first-color);\n cursor: pointer;\n transition: 0.4s; // For dark mode animation\n }\n\n /*========== Box shadow Dark theme ==========*/\n\n .dark-theme .clock__circle {\n box-shadow:\n 6px 6px 16px hsla(var(--hue-color), 8%, 12%, 1),\n -6px -6px 16px hsla(var(--hue-color), 8%, 20%, 1),\n inset -6px -6px 16px hsla(var(--hue-color), 8%, 20%, 1),\n inset 6px 6px 12px hsla(var(--hue-color), 8%, 12%, 1);\n }\n\n .dark-theme .clock__theme {\n box-shadow:\n inset -1px -1px 1px hsla(var(--hue-color), 8%, 20%, 1),\n inset 1px 1px 1px hsla(var(--hue-color), 8%, 12%, 1);\n }\n\n /*=============== REUSABLE CSS CLASSES ===============*/\n\n .container {\n max-width: 968px;\n margin-left: var(--mb-1);\n margin-right: var(--mb-1);\n }\n\n .grid {\n display: grid;\n }\n\n /*=============== CLOCK ===============*/\n\n .clock__container {\n grid-template-rows: 1fr max-content;\n }\n\n .clock__circle {\n position: relative;\n width: 200px;\n height: 200px;\n box-shadow:\n -6px -6px 16px var(--white-color),\n 6px 6px 16px hsla(var(--hue-color), 30%, 86%, 1),\n inset 6px 6px 16px hsla(var(--hue-color), 30%, 86%, 1),\n inset -6px -6px 16px var(--white-color);\n border-radius: 50%;\n justify-self: center;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.4s; // For dark mode animation\n }\n\n .clock__content {\n align-self: center;\n row-gap: 3.5rem;\n }\n\n .clock__twelve,\n .clock__three,\n .clock__six,\n .clock__nine {\n position: absolute;\n width: 1rem;\n height: 1px;\n background-color: var(--text-color-light);\n }\n\n .clock__twelve,\n .clock__six {\n transform: translateX(-50%) rotate(90deg);\n }\n\n .clock__twelve {\n top: 1.25rem;\n left: 50%;\n }\n\n .clock__three {\n top: 50%;\n right: 0.75rem;\n }\n\n .clock__six {\n bottom: 1.25rem;\n left: 50%;\n }\n\n .clock__nine {\n left: 0.75rem;\n top: 50%;\n }\n\n .clock__rounder {\n width: 0.75rem;\n height: 0.75rem;\n background-color: var(--first-color);\n border-radius: 50%;\n border: 2px solid var(--body-color);\n z-index: var(--z-tooltip);\n }\n\n .clock__hour,\n .clock__minutes,\n .clock__seconds {\n position: absolute;\n display: flex;\n justify-content: center;\n }\n\n .clock__hour {\n width: 105px;\n height: 105px;\n }\n\n .clock__hour::before {\n content: '';\n position: absolute;\n background-color: var(--text-color);\n width: 0.25rem;\n height: 3rem;\n border-radius: 0.75rem;\n z-index: var(--z-normal);\n }\n\n .clock__minutes {\n width: 136px;\n height: 136px;\n }\n\n .clock__minutes::before {\n content: '';\n position: absolute;\n background-color: var(--text-color);\n width: 0.25rem;\n height: 4rem;\n border-radius: 0.75rem;\n z-index: var(--z-normal);\n }\n\n .clock__seconds {\n width: 130px;\n height: 130px;\n }\n\n .clock__seconds::before {\n content: '';\n position: absolute;\n background-color: var(--first-color);\n width: 0.125rem;\n height: 5rem;\n border-radius: 0.75rem;\n z-index: var(--z-normal);\n }\n\n .clock__logo {\n width: max-content;\n justify-self: center;\n margin-bottom: var(--mb-2-5);\n font-size: var(--smaller-font-size);\n font-weight: var(--font-medium);\n color: var(--text-color-light);\n transition: 0.3s;\n }\n\n .clock__logo:hover {\n color: var(--first-color);\n }\n\n .clock__text {\n display: flex;\n justify-content: center;\n }\n\n .clock__text-hour,\n .clock__text-minutes {\n font-size: var(--biggest-font-size);\n font-weight: var(--font-medium);\n color: var(--title-color);\n }\n\n .clock__text-ampm {\n font-size: var(--tiny-font-size);\n color: var(--title-color);\n font-weight: var(--font-medium);\n margin-left: var(--mb-0-25);\n }\n\n .clock__date {\n font-size: var(--small-font-size);\n font-weight: var(--font-medium);\n }\n"
]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
import React, { useEffect, useReducer } from 'react';
import styled from '@emotion/styled';
import { clsx } from 'clsx';
// noinspection CssUnresolvedCustomProperty
var Container = styled.div(_templateObject());
export var Clock = function(_0) {
var className = _0.className, children = _0.children, props = _object_without_properties(_0, [
"className",
"children"
]);
// src https://www.cssscript.com/modern-clock-ui/
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var mAng = m * 6;
var sAng = s * 6;
var hAng = h * 30 + mAng / 12;
var textHour = '', textMinutes = '', textAmPm = '';
var clockText = function() {
var hh = h, ampm, mm = m;
// We change the hours from 24 to 12 hours and establish whether it is AM or PM
if (hh >= 12) {
hh = hh - 12;
ampm = 'PM';
} else {
ampm = 'AM';
}
// We detect when it's 0 AM and transform to 12 AM
if (hh == 0) {
hh = 12;
}
// Show a zero before hours
if (hh < 10) {
hh = "0".concat(hh);
}
// Show time
textHour = "".concat(hh, ":");
// Show a zero before the minutes
if (mm < 10) {
mm = "0".concat(mm);
}
// Show minutes
textMinutes = mm;
// Show am or pm
textAmPm = ampm;
};
clockText();
var _useReducer = _sliced_to_array(useReducer(function(s) {
return s + 1;
}, 0), 2), forceRender = _useReducer[1];
useEffect(function() {
var timer;
var next = function() {
timer = setTimeout(function() {
forceRender();
next();
}, 1000 - Date.now() % 1000);
};
next();
return function() {
return clearTimeout(timer);
};
}, []);
return /*#__PURE__*/ React.createElement(Container, _object_spread({
className: clsx('clock container pt-4 pb-2', className)
}, props), /*#__PURE__*/ React.createElement("div", {
className: "clock__container grid"
}, /*#__PURE__*/ React.createElement("div", {
className: "clock__content grid"
}, /*#__PURE__*/ React.createElement("div", {
className: "clock__circle"
}, /*#__PURE__*/ React.createElement("span", {
className: "clock__twelve"
}), /*#__PURE__*/ React.createElement("span", {
className: "clock__three"
}), /*#__PURE__*/ React.createElement("span", {
className: "clock__six"
}), /*#__PURE__*/ React.createElement("span", {
className: "clock__nine"
}), /*#__PURE__*/ React.createElement("div", {
className: "clock__rounder"
}), /*#__PURE__*/ React.createElement("div", {
className: "clock__hour",
id: "clock-hour",
style: {
transform: "rotateZ(".concat(hAng, "deg)")
}
}), /*#__PURE__*/ React.createElement("div", {
className: "clock__minutes",
id: "clock-minutes",
style: {
transform: "rotateZ(".concat(mAng, "deg)")
}
}), /*#__PURE__*/ React.createElement("div", {
className: "clock__seconds",
id: "clock-seconds",
style: {
transform: "rotateZ(".concat(sAng, "deg)")
}
})), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "clock__text"
}, /*#__PURE__*/ React.createElement("div", {
className: "clock__text-hour"
}, textHour), /*#__PURE__*/ React.createElement("div", {
className: "clock__text-minutes"
}, textMinutes), /*#__PURE__*/ React.createElement("div", {
className: "clock__text-ampm"
}, textAmPm)), /*#__PURE__*/ React.createElement("div", {
className: "clock__date flex justify-center gap-1"
}, /*#__PURE__*/ React.createElement("span", null, date.toLocaleDateString('default')))))));
};