@sinaasghari/react-analog-clock
Version:
A customizable analog clock component for React with timezone support and responsive scaling.
3 lines (2 loc) • 4.54 kB
JavaScript
import{jsxs as r,jsx as n}from"react/jsx-runtime";import{useState as e,useEffect as t}from"react";var o=function(){return o=Object.assign||function(r){for(var n,e=1,t=arguments.length;e<t;e++)for(var o in n=arguments[e])Object.prototype.hasOwnProperty.call(n,o)&&(r[o]=n[o]);return r},o.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;!function(r,n){void 0===n&&(n={});var e=n.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(document.createTextNode(r))}}(".clock {\r\n width: 300px;\r\n height: 300px;\r\n background: #ececec;\r\n border-radius: 50%;\r\n border: 14px solid #333;\r\n position: relative;\r\n margin: 0 auto;\r\n box-shadow: 0 2vw 4vw -1vw rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n.dot {\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: #ccc;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n margin: auto;\r\n z-index: 10;\r\n box-shadow: 0 2px 4px -1px black;\r\n}\r\n\r\n.hour {\r\n position: absolute;\r\n font-weight: 700;\r\n font-size: 12px;\r\n}\r\n\r\n.twelve {\r\n top: 5%;\r\n left: 46%;\r\n}\r\n\r\n.one {\r\n top: 10%;\r\n right: 26%;\r\n}\r\n\r\n.eleven {\r\n top: 10%;\r\n left: 26%;\r\n}\r\n\r\n.two {\r\n top: 25%;\r\n right: 11%;\r\n}\r\n\r\n.three {\r\n right: 10px;\r\n top: 46%;\r\n}\r\n\r\n.four {\r\n top: 67%;\r\n right: 11%;\r\n}\r\n\r\n.five {\r\n right: 26%;\r\n top: 79%;\r\n}\r\n\r\n.six {\r\n bottom: 3%;\r\n left: 47.5%;\r\n}\r\n\r\n.seven {\r\n left: 26%;\r\n top: 79%;\r\n}\r\n\r\n.eight {\r\n top: 67%;\r\n left: 11%;\r\n}\r\n\r\n.nine {\r\n left: 10px;\r\n top: 46%;\r\n}\r\n\r\n.ten {\r\n top: 25%;\r\n left: 10%;\r\n}\r\n\r\n.hour-hand {\r\n position: absolute;\r\n z-index: 6;\r\n width: 2%;\r\n height: 30%;\r\n top: 22%;\r\n left: 50%;\r\n transform-origin: 50% 90%;\r\n margin-left: -1%;\r\n background-color: #333;\r\n border-top-left-radius: 50%;\r\n border-top-right-radius: 50%;\r\n}\r\n\r\n.minute-hand {\r\n position: absolute;\r\n z-index: 5;\r\n width: 1.5%;\r\n height: 45%;\r\n background-color: #666;\r\n top: 10.5%;\r\n left: 50%;\r\n transform-origin: 50% 90%;\r\n margin-left: -0.75%;\r\n border-top-left-radius: 50%;\r\n border-top-right-radius: 50%;\r\n}\r\n\r\n.second-hand {\r\n position: absolute;\r\n z-index: 7;\r\n width: 1%;\r\n height: 50%;\r\n background-color: red;\r\n top: 5%;\r\n left: 50%;\r\n transform-origin: 50% 90%;\r\n margin-left: -0.5%;\r\n border-top-left-radius: 50%;\r\n border-top-right-radius: 50%;\r\n}\r\n");var i=function(i){var a=i.size,d=void 0===a?300:a,s=i.showNumbers,l=void 0===s||s,c=i.centerDotColor,h=void 0===c?"#ccc":c,u=i.hourColor,p=void 0===u?"#333":u,f=i.minutesColor,m=void 0===f?"#666":f,g=i.secondColor,v=void 0===g?"red":g,b=i.style,x=void 0===b?{}:b,w=i.timezoneOffset,N=void 0===w?0:w,y=e(new Date),k=y[0],C=y[1];return t(function(){var r=setInterval(function(){var r=new Date,n=r.getTime()+6e4*r.getTimezoneOffset(),e=new Date(n+6e4*N);C(e)},1e3);return function(){return clearInterval(r)}},[N]),r("div",{className:"clock",style:o({transform:"scale(".concat(d/200,")"),transformOrigin:"top left",width:"200px",height:"200px"},x),children:[n("div",{className:"dot",style:{backgroundColor:h}}),n("div",{className:"hour twelve",children:l?12:""}),n("div",{className:"hour one",children:l?1:""}),n("div",{className:"hour two",children:l?2:""}),n("div",{className:"hour three",children:l?3:""}),n("div",{className:"hour four",children:l?4:""}),n("div",{className:"hour five",children:l?5:""}),n("div",{className:"hour six",children:l?6:""}),n("div",{className:"hour seven",children:l?7:""}),n("div",{className:"hour eight",children:l?8:""}),n("div",{className:"hour nine",children:l?9:""}),n("div",{className:"hour ten",children:l?10:""}),n("div",{className:"hour eleven",children:l?11:""}),n("div",{className:"hour-hand",style:{transform:"rotateZ(".concat(k.getHours()%12*30+.5*k.getMinutes(),"deg)"),backgroundColor:p}}),n("div",{className:"minute-hand",style:{transform:"rotateZ(".concat(6*k.getMinutes()+.1*k.getSeconds(),"deg)"),backgroundColor:m}}),n("div",{className:"second-hand",style:{transform:"rotateZ(".concat(6*k.getSeconds(),"deg)"),backgroundColor:v}})]})};export{i as default};
//# sourceMappingURL=index.mjs.map