diff --git a/README.md b/README.md index 36daf341..da557a13 100644 --- a/README.md +++ b/README.md @@ -6,29 +6,73 @@ # Todo - useContext Project -Replace this readme with your own information about your project. +The assignment is to build a Todo app using Zustand for state management. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. - -## Getting Started with the Project +In this project, I aimed to explore Styled Components and refresh my newly acquired skills in using React Router. ### Dependency Installation & Startup Development Server -Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies. - -The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal. +This project uses npm (Node Package Manager) to handle its dependencies and run the development server. ```bash npm i && code . && npm run dev ``` +Before deployment: + +```bash +npm run build +``` + +Install Zustand: + +```bash +npm i zustand +``` + +Install Styled components: + +```bash +npm install styled-components +``` + +Install Routes: + +```bash +npm install react-router-dom +``` + +Font Awesome: +```bash +npm install --save @fortawesome/fontawesome-svg-core +npm install --save @fortawesome/free-solid-svg-icons +npm install --save @fortawesome/react-fontawesome +``` + +### Useful resources + +- [This CodePen](https://codepen.io/joheri1/pen/MWNdRNX) originally created by [DesignCouch](https://codepen.io/designcouch), has been adjusted slightly to improve accessibility. +- [One of my previous projects:](https://github.com/joheri1/project-movies-vite) A movie browsing app built with React Router, showcasing dynamic routing and API integration. -### The Problem +### The Problem +- Understanding how to effectively use Zustand. My initial goal was to expand the app with multiple pages to fully leverage global state management, but as always, time was a challenge. +- Adding accessible labels to input fields when using Styled Components turned out to be trickier than I thought, since I don't want to display the text. I couldn't find a good solution within the time frame. +- Removing import React in the Checklist file caused a cascade of errors, so as a quick workaround before my demo, I decided to leave it where it was needed to avoid breaking the app. -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +### If I had more time +## Stretch Goals +- Add a timestamp for each task indicating when it was created. The timestamp should be displayed as a formatted date but stored as a raw date. You can use a third-party library, such as date-fns or Moment.js for this. +- Add a complete all button to set all tasks as completed. You could also use this opportunity to make your app look nice when there's no data. See empty states UX design for some ideas. +- Add a button to switch dark/light mode. +- Implement local storage +## Advanced Stretch Goals +- Add a date input to your new task form to set a due date on a task. It could be required, or optional - it's up to you. You could then display this in the list and style it differently when a task is overdue. +- Add filters to display completed/uncompleted tasks, tasks created after a given date or anything else you consider important. +- Create categories/tags for tasks so they can be grouped - for example, 'Housework', 'Shopping', etc. +- Create projects for tasks → A project could be a group of tasks which all need to be completed and when they are completed, the project is marked as complete. ### View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +[Johannas Checklists](https://johannas-checklists.netlify.app/) ## Instructions diff --git a/dist/assets/index-9e8d7c5d.js b/dist/assets/index-9e8d7c5d.js new file mode 100644 index 00000000..f60afd5d --- /dev/null +++ b/dist/assets/index-9e8d7c5d.js @@ -0,0 +1,183 @@ +(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const l of document.querySelectorAll('link[rel="modulepreload"]'))r(l);new MutationObserver(l=>{for(const o of l)if(o.type==="childList")for(const i of o.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&r(i)}).observe(document,{childList:!0,subtree:!0});function n(l){const o={};return l.integrity&&(o.integrity=l.integrity),l.referrerPolicy&&(o.referrerPolicy=l.referrerPolicy),l.crossOrigin==="use-credentials"?o.credentials="include":l.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(l){if(l.ep)return;l.ep=!0;const o=n(l);fetch(l.href,o)}})();function td(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var ga={exports:{}},Kl={},ya={exports:{}},$={};/** + * @license React + * react.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */var zr=Symbol.for("react.element"),nd=Symbol.for("react.portal"),rd=Symbol.for("react.fragment"),ld=Symbol.for("react.strict_mode"),od=Symbol.for("react.profiler"),id=Symbol.for("react.provider"),ud=Symbol.for("react.context"),sd=Symbol.for("react.forward_ref"),ad=Symbol.for("react.suspense"),cd=Symbol.for("react.memo"),fd=Symbol.for("react.lazy"),Ku=Symbol.iterator;function dd(e){return e===null||typeof e!="object"?null:(e=Ku&&e[Ku]||e["@@iterator"],typeof e=="function"?e:null)}var wa={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},Sa=Object.assign,ka={};function Dn(e,t,n){this.props=e,this.context=t,this.refs=ka,this.updater=n||wa}Dn.prototype.isReactComponent={};Dn.prototype.setState=function(e,t){if(typeof e!="object"&&typeof e!="function"&&e!=null)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")};Dn.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};function xa(){}xa.prototype=Dn.prototype;function Gi(e,t,n){this.props=e,this.context=t,this.refs=ka,this.updater=n||wa}var Xi=Gi.prototype=new xa;Xi.constructor=Gi;Sa(Xi,Dn.prototype);Xi.isPureReactComponent=!0;var Gu=Array.isArray,Ea=Object.prototype.hasOwnProperty,Zi={current:null},Ca={key:!0,ref:!0,__self:!0,__source:!0};function _a(e,t,n){var r,l={},o=null,i=null;if(t!=null)for(r in t.ref!==void 0&&(i=t.ref),t.key!==void 0&&(o=""+t.key),t)Ea.call(t,r)&&!Ca.hasOwnProperty(r)&&(l[r]=t[r]);var u=arguments.length-2;if(u===1)l.children=n;else if(1>>1,j=C[M];if(0>>1;Ml(st,z))kel(Ze,st)?(C[M]=Ze,C[ke]=z,M=ke):(C[M]=st,C[De]=z,M=De);else if(kel(Ze,z))C[M]=Ze,C[ke]=z,M=ke;else break e}}return N}function l(C,N){var z=C.sortIndex-N.sortIndex;return z!==0?z:C.id-N.id}if(typeof performance=="object"&&typeof performance.now=="function"){var o=performance;e.unstable_now=function(){return o.now()}}else{var i=Date,u=i.now();e.unstable_now=function(){return i.now()-u}}var s=[],c=[],m=1,h=null,p=3,g=!1,y=!1,k=!1,R=typeof setTimeout=="function"?setTimeout:null,f=typeof clearTimeout=="function"?clearTimeout:null,a=typeof setImmediate<"u"?setImmediate:null;typeof navigator<"u"&&navigator.scheduling!==void 0&&navigator.scheduling.isInputPending!==void 0&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function d(C){for(var N=n(c);N!==null;){if(N.callback===null)r(c);else if(N.startTime<=C)r(c),N.sortIndex=N.expirationTime,t(s,N);else break;N=n(c)}}function v(C){if(k=!1,d(C),!y)if(n(s)!==null)y=!0,An(E);else{var N=n(c);N!==null&&It(v,N.startTime-C)}}function E(C,N){y=!1,k&&(k=!1,f(P),P=-1),g=!0;var z=p;try{for(d(N),h=n(s);h!==null&&(!(h.expirationTime>N)||C&&!Se());){var M=h.callback;if(typeof M=="function"){h.callback=null,p=h.priorityLevel;var j=M(h.expirationTime<=N);N=e.unstable_now(),typeof j=="function"?h.callback=j:h===n(s)&&r(s),d(N)}else r(s);h=n(s)}if(h!==null)var Ot=!0;else{var De=n(c);De!==null&&It(v,De.startTime-N),Ot=!1}return Ot}finally{h=null,p=z,g=!1}}var x=!1,w=null,P=-1,F=5,L=-1;function Se(){return!(e.unstable_now()-LC||125M?(C.sortIndex=z,t(c,C),n(s)===null&&C===n(c)&&(k?(f(P),P=-1):k=!0,It(v,z-M))):(C.sortIndex=j,t(s,C),y||g||(y=!0,An(E))),C},e.unstable_shouldYield=Se,e.unstable_wrapCallback=function(C){var N=p;return function(){var z=p;p=N;try{return C.apply(this,arguments)}finally{p=z}}}})(Ta);za.exports=Ta;var Ed=za.exports;/** + * @license React + * react-dom.production.min.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */var Ra=Tr,_e=Ed;function S(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n"u"||typeof window.document>"u"||typeof window.document.createElement>"u"),Xo=Object.prototype.hasOwnProperty,Cd=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,Zu={},Ju={};function _d(e){return Xo.call(Ju,e)?!0:Xo.call(Zu,e)?!1:Cd.test(e)?Ju[e]=!0:(Zu[e]=!0,!1)}function Pd(e,t,n,r){if(n!==null&&n.type===0)return!1;switch(typeof t){case"function":case"symbol":return!0;case"boolean":return r?!1:n!==null?!n.acceptsBooleans:(e=e.toLowerCase().slice(0,5),e!=="data-"&&e!=="aria-");default:return!1}}function Nd(e,t,n,r){if(t===null||typeof t>"u"||Pd(e,t,n,r))return!0;if(r)return!1;if(n!==null)switch(n.type){case 3:return!t;case 4:return t===!1;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}function pe(e,t,n,r,l,o,i){this.acceptsBooleans=t===2||t===3||t===4,this.attributeName=r,this.attributeNamespace=l,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=o,this.removeEmptyString=i}var le={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(e){le[e]=new pe(e,0,!1,e,null,!1,!1)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(e){var t=e[0];le[t]=new pe(t,1,!1,e[1],null,!1,!1)});["contentEditable","draggable","spellCheck","value"].forEach(function(e){le[e]=new pe(e,2,!1,e.toLowerCase(),null,!1,!1)});["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(e){le[e]=new pe(e,2,!1,e,null,!1,!1)});"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(e){le[e]=new pe(e,3,!1,e.toLowerCase(),null,!1,!1)});["checked","multiple","muted","selected"].forEach(function(e){le[e]=new pe(e,3,!0,e,null,!1,!1)});["capture","download"].forEach(function(e){le[e]=new pe(e,4,!1,e,null,!1,!1)});["cols","rows","size","span"].forEach(function(e){le[e]=new pe(e,6,!1,e,null,!1,!1)});["rowSpan","start"].forEach(function(e){le[e]=new pe(e,5,!1,e.toLowerCase(),null,!1,!1)});var qi=/[\-:]([a-z])/g;function bi(e){return e[1].toUpperCase()}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(e){var t=e.replace(qi,bi);le[t]=new pe(t,1,!1,e,null,!1,!1)});"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(e){var t=e.replace(qi,bi);le[t]=new pe(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)});["xml:base","xml:lang","xml:space"].forEach(function(e){var t=e.replace(qi,bi);le[t]=new pe(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)});["tabIndex","crossOrigin"].forEach(function(e){le[e]=new pe(e,1,!1,e.toLowerCase(),null,!1,!1)});le.xlinkHref=new pe("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1);["src","href","action","formAction"].forEach(function(e){le[e]=new pe(e,1,!1,e.toLowerCase(),null,!0,!0)});function eu(e,t,n,r){var l=le.hasOwnProperty(t)?le[t]:null;(l!==null?l.type!==0:r||!(2u||l[i]!==o[u]){var s=` +`+l[i].replace(" at new "," at ");return e.displayName&&s.includes("")&&(s=s.replace("",e.displayName)),s}while(1<=i&&0<=u);break}}}finally{So=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?Xn(e):""}function zd(e){switch(e.tag){case 5:return Xn(e.type);case 16:return Xn("Lazy");case 13:return Xn("Suspense");case 19:return Xn("SuspenseList");case 0:case 2:case 15:return e=ko(e.type,!1),e;case 11:return e=ko(e.type.render,!1),e;case 1:return e=ko(e.type,!0),e;default:return""}}function bo(e){if(e==null)return null;if(typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case rn:return"Fragment";case nn:return"Portal";case Zo:return"Profiler";case tu:return"StrictMode";case Jo:return"Suspense";case qo:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case Ia:return(e.displayName||"Context")+".Consumer";case $a:return(e._context.displayName||"Context")+".Provider";case nu:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ru:return t=e.displayName||null,t!==null?t:bo(e.type)||"Memo";case dt:t=e._payload,e=e._init;try{return bo(e(t))}catch{}}return null}function Td(e){var t=e.type;switch(e.tag){case 24:return"Cache";case 9:return(t.displayName||"Context")+".Consumer";case 10:return(t._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=t.render,e=e.displayName||e.name||"",t.displayName||(e!==""?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return t;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return bo(t);case 8:return t===tu?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if(typeof t=="function")return t.displayName||t.name||null;if(typeof t=="string")return t}return null}function Pt(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":return e;case"object":return e;default:return""}}function Da(e){var t=e.type;return(e=e.nodeName)&&e.toLowerCase()==="input"&&(t==="checkbox"||t==="radio")}function Rd(e){var t=Da(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&typeof n<"u"&&typeof n.get=="function"&&typeof n.set=="function"){var l=n.get,o=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return l.call(this)},set:function(i){r=""+i,o.call(this,i)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(i){r=""+i},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}function Ar(e){e._valueTracker||(e._valueTracker=Rd(e))}function Ma(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=Da(e)?e.checked?"true":"false":e.value),e=r,e!==n?(t.setValue(e),!0):!1}function wl(e){if(e=e||(typeof document<"u"?document:void 0),typeof e>"u")return null;try{return e.activeElement||e.body}catch{return e.body}}function ei(e,t){var n=t.checked;return Y({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:n??e._wrapperState.initialChecked})}function bu(e,t){var n=t.defaultValue==null?"":t.defaultValue,r=t.checked!=null?t.checked:t.defaultChecked;n=Pt(t.value!=null?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:t.type==="checkbox"||t.type==="radio"?t.checked!=null:t.value!=null}}function ja(e,t){t=t.checked,t!=null&&eu(e,"checked",t,!1)}function ti(e,t){ja(e,t);var n=Pt(t.value),r=t.type;if(n!=null)r==="number"?(n===0&&e.value===""||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if(r==="submit"||r==="reset"){e.removeAttribute("value");return}t.hasOwnProperty("value")?ni(e,t.type,n):t.hasOwnProperty("defaultValue")&&ni(e,t.type,Pt(t.defaultValue)),t.checked==null&&t.defaultChecked!=null&&(e.defaultChecked=!!t.defaultChecked)}function es(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!(r!=="submit"&&r!=="reset"||t.value!==void 0&&t.value!==null))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}n=e.name,n!==""&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,n!==""&&(e.name=n)}function ni(e,t,n){(t!=="number"||wl(e.ownerDocument)!==e)&&(n==null?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}var Zn=Array.isArray;function vn(e,t,n,r){if(e=e.options,t){t={};for(var l=0;l"+t.valueOf().toString()+"",t=Ur.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}});function fr(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&n.nodeType===3){n.nodeValue=t;return}}e.textContent=t}var er={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},Ld=["Webkit","ms","Moz","O"];Object.keys(er).forEach(function(e){Ld.forEach(function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),er[t]=er[e]})});function Ba(e,t,n){return t==null||typeof t=="boolean"||t===""?"":n||typeof t!="number"||t===0||er.hasOwnProperty(e)&&er[e]?(""+t).trim():t+"px"}function Ha(e,t){e=e.style;for(var n in t)if(t.hasOwnProperty(n)){var r=n.indexOf("--")===0,l=Ba(n,t[n],r);n==="float"&&(n="cssFloat"),r?e.setProperty(n,l):e[n]=l}}var $d=Y({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function oi(e,t){if(t){if($d[e]&&(t.children!=null||t.dangerouslySetInnerHTML!=null))throw Error(S(137,e));if(t.dangerouslySetInnerHTML!=null){if(t.children!=null)throw Error(S(60));if(typeof t.dangerouslySetInnerHTML!="object"||!("__html"in t.dangerouslySetInnerHTML))throw Error(S(61))}if(t.style!=null&&typeof t.style!="object")throw Error(S(62))}}function ii(e,t){if(e.indexOf("-")===-1)return typeof t.is=="string";switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var ui=null;function lu(e){return e=e.target||e.srcElement||window,e.correspondingUseElement&&(e=e.correspondingUseElement),e.nodeType===3?e.parentNode:e}var si=null,gn=null,yn=null;function rs(e){if(e=$r(e)){if(typeof si!="function")throw Error(S(280));var t=e.stateNode;t&&(t=ql(t),si(e.stateNode,e.type,t))}}function Va(e){gn?yn?yn.push(e):yn=[e]:gn=e}function Wa(){if(gn){var e=gn,t=yn;if(yn=gn=null,rs(e),t)for(e=0;e>>=0,e===0?32:31-(Vd(e)/Wd|0)|0}var Br=64,Hr=4194304;function Jn(e){switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return e&4194240;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return e&130023424;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return e}}function El(e,t){var n=e.pendingLanes;if(n===0)return 0;var r=0,l=e.suspendedLanes,o=e.pingedLanes,i=n&268435455;if(i!==0){var u=i&~l;u!==0?r=Jn(u):(o&=i,o!==0&&(r=Jn(o)))}else i=n&~l,i!==0?r=Jn(i):o!==0&&(r=Jn(o));if(r===0)return 0;if(t!==0&&t!==r&&!(t&l)&&(l=r&-r,o=t&-t,l>=o||l===16&&(o&4194240)!==0))return t;if(r&4&&(r|=n&16),t=e.entangledLanes,t!==0)for(e=e.entanglements,t&=r;0n;n++)t.push(e);return t}function Rr(e,t,n){e.pendingLanes|=t,t!==536870912&&(e.suspendedLanes=0,e.pingedLanes=0),e=e.eventTimes,t=31-Ue(t),e[t]=n}function Gd(e,t){var n=e.pendingLanes&~t;e.pendingLanes=t,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=t,e.mutableReadLanes&=t,e.entangledLanes&=t,t=e.entanglements;var r=e.eventTimes;for(e=e.expirationTimes;0=nr),ds=String.fromCharCode(32),ps=!1;function cc(e,t){switch(e){case"keyup":return xp.indexOf(t.keyCode)!==-1;case"keydown":return t.keyCode!==229;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function fc(e){return e=e.detail,typeof e=="object"&&"data"in e?e.data:null}var ln=!1;function Cp(e,t){switch(e){case"compositionend":return fc(t);case"keypress":return t.which!==32?null:(ps=!0,ds);case"textInput":return e=t.data,e===ds&&ps?null:e;default:return null}}function _p(e,t){if(ln)return e==="compositionend"||!du&&cc(e,t)?(e=sc(),ol=au=vt=null,ln=!1,e):null;switch(e){case"paste":return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1=t)return{node:n,offset:t-e};e=r}e:{for(;n;){if(n.nextSibling){n=n.nextSibling;break e}n=n.parentNode}n=void 0}n=gs(n)}}function mc(e,t){return e&&t?e===t?!0:e&&e.nodeType===3?!1:t&&t.nodeType===3?mc(e,t.parentNode):"contains"in e?e.contains(t):e.compareDocumentPosition?!!(e.compareDocumentPosition(t)&16):!1:!1}function vc(){for(var e=window,t=wl();t instanceof e.HTMLIFrameElement;){try{var n=typeof t.contentWindow.location.href=="string"}catch{n=!1}if(n)e=t.contentWindow;else break;t=wl(e.document)}return t}function pu(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&(t==="input"&&(e.type==="text"||e.type==="search"||e.type==="tel"||e.type==="url"||e.type==="password")||t==="textarea"||e.contentEditable==="true")}function Op(e){var t=vc(),n=e.focusedElem,r=e.selectionRange;if(t!==n&&n&&n.ownerDocument&&mc(n.ownerDocument.documentElement,n)){if(r!==null&&pu(n)){if(t=r.start,e=r.end,e===void 0&&(e=t),"selectionStart"in n)n.selectionStart=t,n.selectionEnd=Math.min(e,n.value.length);else if(e=(t=n.ownerDocument||document)&&t.defaultView||window,e.getSelection){e=e.getSelection();var l=n.textContent.length,o=Math.min(r.start,l);r=r.end===void 0?o:Math.min(r.end,l),!e.extend&&o>r&&(l=r,r=o,o=l),l=ys(n,o);var i=ys(n,r);l&&i&&(e.rangeCount!==1||e.anchorNode!==l.node||e.anchorOffset!==l.offset||e.focusNode!==i.node||e.focusOffset!==i.offset)&&(t=t.createRange(),t.setStart(l.node,l.offset),e.removeAllRanges(),o>r?(e.addRange(t),e.extend(i.node,i.offset)):(t.setEnd(i.node,i.offset),e.addRange(t)))}}for(t=[],e=n;e=e.parentNode;)e.nodeType===1&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for(typeof n.focus=="function"&&n.focus(),n=0;n=document.documentMode,on=null,hi=null,lr=null,mi=!1;function ws(e,t,n){var r=n.window===n?n.document:n.nodeType===9?n:n.ownerDocument;mi||on==null||on!==wl(r)||(r=on,"selectionStart"in r&&pu(r)?r={start:r.selectionStart,end:r.selectionEnd}:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection(),r={anchorNode:r.anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset}),lr&&gr(lr,r)||(lr=r,r=Pl(hi,"onSelect"),0an||(e.current=ki[an],ki[an]=null,an--)}function A(e,t){an++,ki[an]=e.current,e.current=t}var Nt={},ae=Tt(Nt),ge=Tt(!1),Yt=Nt;function Cn(e,t){var n=e.type.contextTypes;if(!n)return Nt;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var l={},o;for(o in n)l[o]=t[o];return r&&(e=e.stateNode,e.__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=l),l}function ye(e){return e=e.childContextTypes,e!=null}function zl(){H(ge),H(ae)}function Ps(e,t,n){if(ae.current!==Nt)throw Error(S(168));A(ae,t),A(ge,n)}function _c(e,t,n){var r=e.stateNode;if(t=t.childContextTypes,typeof r.getChildContext!="function")return n;r=r.getChildContext();for(var l in r)if(!(l in t))throw Error(S(108,Td(e)||"Unknown",l));return Y({},n,r)}function Tl(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||Nt,Yt=ae.current,A(ae,e),A(ge,ge.current),!0}function Ns(e,t,n){var r=e.stateNode;if(!r)throw Error(S(169));n?(e=_c(e,t,Yt),r.__reactInternalMemoizedMergedChildContext=e,H(ge),H(ae),A(ae,e)):H(ge),A(ge,n)}var be=null,bl=!1,Do=!1;function Pc(e){be===null?be=[e]:be.push(e)}function Yp(e){bl=!0,Pc(e)}function Rt(){if(!Do&&be!==null){Do=!0;var e=0,t=D;try{var n=be;for(D=1;e>=i,l-=i,et=1<<32-Ue(t)+l|n<P?(F=w,w=null):F=w.sibling;var L=p(f,w,d[P],v);if(L===null){w===null&&(w=F);break}e&&w&&L.alternate===null&&t(f,w),a=o(L,a,P),x===null?E=L:x.sibling=L,x=L,w=F}if(P===d.length)return n(f,w),V&&Mt(f,P),E;if(w===null){for(;PP?(F=w,w=null):F=w.sibling;var Se=p(f,w,L.value,v);if(Se===null){w===null&&(w=F);break}e&&w&&Se.alternate===null&&t(f,w),a=o(Se,a,P),x===null?E=Se:x.sibling=Se,x=Se,w=F}if(L.done)return n(f,w),V&&Mt(f,P),E;if(w===null){for(;!L.done;P++,L=d.next())L=h(f,L.value,v),L!==null&&(a=o(L,a,P),x===null?E=L:x.sibling=L,x=L);return V&&Mt(f,P),E}for(w=r(f,w);!L.done;P++,L=d.next())L=g(w,f,P,L.value,v),L!==null&&(e&&L.alternate!==null&&w.delete(L.key===null?P:L.key),a=o(L,a,P),x===null?E=L:x.sibling=L,x=L);return e&&w.forEach(function(Lt){return t(f,Lt)}),V&&Mt(f,P),E}function R(f,a,d,v){if(typeof d=="object"&&d!==null&&d.type===rn&&d.key===null&&(d=d.props.children),typeof d=="object"&&d!==null){switch(d.$$typeof){case Fr:e:{for(var E=d.key,x=a;x!==null;){if(x.key===E){if(E=d.type,E===rn){if(x.tag===7){n(f,x.sibling),a=l(x,d.props.children),a.return=f,f=a;break e}}else if(x.elementType===E||typeof E=="object"&&E!==null&&E.$$typeof===dt&&Os(E)===x.type){n(f,x.sibling),a=l(x,d.props),a.ref=Yn(f,x,d),a.return=f,f=a;break e}n(f,x);break}else t(f,x);x=x.sibling}d.type===rn?(a=Vt(d.props.children,f.mode,v,d.key),a.return=f,f=a):(v=pl(d.type,d.key,d.props,null,f.mode,v),v.ref=Yn(f,a,d),v.return=f,f=v)}return i(f);case nn:e:{for(x=d.key;a!==null;){if(a.key===x)if(a.tag===4&&a.stateNode.containerInfo===d.containerInfo&&a.stateNode.implementation===d.implementation){n(f,a.sibling),a=l(a,d.children||[]),a.return=f,f=a;break e}else{n(f,a);break}else t(f,a);a=a.sibling}a=Vo(d,f.mode,v),a.return=f,f=a}return i(f);case dt:return x=d._init,R(f,a,x(d._payload),v)}if(Zn(d))return y(f,a,d,v);if(Bn(d))return k(f,a,d,v);Xr(f,d)}return typeof d=="string"&&d!==""||typeof d=="number"?(d=""+d,a!==null&&a.tag===6?(n(f,a.sibling),a=l(a,d),a.return=f,f=a):(n(f,a),a=Ho(d,f.mode,v),a.return=f,f=a),i(f)):n(f,a)}return R}var Pn=Oc(!0),Dc=Oc(!1),Ir={},Xe=Tt(Ir),kr=Tt(Ir),xr=Tt(Ir);function Ut(e){if(e===Ir)throw Error(S(174));return e}function xu(e,t){switch(A(xr,t),A(kr,e),A(Xe,Ir),e=t.nodeType,e){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:li(null,"");break;default:e=e===8?t.parentNode:t,t=e.namespaceURI||null,e=e.tagName,t=li(t,e)}H(Xe),A(Xe,t)}function Nn(){H(Xe),H(kr),H(xr)}function Mc(e){Ut(xr.current);var t=Ut(Xe.current),n=li(t,e.type);t!==n&&(A(kr,e),A(Xe,n))}function Eu(e){kr.current===e&&(H(Xe),H(kr))}var W=Tt(0);function Dl(e){for(var t=e;t!==null;){if(t.tag===13){var n=t.memoizedState;if(n!==null&&(n=n.dehydrated,n===null||n.data==="$?"||n.data==="$!"))return t}else if(t.tag===19&&t.memoizedProps.revealOrder!==void 0){if(t.flags&128)return t}else if(t.child!==null){t.child.return=t,t=t.child;continue}if(t===e)break;for(;t.sibling===null;){if(t.return===null||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}var Mo=[];function Cu(){for(var e=0;en?n:4,e(!0);var r=jo.transition;jo.transition={};try{e(!1),t()}finally{D=n,jo.transition=r}}function qc(){return Ie().memoizedState}function Zp(e,t,n){var r=Ct(e);if(n={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null},bc(e))ef(t,n);else if(n=Rc(e,t,n,r),n!==null){var l=fe();Be(n,e,r,l),tf(n,t,r)}}function Jp(e,t,n){var r=Ct(e),l={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null};if(bc(e))ef(t,l);else{var o=e.alternate;if(e.lanes===0&&(o===null||o.lanes===0)&&(o=t.lastRenderedReducer,o!==null))try{var i=t.lastRenderedState,u=o(i,n);if(l.hasEagerState=!0,l.eagerState=u,Ve(u,i)){var s=t.interleaved;s===null?(l.next=l,Su(t)):(l.next=s.next,s.next=l),t.interleaved=l;return}}catch{}finally{}n=Rc(e,t,l,r),n!==null&&(l=fe(),Be(n,e,r,l),tf(n,t,r))}}function bc(e){var t=e.alternate;return e===Q||t!==null&&t===Q}function ef(e,t){or=Ml=!0;var n=e.pending;n===null?t.next=t:(t.next=n.next,n.next=t),e.pending=t}function tf(e,t,n){if(n&4194240){var r=t.lanes;r&=e.pendingLanes,n|=r,t.lanes=n,iu(e,n)}}var jl={readContext:$e,useCallback:oe,useContext:oe,useEffect:oe,useImperativeHandle:oe,useInsertionEffect:oe,useLayoutEffect:oe,useMemo:oe,useReducer:oe,useRef:oe,useState:oe,useDebugValue:oe,useDeferredValue:oe,useTransition:oe,useMutableSource:oe,useSyncExternalStore:oe,useId:oe,unstable_isNewReconciler:!1},qp={readContext:$e,useCallback:function(e,t){return Qe().memoizedState=[e,t===void 0?null:t],e},useContext:$e,useEffect:Ms,useImperativeHandle:function(e,t,n){return n=n!=null?n.concat([e]):null,al(4194308,4,Kc.bind(null,t,e),n)},useLayoutEffect:function(e,t){return al(4194308,4,e,t)},useInsertionEffect:function(e,t){return al(4,2,e,t)},useMemo:function(e,t){var n=Qe();return t=t===void 0?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=Qe();return t=n!==void 0?n(t):t,r.memoizedState=r.baseState=t,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},r.queue=e,e=e.dispatch=Zp.bind(null,Q,e),[r.memoizedState,e]},useRef:function(e){var t=Qe();return e={current:e},t.memoizedState=e},useState:Ds,useDebugValue:Tu,useDeferredValue:function(e){return Qe().memoizedState=e},useTransition:function(){var e=Ds(!1),t=e[0];return e=Xp.bind(null,e[1]),Qe().memoizedState=e,[t,e]},useMutableSource:function(){},useSyncExternalStore:function(e,t,n){var r=Q,l=Qe();if(V){if(n===void 0)throw Error(S(407));n=n()}else{if(n=t(),te===null)throw Error(S(349));Gt&30||Ac(r,t,n)}l.memoizedState=n;var o={value:n,getSnapshot:t};return l.queue=o,Ms(Bc.bind(null,r,o,e),[e]),r.flags|=2048,_r(9,Uc.bind(null,r,o,n,t),void 0,null),n},useId:function(){var e=Qe(),t=te.identifierPrefix;if(V){var n=tt,r=et;n=(r&~(1<<32-Ue(r)-1)).toString(32)+n,t=":"+t+"R"+n,n=Er++,0<\/script>",e=e.removeChild(e.firstChild)):typeof r.is=="string"?e=i.createElement(n,{is:r.is}):(e=i.createElement(n),n==="select"&&(i=e,r.multiple?i.multiple=!0:r.size&&(i.size=r.size))):e=i.createElementNS(e,n),e[Ke]=t,e[Sr]=r,ff(e,t,!1,!1),t.stateNode=e;e:{switch(i=ii(n,r),n){case"dialog":U("cancel",e),U("close",e),l=r;break;case"iframe":case"object":case"embed":U("load",e),l=r;break;case"video":case"audio":for(l=0;lTn&&(t.flags|=128,r=!0,Kn(o,!1),t.lanes=4194304)}else{if(!r)if(e=Dl(i),e!==null){if(t.flags|=128,r=!0,n=e.updateQueue,n!==null&&(t.updateQueue=n,t.flags|=4),Kn(o,!0),o.tail===null&&o.tailMode==="hidden"&&!i.alternate&&!V)return ie(t),null}else 2*G()-o.renderingStartTime>Tn&&n!==1073741824&&(t.flags|=128,r=!0,Kn(o,!1),t.lanes=4194304);o.isBackwards?(i.sibling=t.child,t.child=i):(n=o.last,n!==null?n.sibling=i:t.child=i,o.last=i)}return o.tail!==null?(t=o.tail,o.rendering=t,o.tail=t.sibling,o.renderingStartTime=G(),t.sibling=null,n=W.current,A(W,r?n&1|2:n&1),t):(ie(t),null);case 22:case 23:return Du(),r=t.memoizedState!==null,e!==null&&e.memoizedState!==null!==r&&(t.flags|=8192),r&&t.mode&1?xe&1073741824&&(ie(t),t.subtreeFlags&6&&(t.flags|=8192)):ie(t),null;case 24:return null;case 25:return null}throw Error(S(156,t.tag))}function ih(e,t){switch(mu(t),t.tag){case 1:return ye(t.type)&&zl(),e=t.flags,e&65536?(t.flags=e&-65537|128,t):null;case 3:return Nn(),H(ge),H(ae),Cu(),e=t.flags,e&65536&&!(e&128)?(t.flags=e&-65537|128,t):null;case 5:return Eu(t),null;case 13:if(H(W),e=t.memoizedState,e!==null&&e.dehydrated!==null){if(t.alternate===null)throw Error(S(340));_n()}return e=t.flags,e&65536?(t.flags=e&-65537|128,t):null;case 19:return H(W),null;case 4:return Nn(),null;case 10:return wu(t.type._context),null;case 22:case 23:return Du(),null;case 24:return null;default:return null}}var Jr=!1,se=!1,uh=typeof WeakSet=="function"?WeakSet:Set,_=null;function pn(e,t){var n=e.ref;if(n!==null)if(typeof n=="function")try{n(null)}catch(r){K(e,t,r)}else n.current=null}function Ii(e,t,n){try{n()}catch(r){K(e,t,r)}}var Qs=!1;function sh(e,t){if(vi=Cl,e=vc(),pu(e)){if("selectionStart"in e)var n={start:e.selectionStart,end:e.selectionEnd};else e:{n=(n=e.ownerDocument)&&n.defaultView||window;var r=n.getSelection&&n.getSelection();if(r&&r.rangeCount!==0){n=r.anchorNode;var l=r.anchorOffset,o=r.focusNode;r=r.focusOffset;try{n.nodeType,o.nodeType}catch{n=null;break e}var i=0,u=-1,s=-1,c=0,m=0,h=e,p=null;t:for(;;){for(var g;h!==n||l!==0&&h.nodeType!==3||(u=i+l),h!==o||r!==0&&h.nodeType!==3||(s=i+r),h.nodeType===3&&(i+=h.nodeValue.length),(g=h.firstChild)!==null;)p=h,h=g;for(;;){if(h===e)break t;if(p===n&&++c===l&&(u=i),p===o&&++m===r&&(s=i),(g=h.nextSibling)!==null)break;h=p,p=h.parentNode}h=g}n=u===-1||s===-1?null:{start:u,end:s}}else n=null}n=n||{start:0,end:0}}else n=null;for(gi={focusedElem:e,selectionRange:n},Cl=!1,_=t;_!==null;)if(t=_,e=t.child,(t.subtreeFlags&1028)!==0&&e!==null)e.return=t,_=e;else for(;_!==null;){t=_;try{var y=t.alternate;if(t.flags&1024)switch(t.tag){case 0:case 11:case 15:break;case 1:if(y!==null){var k=y.memoizedProps,R=y.memoizedState,f=t.stateNode,a=f.getSnapshotBeforeUpdate(t.elementType===t.type?k:je(t.type,k),R);f.__reactInternalSnapshotBeforeUpdate=a}break;case 3:var d=t.stateNode.containerInfo;d.nodeType===1?d.textContent="":d.nodeType===9&&d.documentElement&&d.removeChild(d.documentElement);break;case 5:case 6:case 4:case 17:break;default:throw Error(S(163))}}catch(v){K(t,t.return,v)}if(e=t.sibling,e!==null){e.return=t.return,_=e;break}_=t.return}return y=Qs,Qs=!1,y}function ir(e,t,n){var r=t.updateQueue;if(r=r!==null?r.lastEffect:null,r!==null){var l=r=r.next;do{if((l.tag&e)===e){var o=l.destroy;l.destroy=void 0,o!==void 0&&Ii(t,n,o)}l=l.next}while(l!==r)}}function no(e,t){if(t=t.updateQueue,t=t!==null?t.lastEffect:null,t!==null){var n=t=t.next;do{if((n.tag&e)===e){var r=n.create;n.destroy=r()}n=n.next}while(n!==t)}}function Oi(e){var t=e.ref;if(t!==null){var n=e.stateNode;switch(e.tag){case 5:e=n;break;default:e=n}typeof t=="function"?t(e):t.current=e}}function hf(e){var t=e.alternate;t!==null&&(e.alternate=null,hf(t)),e.child=null,e.deletions=null,e.sibling=null,e.tag===5&&(t=e.stateNode,t!==null&&(delete t[Ke],delete t[Sr],delete t[Si],delete t[Wp],delete t[Qp])),e.stateNode=null,e.return=null,e.dependencies=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.stateNode=null,e.updateQueue=null}function mf(e){return e.tag===5||e.tag===3||e.tag===4}function Ys(e){e:for(;;){for(;e.sibling===null;){if(e.return===null||mf(e.return))return null;e=e.return}for(e.sibling.return=e.return,e=e.sibling;e.tag!==5&&e.tag!==6&&e.tag!==18;){if(e.flags&2||e.child===null||e.tag===4)continue e;e.child.return=e,e=e.child}if(!(e.flags&2))return e.stateNode}}function Di(e,t,n){var r=e.tag;if(r===5||r===6)e=e.stateNode,t?n.nodeType===8?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(n.nodeType===8?(t=n.parentNode,t.insertBefore(e,n)):(t=n,t.appendChild(e)),n=n._reactRootContainer,n!=null||t.onclick!==null||(t.onclick=Nl));else if(r!==4&&(e=e.child,e!==null))for(Di(e,t,n),e=e.sibling;e!==null;)Di(e,t,n),e=e.sibling}function Mi(e,t,n){var r=e.tag;if(r===5||r===6)e=e.stateNode,t?n.insertBefore(e,t):n.appendChild(e);else if(r!==4&&(e=e.child,e!==null))for(Mi(e,t,n),e=e.sibling;e!==null;)Mi(e,t,n),e=e.sibling}var ne=null,Fe=!1;function ct(e,t,n){for(n=n.child;n!==null;)vf(e,t,n),n=n.sibling}function vf(e,t,n){if(Ge&&typeof Ge.onCommitFiberUnmount=="function")try{Ge.onCommitFiberUnmount(Gl,n)}catch{}switch(n.tag){case 5:se||pn(n,t);case 6:var r=ne,l=Fe;ne=null,ct(e,t,n),ne=r,Fe=l,ne!==null&&(Fe?(e=ne,n=n.stateNode,e.nodeType===8?e.parentNode.removeChild(n):e.removeChild(n)):ne.removeChild(n.stateNode));break;case 18:ne!==null&&(Fe?(e=ne,n=n.stateNode,e.nodeType===8?Oo(e.parentNode,n):e.nodeType===1&&Oo(e,n),mr(e)):Oo(ne,n.stateNode));break;case 4:r=ne,l=Fe,ne=n.stateNode.containerInfo,Fe=!0,ct(e,t,n),ne=r,Fe=l;break;case 0:case 11:case 14:case 15:if(!se&&(r=n.updateQueue,r!==null&&(r=r.lastEffect,r!==null))){l=r=r.next;do{var o=l,i=o.destroy;o=o.tag,i!==void 0&&(o&2||o&4)&&Ii(n,t,i),l=l.next}while(l!==r)}ct(e,t,n);break;case 1:if(!se&&(pn(n,t),r=n.stateNode,typeof r.componentWillUnmount=="function"))try{r.props=n.memoizedProps,r.state=n.memoizedState,r.componentWillUnmount()}catch(u){K(n,t,u)}ct(e,t,n);break;case 21:ct(e,t,n);break;case 22:n.mode&1?(se=(r=se)||n.memoizedState!==null,ct(e,t,n),se=r):ct(e,t,n);break;default:ct(e,t,n)}}function Ks(e){var t=e.updateQueue;if(t!==null){e.updateQueue=null;var n=e.stateNode;n===null&&(n=e.stateNode=new uh),t.forEach(function(r){var l=gh.bind(null,e,r);n.has(r)||(n.add(r),r.then(l,l))})}}function Me(e,t){var n=t.deletions;if(n!==null)for(var r=0;rl&&(l=i),r&=~o}if(r=l,r=G()-r,r=(120>r?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*ch(r/1960))-r,10e?16:e,gt===null)var r=!1;else{if(e=gt,gt=null,Ul=0,I&6)throw Error(S(331));var l=I;for(I|=4,_=e.current;_!==null;){var o=_,i=o.child;if(_.flags&16){var u=o.deletions;if(u!==null){for(var s=0;sG()-Iu?Ht(e,0):$u|=n),we(e,t)}function Cf(e,t){t===0&&(e.mode&1?(t=Hr,Hr<<=1,!(Hr&130023424)&&(Hr=4194304)):t=1);var n=fe();e=ot(e,t),e!==null&&(Rr(e,t,n),we(e,n))}function vh(e){var t=e.memoizedState,n=0;t!==null&&(n=t.retryLane),Cf(e,n)}function gh(e,t){var n=0;switch(e.tag){case 13:var r=e.stateNode,l=e.memoizedState;l!==null&&(n=l.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(S(314))}r!==null&&r.delete(t),Cf(e,n)}var _f;_f=function(e,t,n){if(e!==null)if(e.memoizedProps!==t.pendingProps||ge.current)me=!0;else{if(!(e.lanes&n)&&!(t.flags&128))return me=!1,lh(e,t,n);me=!!(e.flags&131072)}else me=!1,V&&t.flags&1048576&&Nc(t,Ll,t.index);switch(t.lanes=0,t.tag){case 2:var r=t.type;cl(e,t),e=t.pendingProps;var l=Cn(t,ae.current);Sn(t,n),l=Pu(null,t,r,e,l,n);var o=Nu();return t.flags|=1,typeof l=="object"&&l!==null&&typeof l.render=="function"&&l.$$typeof===void 0?(t.tag=1,t.memoizedState=null,t.updateQueue=null,ye(r)?(o=!0,Tl(t)):o=!1,t.memoizedState=l.state!==null&&l.state!==void 0?l.state:null,ku(t),l.updater=eo,t.stateNode=l,l._reactInternals=t,Pi(t,r,e,n),t=Ti(null,t,r,!0,o,n)):(t.tag=0,V&&o&&hu(t),ce(null,t,l,n),t=t.child),t;case 16:r=t.elementType;e:{switch(cl(e,t),e=t.pendingProps,l=r._init,r=l(r._payload),t.type=r,l=t.tag=wh(r),e=je(r,e),l){case 0:t=zi(null,t,r,e,n);break e;case 1:t=Hs(null,t,r,e,n);break e;case 11:t=Us(null,t,r,e,n);break e;case 14:t=Bs(null,t,r,je(r.type,e),n);break e}throw Error(S(306,r,""))}return t;case 0:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:je(r,l),zi(e,t,r,l,n);case 1:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:je(r,l),Hs(e,t,r,l,n);case 3:e:{if(sf(t),e===null)throw Error(S(387));r=t.pendingProps,o=t.memoizedState,l=o.element,Lc(e,t),Ol(t,r,null,n);var i=t.memoizedState;if(r=i.element,o.isDehydrated)if(o={element:r,isDehydrated:!1,cache:i.cache,pendingSuspenseBoundaries:i.pendingSuspenseBoundaries,transitions:i.transitions},t.updateQueue.baseState=o,t.memoizedState=o,t.flags&256){l=zn(Error(S(423)),t),t=Vs(e,t,r,n,l);break e}else if(r!==l){l=zn(Error(S(424)),t),t=Vs(e,t,r,n,l);break e}else for(Ee=kt(t.stateNode.containerInfo.firstChild),Ce=t,V=!0,Ae=null,n=Dc(t,null,r,n),t.child=n;n;)n.flags=n.flags&-3|4096,n=n.sibling;else{if(_n(),r===l){t=it(e,t,n);break e}ce(e,t,r,n)}t=t.child}return t;case 5:return Mc(t),e===null&&Ei(t),r=t.type,l=t.pendingProps,o=e!==null?e.memoizedProps:null,i=l.children,yi(r,l)?i=null:o!==null&&yi(r,o)&&(t.flags|=32),uf(e,t),ce(e,t,i,n),t.child;case 6:return e===null&&Ei(t),null;case 13:return af(e,t,n);case 4:return xu(t,t.stateNode.containerInfo),r=t.pendingProps,e===null?t.child=Pn(t,null,r,n):ce(e,t,r,n),t.child;case 11:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:je(r,l),Us(e,t,r,l,n);case 7:return ce(e,t,t.pendingProps,n),t.child;case 8:return ce(e,t,t.pendingProps.children,n),t.child;case 12:return ce(e,t,t.pendingProps.children,n),t.child;case 10:e:{if(r=t.type._context,l=t.pendingProps,o=t.memoizedProps,i=l.value,A($l,r._currentValue),r._currentValue=i,o!==null)if(Ve(o.value,i)){if(o.children===l.children&&!ge.current){t=it(e,t,n);break e}}else for(o=t.child,o!==null&&(o.return=t);o!==null;){var u=o.dependencies;if(u!==null){i=o.child;for(var s=u.firstContext;s!==null;){if(s.context===r){if(o.tag===1){s=nt(-1,n&-n),s.tag=2;var c=o.updateQueue;if(c!==null){c=c.shared;var m=c.pending;m===null?s.next=s:(s.next=m.next,m.next=s),c.pending=s}}o.lanes|=n,s=o.alternate,s!==null&&(s.lanes|=n),Ci(o.return,n,t),u.lanes|=n;break}s=s.next}}else if(o.tag===10)i=o.type===t.type?null:o.child;else if(o.tag===18){if(i=o.return,i===null)throw Error(S(341));i.lanes|=n,u=i.alternate,u!==null&&(u.lanes|=n),Ci(i,n,t),i=o.sibling}else i=o.child;if(i!==null)i.return=o;else for(i=o;i!==null;){if(i===t){i=null;break}if(o=i.sibling,o!==null){o.return=i.return,i=o;break}i=i.return}o=i}ce(e,t,l.children,n),t=t.child}return t;case 9:return l=t.type,r=t.pendingProps.children,Sn(t,n),l=$e(l),r=r(l),t.flags|=1,ce(e,t,r,n),t.child;case 14:return r=t.type,l=je(r,t.pendingProps),l=je(r.type,l),Bs(e,t,r,l,n);case 15:return lf(e,t,t.type,t.pendingProps,n);case 17:return r=t.type,l=t.pendingProps,l=t.elementType===r?l:je(r,l),cl(e,t),t.tag=1,ye(r)?(e=!0,Tl(t)):e=!1,Sn(t,n),Ic(t,r,l),Pi(t,r,l,n),Ti(null,t,r,!0,e,n);case 19:return cf(e,t,n);case 22:return of(e,t,n)}throw Error(S(156,t.tag))};function Pf(e,t){return Ja(e,t)}function yh(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function Re(e,t,n,r){return new yh(e,t,n,r)}function ju(e){return e=e.prototype,!(!e||!e.isReactComponent)}function wh(e){if(typeof e=="function")return ju(e)?1:0;if(e!=null){if(e=e.$$typeof,e===nu)return 11;if(e===ru)return 14}return 2}function _t(e,t){var n=e.alternate;return n===null?(n=Re(e.tag,t,e.key,e.mode),n.elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.subtreeFlags=0,n.deletions=null),n.flags=e.flags&14680064,n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=t===null?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function pl(e,t,n,r,l,o){var i=2;if(r=e,typeof e=="function")ju(e)&&(i=1);else if(typeof e=="string")i=5;else e:switch(e){case rn:return Vt(n.children,l,o,t);case tu:i=8,l|=8;break;case Zo:return e=Re(12,n,t,l|2),e.elementType=Zo,e.lanes=o,e;case Jo:return e=Re(13,n,t,l),e.elementType=Jo,e.lanes=o,e;case qo:return e=Re(19,n,t,l),e.elementType=qo,e.lanes=o,e;case Oa:return lo(n,l,o,t);default:if(typeof e=="object"&&e!==null)switch(e.$$typeof){case $a:i=10;break e;case Ia:i=9;break e;case nu:i=11;break e;case ru:i=14;break e;case dt:i=16,r=null;break e}throw Error(S(130,e==null?e:typeof e,""))}return t=Re(i,n,t,l),t.elementType=e,t.type=r,t.lanes=o,t}function Vt(e,t,n,r){return e=Re(7,e,r,t),e.lanes=n,e}function lo(e,t,n,r){return e=Re(22,e,r,t),e.elementType=Oa,e.lanes=n,e.stateNode={isHidden:!1},e}function Ho(e,t,n){return e=Re(6,e,null,t),e.lanes=n,e}function Vo(e,t,n){return t=Re(4,e.children!==null?e.children:[],e.key,t),t.lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function Sh(e,t,n,r,l){this.tag=t,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=Eo(0),this.expirationTimes=Eo(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=Eo(0),this.identifierPrefix=r,this.onRecoverableError=l,this.mutableSourceEagerHydrationData=null}function Fu(e,t,n,r,l,o,i,u,s){return e=new Sh(e,t,n,u,s),t===1?(t=1,o===!0&&(t|=8)):t=0,o=Re(3,null,null,t),e.current=o,o.stateNode=e,o.memoizedState={element:r,isDehydrated:n,cache:null,transitions:null,pendingSuspenseBoundaries:null},ku(o),e}function kh(e,t,n){var r=3"u"||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!="function"))try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(Rf)}catch(e){console.error(e)}}Rf(),Na.exports=Pe;var Ph=Na.exports,ta=Ph;Go.createRoot=ta.createRoot,Go.hydrateRoot=ta.hydrateRoot;var ve=function(){return ve=Object.assign||function(t){for(var n,r=1,l=arguments.length;r0?ee(Fn,--Oe):0,Ln--,X===10&&(Ln=1,co--),X}function He(){return X=Oe2||Hi(X)>3?"":" "}function Mh(e,t){for(;--t&&He()&&!(X<48||X>102||X>57&&X<65||X>70&&X<97););return po(e,ml()+(t<6&&Wt()==32&&He()==32))}function Vi(e){for(;He();)switch(X){case e:return Oe;case 34:case 39:e!==34&&e!==39&&Vi(X);break;case 40:e===41&&Vi(e);break;case 92:He();break}return Oe}function jh(e,t){for(;He()&&e+X!==47+10;)if(e+X===42+42&&Wt()===47)break;return"/*"+po(t,Oe-1)+"*"+Vu(e===47?e:He())}function Fh(e){for(;!Hi(Wt());)He();return po(e,Oe)}function Ah(e){return Oh(vl("",null,null,null,[""],e=Ih(e),0,[0],e))}function vl(e,t,n,r,l,o,i,u,s){for(var c=0,m=0,h=i,p=0,g=0,y=0,k=1,R=1,f=1,a=0,d="",v=l,E=o,x=r,w=d;R;)switch(y=a,a=He()){case 40:if(y!=108&&ee(w,h-1)==58){hl(w+=T(Wo(a),"&","&\f"),"&\f",If(c?u[c-1]:0))!=-1&&(f=-1);break}case 34:case 39:case 91:w+=Wo(a);break;case 9:case 10:case 13:case 32:w+=Dh(y);break;case 92:w+=Mh(ml()-1,7);continue;case 47:switch(Wt()){case 42:case 47:bn(Uh(jh(He(),ml()),t,n,s),s);break;default:w+="/"}break;case 123*k:u[c++]=Ye(w)*f;case 125*k:case 59:case 0:switch(a){case 0:case 125:R=0;case 59+m:f==-1&&(w=T(w,/\f/g,"")),g>0&&Ye(w)-h&&bn(g>32?la(w+";",r,n,h-1,s):la(T(w," ","")+";",r,n,h-2,s),s);break;case 59:w+=";";default:if(bn(x=ra(w,t,n,c,m,l,u,d,v=[],E=[],h,o),o),a===123)if(m===0)vl(w,t,x,x,v,o,h,u,E);else switch(p===99&&ee(w,3)===110?100:p){case 100:case 108:case 109:case 115:vl(e,x,x,r&&bn(ra(e,x,x,0,0,l,u,d,l,v=[],h,E),E),l,E,h,u,r?v:E);break;default:vl(w,x,x,x,[""],E,0,u,E)}}c=m=g=0,k=f=1,d=w="",h=i;break;case 58:h=1+Ye(w),g=y;default:if(k<1){if(a==123)--k;else if(a==125&&k++==0&&$h()==125)continue}switch(w+=Vu(a),a*k){case 38:f=m>0?1:(w+="\f",-1);break;case 44:u[c++]=(Ye(w)-1)*f,f=1;break;case 64:Wt()===45&&(w+=Wo(He())),p=Wt(),m=h=Ye(d=w+=Fh(ml())),a++;break;case 45:y===45&&Ye(w)==2&&(k=0)}}return o}function ra(e,t,n,r,l,o,i,u,s,c,m,h){for(var p=l-1,g=l===0?o:[""],y=Df(g),k=0,R=0,f=0;k0?g[a]+" "+d:T(d,/&\f/g,g[a])))&&(s[f++]=v);return fo(e,t,n,l===0?ao:u,s,c,m,h)}function Uh(e,t,n,r){return fo(e,t,n,Lf,Vu(Lh()),Rn(e,2,-2),0,r)}function la(e,t,n,r,l){return fo(e,t,n,Hu,Rn(e,0,r),Rn(e,r+1,-1),r,l)}function jf(e,t,n){switch(Th(e,t)){case 5103:return O+"print-"+e+e;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return O+e+e;case 4789:return ar+e+e;case 5349:case 4246:case 4810:case 6968:case 2756:return O+e+ar+e+B+e+e;case 5936:switch(ee(e,t+11)){case 114:return O+e+B+T(e,/[svh]\w+-[tblr]{2}/,"tb")+e;case 108:return O+e+B+T(e,/[svh]\w+-[tblr]{2}/,"tb-rl")+e;case 45:return O+e+B+T(e,/[svh]\w+-[tblr]{2}/,"lr")+e}case 6828:case 4268:case 2903:return O+e+B+e+e;case 6165:return O+e+B+"flex-"+e+e;case 5187:return O+e+T(e,/(\w+).+(:[^]+)/,O+"box-$1$2"+B+"flex-$1$2")+e;case 5443:return O+e+B+"flex-item-"+T(e,/flex-|-self/g,"")+(qe(e,/flex-|baseline/)?"":B+"grid-row-"+T(e,/flex-|-self/g,""))+e;case 4675:return O+e+B+"flex-line-pack"+T(e,/align-content|flex-|-self/g,"")+e;case 5548:return O+e+B+T(e,"shrink","negative")+e;case 5292:return O+e+B+T(e,"basis","preferred-size")+e;case 6060:return O+"box-"+T(e,"-grow","")+O+e+B+T(e,"grow","positive")+e;case 4554:return O+T(e,/([^-])(transform)/g,"$1"+O+"$2")+e;case 6187:return T(T(T(e,/(zoom-|grab)/,O+"$1"),/(image-set)/,O+"$1"),e,"")+e;case 5495:case 3959:return T(e,/(image-set\([^]*)/,O+"$1$`$1");case 4968:return T(T(e,/(.+:)(flex-)?(.*)/,O+"box-pack:$3"+B+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+O+e+e;case 4200:if(!qe(e,/flex-|baseline/))return B+"grid-column-align"+Rn(e,t)+e;break;case 2592:case 3360:return B+T(e,"template-","")+e;case 4384:case 3616:return n&&n.some(function(r,l){return t=l,qe(r.props,/grid-\w+-end/)})?~hl(e+(n=n[t].value),"span",0)?e:B+T(e,"-start","")+e+B+"grid-row-span:"+(~hl(n,"span",0)?qe(n,/\d+/):+qe(n,/\d+/)-+qe(e,/\d+/))+";":B+T(e,"-start","")+e;case 4896:case 4128:return n&&n.some(function(r){return qe(r.props,/grid-\w+-start/)})?e:B+T(T(e,"-end","-span"),"span ","")+e;case 4095:case 3583:case 4068:case 2532:return T(e,/(.+)-inline(.+)/,O+"$1$2")+e;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(Ye(e)-1-t>6)switch(ee(e,t+1)){case 109:if(ee(e,t+4)!==45)break;case 102:return T(e,/(.+:)(.+)-([^]+)/,"$1"+O+"$2-$3$1"+ar+(ee(e,t+3)==108?"$3":"$2-$3"))+e;case 115:return~hl(e,"stretch",0)?jf(T(e,"stretch","fill-available"),t,n)+e:e}break;case 5152:case 5920:return T(e,/(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/,function(r,l,o,i,u,s,c){return B+l+":"+o+c+(i?B+l+"-span:"+(u?s:+s-+o)+c:"")+e});case 4949:if(ee(e,t+6)===121)return T(e,":",":"+O)+e;break;case 6444:switch(ee(e,ee(e,14)===45?18:11)){case 120:return T(e,/(.+:)([^;\s!]+)(;|(\s+)?!.+)?/,"$1"+O+(ee(e,14)===45?"inline-":"")+"box$3$1"+O+"$2$3$1"+B+"$2box$3")+e;case 100:return T(e,":",":"+B)+e}break;case 5719:case 2647:case 2135:case 3927:case 2391:return T(e,"scroll-","scroll-snap-")+e}return e}function Wl(e,t){for(var n="",r=0;r-1&&!e.return)switch(e.type){case Hu:e.return=jf(e.value,e.length,n);return;case $f:return Wl([ft(e,{value:T(e.value,"@","@"+O)})],r);case ao:if(e.length)return Rh(n=e.props,function(l){switch(qe(l,r=/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":tn(ft(e,{props:[T(l,/:(read-\w+)/,":"+ar+"$1")]})),tn(ft(e,{props:[l]})),Bi(e,{props:na(n,r)});break;case"::placeholder":tn(ft(e,{props:[T(l,/:(plac\w+)/,":"+O+"input-$1")]})),tn(ft(e,{props:[T(l,/:(plac\w+)/,":"+ar+"$1")]})),tn(ft(e,{props:[T(l,/:(plac\w+)/,B+"input-$1")]})),tn(ft(e,{props:[l]})),Bi(e,{props:na(n,r)});break}return""})}}var Qh={animationIterationCount:1,aspectRatio:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1},$n=typeof process<"u"&&process.env!==void 0&&({}.REACT_APP_SC_ATTR||{}.SC_ATTR)||"data-styled",Ff="active",Af="data-styled-version",ho="6.1.13",Wu=`/*!sc*/ +`,Ql=typeof window<"u"&&"HTMLElement"in window,Yh=!!(typeof SC_DISABLE_SPEEDY=="boolean"?SC_DISABLE_SPEEDY:typeof process<"u"&&process.env!==void 0&&{}.REACT_APP_SC_DISABLE_SPEEDY!==void 0&&{}.REACT_APP_SC_DISABLE_SPEEDY!==""?{}.REACT_APP_SC_DISABLE_SPEEDY!=="false"&&{}.REACT_APP_SC_DISABLE_SPEEDY:typeof process<"u"&&process.env!==void 0&&{}.SC_DISABLE_SPEEDY!==void 0&&{}.SC_DISABLE_SPEEDY!==""&&{}.SC_DISABLE_SPEEDY!=="false"&&{}.SC_DISABLE_SPEEDY),mo=Object.freeze([]),In=Object.freeze({});function Kh(e,t,n){return n===void 0&&(n=In),e.theme!==n.theme&&e.theme||t||n.theme}var Uf=new Set(["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","track","u","ul","use","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"]),Gh=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,Xh=/(^-|-$)/g;function oa(e){return e.replace(Gh,"-").replace(Xh,"")}var Zh=/(a)(d)/gi,el=52,ia=function(e){return String.fromCharCode(e+(e>25?39:97))};function Wi(e){var t,n="";for(t=Math.abs(e);t>el;t=t/el|0)n=ia(t%el)+n;return(ia(t%el)+n).replace(Zh,"$1-$2")}var Qo,Bf=5381,mn=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},Hf=function(e){return mn(Bf,e)};function Jh(e){return Wi(Hf(e)>>>0)}function qh(e){return e.displayName||e.name||"Component"}function Yo(e){return typeof e=="string"&&!0}var Vf=typeof Symbol=="function"&&Symbol.for,Wf=Vf?Symbol.for("react.memo"):60115,bh=Vf?Symbol.for("react.forward_ref"):60112,em={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},tm={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},Qf={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},nm=((Qo={})[bh]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},Qo[Wf]=Qf,Qo);function ua(e){return("type"in(t=e)&&t.type.$$typeof)===Wf?Qf:"$$typeof"in e?nm[e.$$typeof]:em;var t}var rm=Object.defineProperty,lm=Object.getOwnPropertyNames,sa=Object.getOwnPropertySymbols,om=Object.getOwnPropertyDescriptor,im=Object.getPrototypeOf,aa=Object.prototype;function Yf(e,t,n){if(typeof t!="string"){if(aa){var r=im(t);r&&r!==aa&&Yf(e,r,n)}var l=lm(t);sa&&(l=l.concat(sa(t)));for(var o=ua(e),i=ua(t),u=0;u0?" Args: ".concat(t.join(", ")):""))}var um=function(){function e(t){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=t}return e.prototype.indexOfGroup=function(t){for(var n=0,r=0;r=this.groupSizes.length){for(var r=this.groupSizes,l=r.length,o=l;t>=o;)if((o<<=1)<0)throw Or(16,"".concat(t));this.groupSizes=new Uint32Array(o),this.groupSizes.set(r),this.length=o;for(var i=l;i=this.length||this.groupSizes[t]===0)return n;for(var r=this.groupSizes[t],l=this.indexOfGroup(t),o=l+r,i=l;i=0){var r=document.createTextNode(n);return this.element.insertBefore(r,this.nodes[t]||null),this.length++,!0}return!1},e.prototype.deleteRule=function(t){this.element.removeChild(this.nodes[t]),this.length--},e.prototype.getRule=function(t){return t0&&(R+="".concat(f,","))}),s+="".concat(y).concat(k,'{content:"').concat(R,'"}').concat(Wu)},m=0;m0?".".concat(t):p},m=s.slice();m.push(function(p){p.type===ao&&p.value.includes("&")&&(p.props[0]=p.props[0].replace(ym,n).replace(r,c))}),i.prefix&&m.push(Wh),m.push(Bh);var h=function(p,g,y,k){g===void 0&&(g=""),y===void 0&&(y=""),k===void 0&&(k="&"),t=k,n=g,r=new RegExp("\\".concat(n,"\\b"),"g");var R=p.replace(wm,""),f=Ah(y||g?"".concat(y," ").concat(g," { ").concat(R," }"):R);i.namespace&&(f=Xf(f,i.namespace));var a=[];return Wl(f,Hh(m.concat(Vh(function(d){return a.push(d)})))),a};return h.hash=s.length?s.reduce(function(p,g){return g.name||Or(15),mn(p,g.name)},Bf).toString():"",h}var km=new Gf,Yi=Sm(),Zf=xn.createContext({shouldForwardProp:void 0,styleSheet:km,stylis:Yi});Zf.Consumer;xn.createContext(void 0);function pa(){return Tr.useContext(Zf)}var xm=function(){function e(t,n){var r=this;this.inject=function(l,o){o===void 0&&(o=Yi);var i=r.name+o.hash;l.hasNameForId(r.id,i)||l.insertRules(r.id,i,o(r.rules,i,"@keyframes"))},this.name=t,this.id="sc-keyframes-".concat(t),this.rules=n,Yu(this,function(){throw Or(12,String(r.name))})}return e.prototype.getName=function(t){return t===void 0&&(t=Yi),this.name+t.hash},e}(),Em=function(e){return e>="A"&&e<="Z"};function ha(e){for(var t="",n=0;n>>0);if(!n.hasNameForId(this.componentId,i)){var u=r(o,".".concat(i),void 0,this.componentId);n.insertRules(this.componentId,i,u)}l=Bt(l,i),this.staticRulesId=i}else{for(var s=mn(this.baseHash,r.hash),c="",m=0;m>>0);n.hasNameForId(this.componentId,g)||n.insertRules(this.componentId,g,r(c,".".concat(g),void 0,this.componentId)),l=Bt(l,g)}}return l},e}(),bf=xn.createContext(void 0);bf.Consumer;var Ko={};function Nm(e,t,n){var r=Qu(e),l=e,o=!Yo(e),i=t.attrs,u=i===void 0?mo:i,s=t.componentId,c=s===void 0?function(v,E){var x=typeof v!="string"?"sc":oa(v);Ko[x]=(Ko[x]||0)+1;var w="".concat(x,"-").concat(Jh(ho+x+Ko[x]));return E?"".concat(E,"-").concat(w):w}(t.displayName,t.parentComponentId):s,m=t.displayName,h=m===void 0?function(v){return Yo(v)?"styled.".concat(v):"Styled(".concat(qh(v),")")}(e):m,p=t.displayName&&t.componentId?"".concat(oa(t.displayName),"-").concat(t.componentId):t.componentId||c,g=r&&l.attrs?l.attrs.concat(u).filter(Boolean):u,y=t.shouldForwardProp;if(r&&l.shouldForwardProp){var k=l.shouldForwardProp;if(t.shouldForwardProp){var R=t.shouldForwardProp;y=function(v,E){return k(v,E)&&R(v,E)}}else y=k}var f=new Pm(n,p,r?l.componentStyle:void 0);function a(v,E){return function(x,w,P){var F=x.attrs,L=x.componentStyle,Se=x.defaultProps,Lt=x.foldedComponentIds,$t=x.styledComponentId,Dr=x.target,vo=xn.useContext(bf),An=pa(),It=x.shouldForwardProp||An.shouldForwardProp,C=Kh(w,vo,Se)||In,N=function(st,ke,Ze){for(var Un,Dt=ve(ve({},ke),{className:void 0,theme:Ze}),go=0;go{const e=userStore(t=>t.title);return ue.jsxs(Tm,{children:[ue.jsx("i",{className:"fa fa-check"})," ",e]})},Lm=bt.div` + padding: 50px; + max-width: 500px; + margin: 0 auto; + background: white; + border-radius: 5px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); + position: relative; + + &:before { + content: ""; + position: absolute; + z-index: -1; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); + top: 50%; + bottom: 0; + left: 10px; + right: 10px; + border-radius: 100px / 10px; + } +`,$m=bt.div` + margin-top: 1rem; +`,Im=bt.div` + display: block; + position: relative; + padding-left: 35px; + margin-bottom: 10px; + box-shadow: 0 2px 0 -1px #ebebeb; + + &:last-of-type { + box-shadow: none; + } + + input[type="checkbox"] { + position: absolute; + height: 0; + width: 0; + opacity: 0; + } + + label { + display: inline-block; + font-weight: 200; + padding: 10px 5px; + position: relative; + + &:before { + content: ""; + position: absolute; + top: calc(50% + 2px); + left: 0; + width: 0%; + height: 1px; + background: #cd4400; + transition: 0.25s ease-in-out; + } + + &:after { + content: ""; + position: absolute; + z-index: 0; + height: 18px; + width: 18px; + top: 9px; + left: -25px; + box-shadow: inset 0 0 0 2px #d8d8d8; + border-radius: 4px; + transition: 0.25s ease-in-out; + } + + .fa-check { + position: absolute; + z-index: 1; + left: -31px; + top: 0; + font-size: 1px; + line-height: 36px; + width: 36px; + height: 36px; + text-align: center; + color: transparent; + text-shadow: 1px 1px 0 white, -1px -1px 0 white; + } + } + + input:checked + label { + color: #717171; + + &:before { + width: 100%; + } + + &:after { + box-shadow: inset 0 0 0 2px #0eb0b7; + } + + .fa-check { + font-size: 20px; + line-height: 35px; + color: #0eb0b7; + } + } +`,Om=bt.input` + border: none; + outline: none; + font-weight: 200; + position: relative; + margin: 0; + padding: 10px; + width: 100%; + border: 1px solid #ccc; + border-radius: 4px; +`,Dm=bt.div` + margin-top: 20px; + padding: 0.8rem 1.2rem; + background-color: #fd6f00; + color: white; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + font-weight: 200; + transition: 0.25s; + + &:hover { + background-color: #e65c00; + } + + i { + margin-right: 5px; + } +`,Mm=()=>ue.jsxs(Lm,{children:[ue.jsx(Rm,{}),ue.jsx($m,{children:ue.jsxs(Im,{children:[ue.jsx("input",{type:"checkbox",id:"example-task"}),ue.jsxs("label",{htmlFor:"example-task",children:[ue.jsx("i",{className:"fa fa-check"})," Do this"]})]})}),ue.jsx(Om,{type:"text",placeholder:"Write a task..."}),ue.jsxs(Dm,{children:[ue.jsx("i",{className:"fa fa-plus"})," Add Task"]})]}),jm=()=>ue.jsxs("div",{children:[ue.jsx(Mm,{})," "]});Go.createRoot(document.getElementById("root")).render(ue.jsx(xn.StrictMode,{children:ue.jsx(jm,{})})); diff --git a/dist/assets/index-feb71f98.css b/dist/assets/index-feb71f98.css new file mode 100644 index 00000000..140b42ab --- /dev/null +++ b/dist/assets/index-feb71f98.css @@ -0,0 +1 @@ +*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f8f8f8;color:#454545}h1{text-align:center;font-size:30px;font-weight:200;margin:0}h1 i{color:#0eb0b7} diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 00000000..e3d2e96f --- /dev/null +++ b/dist/index.html @@ -0,0 +1,14 @@ + + + + + + Todos App Context API + + + + +
+ + + diff --git a/index.html b/index.html index 09bcfb14..5f35f35d 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,10 @@ - Todos App Context API + + Johanna's checklists
diff --git a/package-lock.json b/package-lock.json index 5c1b936d..47ad3bc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,14 +8,19 @@ "name": "project-todos-context", "version": "0.0.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.7.1", + "@fortawesome/free-solid-svg-icons": "^6.7.1", + "@fortawesome/react-fontawesome": "^0.2.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.18.0" + "react-router-dom": "^6.28.0", + "styled-components": "^6.1.13", + "zustand": "^5.0.1" }, "devDependencies": { "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", - "@vitejs/plugin-react": "^4.0.3", + "@vitejs/plugin-react": "^4.3.3", "eslint": "^8.45.0", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", @@ -32,31 +37,38 @@ } }, "node_modules/@ampproject/remapping": { - "version": "2.2.1", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", + "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@jridgewell/gen-mapping": "^0.3.0", - "@jridgewell/trace-mapping": "^0.3.9" + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" }, "engines": { "node": ">=6.0.0" } }, "node_modules/@babel/code-frame": { - "version": "7.22.13", + "version": "7.26.2", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", + "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", "dev": true, "license": "MIT", "dependencies": { - "@babel/highlight": "^7.22.13", - "chalk": "^2.4.2" + "@babel/helper-validator-identifier": "^7.25.9", + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/compat-data": { - "version": "7.23.3", + "version": "7.26.2", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz", + "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==", "dev": true, "license": "MIT", "engines": { @@ -64,20 +76,22 @@ } }, "node_modules/@babel/core": { - "version": "7.23.3", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz", + "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==", "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "^2.2.0", - "@babel/code-frame": "^7.22.13", - "@babel/generator": "^7.23.3", - "@babel/helper-compilation-targets": "^7.22.15", - "@babel/helper-module-transforms": "^7.23.3", - "@babel/helpers": "^7.23.2", - "@babel/parser": "^7.23.3", - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.3", - "@babel/types": "^7.23.3", + "@babel/code-frame": "^7.26.0", + "@babel/generator": "^7.26.0", + "@babel/helper-compilation-targets": "^7.25.9", + "@babel/helper-module-transforms": "^7.26.0", + "@babel/helpers": "^7.26.0", + "@babel/parser": "^7.26.0", + "@babel/template": "^7.25.9", + "@babel/traverse": "^7.25.9", + "@babel/types": "^7.26.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -93,27 +107,32 @@ } }, "node_modules/@babel/generator": { - "version": "7.23.3", + "version": "7.26.2", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz", + "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/types": "^7.23.3", - "@jridgewell/gen-mapping": "^0.3.2", - "@jridgewell/trace-mapping": "^0.3.17", - "jsesc": "^2.5.1" + "@babel/parser": "^7.26.2", + "@babel/types": "^7.26.0", + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25", + "jsesc": "^3.0.2" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.22.15", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz", + "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==", "dev": true, "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.22.9", - "@babel/helper-validator-option": "^7.22.15", - "browserslist": "^4.21.9", + "@babel/compat-data": "^7.25.9", + "@babel/helper-validator-option": "^7.25.9", + "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" }, @@ -121,58 +140,30 @@ "node": ">=6.9.0" } }, - "node_modules/@babel/helper-environment-visitor": { - "version": "7.22.20", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-function-name": { - "version": "7.23.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/template": "^7.22.15", - "@babel/types": "^7.23.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-hoist-variables": { - "version": "7.22.5", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/types": "^7.22.5" - }, - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@babel/helper-module-imports": { - "version": "7.22.15", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz", + "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/types": "^7.22.15" + "@babel/traverse": "^7.25.9", + "@babel/types": "^7.25.9" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.23.3", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz", + "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-environment-visitor": "^7.22.20", - "@babel/helper-module-imports": "^7.22.15", - "@babel/helper-simple-access": "^7.22.5", - "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/helper-validator-identifier": "^7.22.20" + "@babel/helper-module-imports": "^7.25.9", + "@babel/helper-validator-identifier": "^7.25.9", + "@babel/traverse": "^7.25.9" }, "engines": { "node": ">=6.9.0" @@ -182,37 +173,19 @@ } }, "node_modules/@babel/helper-plugin-utils": { - "version": "7.22.5", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz", + "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==", "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" } }, - "node_modules/@babel/helper-simple-access": { - "version": "7.22.5", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/types": "^7.22.5" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-split-export-declaration": { - "version": "7.22.6", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/types": "^7.22.5" - }, - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@babel/helper-string-parser": { - "version": "7.22.5", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz", + "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==", "dev": true, "license": "MIT", "engines": { @@ -220,7 +193,9 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.22.20", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", + "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", "dev": true, "license": "MIT", "engines": { @@ -228,7 +203,9 @@ } }, "node_modules/@babel/helper-validator-option": { - "version": "7.22.15", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz", + "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==", "dev": true, "license": "MIT", "engines": { @@ -236,35 +213,28 @@ } }, "node_modules/@babel/helpers": { - "version": "7.23.2", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz", + "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.2", - "@babel/types": "^7.23.0" + "@babel/template": "^7.25.9", + "@babel/types": "^7.26.0" }, "engines": { "node": ">=6.9.0" } }, - "node_modules/@babel/highlight": { - "version": "7.22.20", + "node_modules/@babel/parser": { + "version": "7.26.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz", + "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.22.20", - "chalk": "^2.4.2", - "js-tokens": "^4.0.0" + "@babel/types": "^7.26.0" }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/parser": { - "version": "7.23.3", - "dev": true, - "license": "MIT", "bin": { "parser": "bin/babel-parser.js" }, @@ -273,11 +243,13 @@ } }, "node_modules/@babel/plugin-transform-react-jsx-self": { - "version": "7.23.3", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz", + "integrity": "sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.25.9" }, "engines": { "node": ">=6.9.0" @@ -287,11 +259,13 @@ } }, "node_modules/@babel/plugin-transform-react-jsx-source": { - "version": "7.23.3", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz", + "integrity": "sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.25.9" }, "engines": { "node": ">=6.9.0" @@ -301,32 +275,33 @@ } }, "node_modules/@babel/template": { - "version": "7.22.15", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz", + "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.22.13", - "@babel/parser": "^7.22.15", - "@babel/types": "^7.22.15" + "@babel/code-frame": "^7.25.9", + "@babel/parser": "^7.25.9", + "@babel/types": "^7.25.9" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.23.3", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz", + "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.22.13", - "@babel/generator": "^7.23.3", - "@babel/helper-environment-visitor": "^7.22.20", - "@babel/helper-function-name": "^7.23.0", - "@babel/helper-hoist-variables": "^7.22.5", - "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.23.3", - "@babel/types": "^7.23.3", - "debug": "^4.1.0", + "@babel/code-frame": "^7.25.9", + "@babel/generator": "^7.25.9", + "@babel/parser": "^7.25.9", + "@babel/template": "^7.25.9", + "@babel/types": "^7.25.9", + "debug": "^4.3.1", "globals": "^11.1.0" }, "engines": { @@ -334,18 +309,40 @@ } }, "node_modules/@babel/types": { - "version": "7.23.3", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz", + "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.22.5", - "@babel/helper-validator-identifier": "^7.22.20", - "to-fast-properties": "^2.0.0" + "@babel/helper-string-parser": "^7.25.9", + "@babel/helper-validator-identifier": "^7.25.9" }, "engines": { "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "license": "MIT" + }, "node_modules/@esbuild/darwin-arm64": { "version": "0.18.20", "cpu": [ @@ -427,6 +424,52 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.1.tgz", + "integrity": "sha512-gbDz3TwRrIPT3i0cDfujhshnXO9z03IT1UKRIVi/VEjpNHtSBIP2o5XSm+e816FzzCFEzAxPw09Z13n20PaQJQ==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.1.tgz", + "integrity": "sha512-8dBIHbfsKlCk2jHQ9PoRBg2Z+4TwyE3vZICSnoDlnsHA6SiMlTwfmW6yX0lHsRmWJugkeb92sA0hZdkXJhuz+g==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.1.tgz", + "integrity": "sha512-BTKc0b0mgjWZ2UDKVgmwaE0qt0cZs6ITcDgjrti5f/ki7aF5zs+N91V6hitGo3TItCFtnKg6cUVGdTmBFICFRg==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "dev": true, @@ -458,20 +501,24 @@ "license": "BSD-3-Clause" }, "node_modules/@jridgewell/gen-mapping": { - "version": "0.3.3", + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", + "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", "dev": true, "license": "MIT", "dependencies": { - "@jridgewell/set-array": "^1.0.1", + "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.9" + "@jridgewell/trace-mapping": "^0.3.24" }, "engines": { "node": ">=6.0.0" } }, "node_modules/@jridgewell/resolve-uri": { - "version": "3.1.1", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", "dev": true, "license": "MIT", "engines": { @@ -479,7 +526,9 @@ } }, "node_modules/@jridgewell/set-array": { - "version": "1.1.2", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", "dev": true, "license": "MIT", "engines": { @@ -487,12 +536,16 @@ } }, "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.15", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.20", + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", "dev": true, "license": "MIT", "dependencies": { @@ -533,14 +586,18 @@ } }, "node_modules/@remix-run/router": { - "version": "1.11.0", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", + "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", "license": "MIT", "engines": { "node": ">=14.0.0" } }, "node_modules/@types/babel__core": { - "version": "7.20.4", + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", + "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", "dev": true, "license": "MIT", "dependencies": { @@ -552,7 +609,9 @@ } }, "node_modules/@types/babel__generator": { - "version": "7.6.7", + "version": "7.6.8", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz", + "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==", "dev": true, "license": "MIT", "dependencies": { @@ -561,6 +620,8 @@ }, "node_modules/@types/babel__template": { "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", + "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", "dev": true, "license": "MIT", "dependencies": { @@ -569,7 +630,9 @@ } }, "node_modules/@types/babel__traverse": { - "version": "7.20.4", + "version": "7.20.6", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz", + "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==", "dev": true, "license": "MIT", "dependencies": { @@ -578,12 +641,12 @@ }, "node_modules/@types/prop-types": { "version": "15.7.10", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.2.37", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -601,7 +664,13 @@ }, "node_modules/@types/scheduler": { "version": "0.16.6", - "dev": true, + "devOptional": true, + "license": "MIT" + }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", "license": "MIT" }, "node_modules/@ungap/structured-clone": { @@ -610,21 +679,23 @@ "license": "ISC" }, "node_modules/@vitejs/plugin-react": { - "version": "4.1.1", + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz", + "integrity": "sha512-NooDe9GpHGqNns1i8XDERg0Vsg5SSYRhRxxyTGogUdkdNt47jal+fbuYi+Yfq6pzRCKXyoPcWisfxE6RIM3GKA==", "dev": true, "license": "MIT", "dependencies": { - "@babel/core": "^7.23.2", - "@babel/plugin-transform-react-jsx-self": "^7.22.5", - "@babel/plugin-transform-react-jsx-source": "^7.22.5", - "@types/babel__core": "^7.20.3", - "react-refresh": "^0.14.0" + "@babel/core": "^7.25.2", + "@babel/plugin-transform-react-jsx-self": "^7.24.7", + "@babel/plugin-transform-react-jsx-source": "^7.24.7", + "@types/babel__core": "^7.20.5", + "react-refresh": "^0.14.2" }, "engines": { "node": "^14.18.0 || >=16.0.0" }, "peerDependencies": { - "vite": "^4.2.0" + "vite": "^4.2.0 || ^5.0.0" } }, "node_modules/acorn": { @@ -669,17 +740,6 @@ "node": ">=8" } }, - "node_modules/ansi-styles": { - "version": "3.2.1", - "dev": true, - "license": "MIT", - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/argparse": { "version": "2.0.1", "dev": true, @@ -815,7 +875,9 @@ } }, "node_modules/browserslist": { - "version": "4.22.1", + "version": "4.24.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz", + "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==", "dev": true, "funding": [ { @@ -833,10 +895,10 @@ ], "license": "MIT", "dependencies": { - "caniuse-lite": "^1.0.30001541", - "electron-to-chromium": "^1.4.535", - "node-releases": "^2.0.13", - "update-browserslist-db": "^1.0.13" + "caniuse-lite": "^1.0.30001669", + "electron-to-chromium": "^1.5.41", + "node-releases": "^2.0.18", + "update-browserslist-db": "^1.1.1" }, "bin": { "browserslist": "cli.js" @@ -866,8 +928,19 @@ "node": ">=6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { - "version": "1.0.30001561", + "version": "1.0.30001684", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001684.tgz", + "integrity": "sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==", "dev": true, "funding": [ { @@ -885,32 +958,6 @@ ], "license": "CC-BY-4.0" }, - "node_modules/chalk": { - "version": "2.4.2", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/color-convert": { - "version": "1.9.3", - "dev": true, - "license": "MIT", - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/color-name": { - "version": "1.1.3", - "dev": true, - "license": "MIT" - }, "node_modules/concat-map": { "version": "0.0.1", "dev": true, @@ -918,6 +965,8 @@ }, "node_modules/convert-source-map": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true, "license": "MIT" }, @@ -934,9 +983,30 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "license": "MIT", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/csstype": { - "version": "3.1.2", - "dev": true, + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "license": "MIT" }, "node_modules/debug": { @@ -1001,7 +1071,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.579", + "version": "1.5.64", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz", + "integrity": "sha512-IXEuxU+5ClW2IGEYFC2T7szbyVgehupCWQe5GNh+H065CD6U6IFN0s4KeAMFGNmQolRU4IV7zGBWSYMmZ8uuqQ==", "dev": true, "license": "ISC" }, @@ -1152,21 +1224,15 @@ } }, "node_modules/escalade": { - "version": "3.1.1", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", "dev": true, "license": "MIT", "engines": { "node": ">=6" } }, - "node_modules/escape-string-regexp": { - "version": "1.0.5", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/eslint": { "version": "8.53.0", "dev": true, @@ -1576,6 +1642,8 @@ }, "node_modules/gensync": { "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", "dev": true, "license": "MIT", "engines": { @@ -1643,6 +1711,8 @@ }, "node_modules/globals": { "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", "dev": true, "license": "MIT", "engines": { @@ -1687,14 +1757,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/has-flag": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4" - } - }, "node_modules/has-property-descriptors": { "version": "1.0.1", "dev": true, @@ -2130,14 +2192,16 @@ } }, "node_modules/jsesc": { - "version": "2.5.2", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz", + "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==", "dev": true, "license": "MIT", "bin": { "jsesc": "bin/jsesc" }, "engines": { - "node": ">=4" + "node": ">=6" } }, "node_modules/json-buffer": { @@ -2157,6 +2221,8 @@ }, "node_modules/json5": { "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "dev": true, "license": "MIT", "bin": { @@ -2231,6 +2297,8 @@ }, "node_modules/lru-cache": { "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", "dev": true, "license": "ISC", "dependencies": { @@ -2255,7 +2323,6 @@ }, "node_modules/nanoid": { "version": "3.3.7", - "dev": true, "funding": [ { "type": "github", @@ -2276,13 +2343,14 @@ "license": "MIT" }, "node_modules/node-releases": { - "version": "2.0.13", + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", + "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", "dev": true, "license": "MIT" }, "node_modules/object-assign": { "version": "4.1.1", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -2471,13 +2539,15 @@ "license": "MIT" }, "node_modules/picocolors": { - "version": "1.0.0", - "dev": true, + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", "license": "ISC" }, "node_modules/postcss": { - "version": "8.4.31", - "dev": true, + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", "funding": [ { "type": "opencollective", @@ -2494,14 +2564,20 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.6", + "nanoid": "^3.3.7", "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "license": "MIT" + }, "node_modules/prelude-ls": { "version": "1.2.1", "dev": true, @@ -2512,7 +2588,6 @@ }, "node_modules/prop-types": { "version": "15.8.1", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -2570,11 +2645,12 @@ }, "node_modules/react-is": { "version": "16.13.1", - "dev": true, "license": "MIT" }, "node_modules/react-refresh": { - "version": "0.14.0", + "version": "0.14.2", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", + "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==", "dev": true, "license": "MIT", "engines": { @@ -2582,10 +2658,12 @@ } }, "node_modules/react-router": { - "version": "6.18.0", + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", + "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.11.0" + "@remix-run/router": "1.21.0" }, "engines": { "node": ">=14.0.0" @@ -2595,11 +2673,13 @@ } }, "node_modules/react-router-dom": { - "version": "6.18.0", + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", + "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.11.0", - "react-router": "6.18.0" + "@remix-run/router": "1.21.0", + "react-router": "6.28.0" }, "engines": { "node": ">=14.0.0" @@ -2800,6 +2880,12 @@ "node": ">= 0.4" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "dev": true, @@ -2833,8 +2919,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "dev": true, + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -2923,17 +3010,40 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/supports-color": { - "version": "5.5.0", - "dev": true, + "node_modules/styled-components": { + "version": "6.1.13", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz", + "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==", "license": "MIT", "dependencies": { - "has-flag": "^3.0.0" + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" }, "engines": { - "node": ">=4" + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" } }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", + "license": "MIT" + }, "node_modules/supports-preserve-symlinks-flag": { "version": "1.0.0", "dev": true, @@ -2950,13 +3060,11 @@ "dev": true, "license": "MIT" }, - "node_modules/to-fast-properties": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4" - } + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "license": "0BSD" }, "node_modules/type-check": { "version": "0.4.0", @@ -3056,7 +3164,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.0.13", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", + "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==", "dev": true, "funding": [ { @@ -3074,8 +3184,8 @@ ], "license": "MIT", "dependencies": { - "escalade": "^3.1.1", - "picocolors": "^1.0.0" + "escalade": "^3.2.0", + "picocolors": "^1.1.0" }, "bin": { "update-browserslist-db": "cli.js" @@ -3240,6 +3350,8 @@ }, "node_modules/yallist": { "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true, "license": "ISC" }, @@ -3253,6 +3365,35 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.1.tgz", + "integrity": "sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==", + "license": "MIT", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "@types/react": ">=18.0.0", + "immer": ">=9.0.6", + "react": ">=18.0.0", + "use-sync-external-store": ">=1.2.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + }, + "use-sync-external-store": { + "optional": true + } + } } } } diff --git a/package.json b/package.json index a23290e8..2c06da1c 100644 --- a/package.json +++ b/package.json @@ -10,14 +10,19 @@ "preview": "vite preview" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.7.1", + "@fortawesome/free-solid-svg-icons": "^6.7.1", + "@fortawesome/react-fontawesome": "^0.2.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.18.0" + "react-router-dom": "^6.28.0", + "styled-components": "^6.1.13", + "zustand": "^5.0.1" }, "devDependencies": { "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", - "@vitejs/plugin-react": "^4.0.3", + "@vitejs/plugin-react": "^4.3.3", "eslint": "^8.45.0", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", diff --git a/src/App.jsx b/src/App.jsx index 496ab1b1..70ab124a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,12 @@ -export const App = () => { - return
Find me in App.jsx!
; +import { BrowserRouter, Routes } from "react-router-dom"; +import AppRoutes from "./routes/AppRoutes"; + +const App = () => { + return ( + + {AppRoutes} + + ); }; + +export default App; diff --git a/src/assets/GitHub-logo.png b/src/assets/GitHub-logo.png new file mode 100644 index 00000000..3cc25fd9 Binary files /dev/null and b/src/assets/GitHub-logo.png differ diff --git a/src/components/Buttons/AddTaskButton.jsx b/src/components/Buttons/AddTaskButton.jsx new file mode 100644 index 00000000..1de8023c --- /dev/null +++ b/src/components/Buttons/AddTaskButton.jsx @@ -0,0 +1,49 @@ +/** + * This styled component for the Add task button. + * + * The onClick prop lets the parent component define what will happen when the button is clicked. + */ + +import styled from "styled-components"; + +// Styled component for the Add Task button +const StyledAddTaskButton = styled.button` + margin-top: 20px; + padding: 0.8rem 1.2rem; + background-color: #f8f8f8; + color: #4a4a4a; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + font-weight: 200; + transition: background-color 0.25s ease-in-out; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + + &:hover { + color: #3b8c40; + } + + &::before { + content: "+"; // Add plus symbol + font-size: 18px; + font-weight: bold; + margin-right: 5px; + } + + @media (max-width: 1024px) { + opacity: 1; // The button is by default visible on tablets and mobile. + color: #3b8c40; + } +`; + +const AddTaskButton = ({ onClick }) => ( + + Add Task + +); + +export default AddTaskButton; diff --git a/src/components/Buttons/DeleteButton.jsx b/src/components/Buttons/DeleteButton.jsx new file mode 100644 index 00000000..1f37aff3 --- /dev/null +++ b/src/components/Buttons/DeleteButton.jsx @@ -0,0 +1,46 @@ +/** + * This component is for the button that deletes tasks from the list. + * + * The onClick prop lets the parent component define what will happen when the button is clicked. + * + * Includes hover effects for desktop, but for screens smaller than 1024px it's visible by default. +*/ + +import styled from "styled-components"; + +// Styled component for the delete button with hover effects + +const StyledDeleteButton = styled.span` + font-size: 18px; + padding-left: 20px; + color: #d8d8d8; + cursor: pointer; + opacity: 0; + transition: color 0.3s, opacity 0.3s; + /*height:36px; + width:36px; + line-height:36px;*/ + + &:hover { + color: #cd4400; // Change color to red on hover + opacity: 1; // Make the button fully visible on hover + } + + // Circle for the delete button + &::before { + content: "✕"; // An "X" symbol + font-weight: bold; + } + + @media (max-width: 1024px) { + opacity: 1; // The button is by default visible on tablets and mobile. + color: #cd4400; + } +`; + +// DeleteButton component that is triggered when clicked +const DeleteButton = ({ onClick, title }) => ( + +); + +export default DeleteButton; \ No newline at end of file diff --git a/src/components/checklist/Checklist.jsx b/src/components/checklist/Checklist.jsx new file mode 100644 index 00000000..78f91ea1 --- /dev/null +++ b/src/components/checklist/Checklist.jsx @@ -0,0 +1,79 @@ +/** + * This component is a styled component and contains a Checklist. + * + * The Checklist contains of a H2 heading, a list of tasks, an input field for adding new tasks, a delete button and a add task button. + * + */ +import React from "react"; +import styled from "styled-components"; +import ChecklistHeader from "./ChecklistHeader"; +import TaskList from "./TaskList"; +import AddTaskButton from "../Buttons/AddTaskButton"; +import InputField from './InputField'; +import { useState } from "react"; +import useStore from "../../store/store"; // Zustand + +// Wrapper for the Checklist + +const Wrapper = styled.div` + padding: 20px; + max-width: 500px; + margin: 0 auto; + background: white; + border-radius: 5px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); + position: relative; + + @media (max-width: 768px) { + margin: 10px; + padding: 15px; + } + + &:before { + content: ""; + position: absolute; + z-index: -1; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); + top: 50%; + bottom: 0; + left: 10px; + right: 10px; + border-radius: 100px / 10px; + } +`; + +const Checklist = () => { + // Destructure the data from Zustand store + const { addTask, title, description } = useStore(); + + // Stores what the user types in the input field + const [newTask, setNewTask] = useState(""); + + const handleAddTask = () => { + if (newTask) { + addTask(newTask); // Add new task + setNewTask(""); // Clear input field + } + }; + + return ( + + {/* Checklist Header with Description */} + + + {/* TaskList component to show list of tasks */} + + + {/* Input field and Add Task button */} + setNewTask(event.target.value)} + placeholder="Write a task..." + /> + Add Task + + ); +}; + +export default Checklist; + diff --git a/src/components/checklist/ChecklistHeader.jsx b/src/components/checklist/ChecklistHeader.jsx new file mode 100644 index 00000000..d714c691 --- /dev/null +++ b/src/components/checklist/ChecklistHeader.jsx @@ -0,0 +1,66 @@ +/** + * + * This styled component contains the Header of the Checklist. + * + * The header dynamically displays a title passed as a prop (title and description). + * + * It displays the TaskCounter Component, and contains a styled component to center the TaskCounter. + * + * + */ + +import styled from "styled-components"; +import TaskCounter from "./TaskCounter"; + +const StyledChecklistHeader = styled.div` + text-align: center; + margin-bottom: 20px; + + h2 { + font-size: 30px; + font-weight: 200; + color: #454545; + } + + p { + padding: 20px; + font-size: 16px; + font-weight: 300; + color: #888; + font-style: italic; + margin-top: 0; + border-bottom: 1px solid; + } + + @media (max-width: 1024px) { + h2 { + font-size: 24px; + } + p { + font-size: 16px; + } + } +`; + +/* styled component to center the counter */ + +const CenteredCounter = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-top: 10px; +`; + +const ChecklistHeader = ({ title, description }) => { + return ( + +

{title}

+

{description}

+ + + + + ); +}; + +export default ChecklistHeader; diff --git a/src/components/checklist/InputField.jsx b/src/components/checklist/InputField.jsx new file mode 100644 index 00000000..774d9e84 --- /dev/null +++ b/src/components/checklist/InputField.jsx @@ -0,0 +1,36 @@ +/** + * + * This styled component handles the input field, where the enduser enters new tasks. + * + * The `onChange` prop allows the parent component to define what happens when the input value changes. + * + * The placeholder prop shows a text in the input field. + * + * */ + +import styled from "styled-components"; + +const StyledInputField = styled.input` + border: none; + outline: none; + font-weight: 200; + position: relative; + margin-top: 40px; + padding: 10px; + width: 100%; + border: 1px solid #ccc; + border-radius: 4px; +`; + +const InputField = ({ value, onChange, placeholder }) => { + return ( + + ); +}; + +export default InputField; \ No newline at end of file diff --git a/src/components/checklist/TaskCounter.jsx b/src/components/checklist/TaskCounter.jsx new file mode 100644 index 00000000..9dca6c5d --- /dev/null +++ b/src/components/checklist/TaskCounter.jsx @@ -0,0 +1,49 @@ +/** + * + * This styled component displays the task counter for the checklist. + * + * The TaskCounter dynamically calculates and displays the total number of tasks and the number of incomplete tasks using Zustand for state management. + * + */ + +import useStore from "../../store/store"; // Zustand +import styled from "styled-components"; + +const CounterWrapper = styled.div` + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 1rem; +`; + +const StrongText = styled.span` + font-weight: bold; + color: #454545; +`; +const StrongGreenText = styled.span` + font-weight: bold; + color: #3b8c40; +`; + +const TaskCounter = () => { + const tasks = useStore((state) => state.tasks); + const totalTasks = tasks.length; + const incompleteTasks = tasks.filter((task) => !task.completed).length; + + // Check if all tasks are completed: + const allTasksDone = totalTasks > 0 && incompleteTasks === 0; + + return ( + + {allTasksDone ? ( + All tasks are done! 🎉 + ) : ( + <> + Pending tasks: {incompleteTasks}/{totalTasks} + + )} + + ); +}; + +export default TaskCounter; \ No newline at end of file diff --git a/src/components/checklist/TaskList.jsx b/src/components/checklist/TaskList.jsx new file mode 100644 index 00000000..1c3be8c1 --- /dev/null +++ b/src/components/checklist/TaskList.jsx @@ -0,0 +1,115 @@ +/** + * This is a styled component that handles a list of tasks. + * + * A list of tasks is fetch from Zustand store. Each item contains and ID, text and completion status. + * + * Zustand: + * - tasks: A list of tasks is fetch from Zustand store. Each item contains and ID, text and completion status. + * - toggleTask: A function from Zustand store that toggles the tasks statu when the checkbox is clicked. + * - removeTask: A function from Zustand store that removes a task when Delete Button is clicked. + * + * Left to do: Add a counter with completed and uncompleted tasks. + */ + +import styled from "styled-components"; +import useStore from "../../store/store"; +import DeleteButton from "../Buttons/DeleteButton"; + +console.log("TaskList component rendered"); +// Container for the task list, adding spacing at the top + +const TaskListContainer = styled.div` + margin-top: 1rem; +`; + +const TaskTitle = styled.p` + font-size: 18px; + color:#454545; + padding: 15px 15px 15px 5px; + margin-bottom: 10px; + text-align: left; +`; + +// Styled component for each task item in the list +const TaskItem = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 5px; + padding: 10px 5px; + box-shadow: 0 2px 0 -1px #ebebeb; + + &:last-of-type { + box-shadow: none; // Remove shadow for the last task in the list + } + &:hover .delete-button { + opacity: 1; // Make button visible on hover + } +`; + +// Group for Checkbox and Text label +const TaskContent = styled.div` + display: flex; + align-items: center; + gap: 10px; +`; + +// Checkbox styling +const Checkbox = styled.input` + margin-right: 10px; + accent-color: #0eb0b7; +`; + +// Task label styling +const TaskLabel = styled.label` + font-weight: 200; + position: relative; + padding-left: 10px; + color: ${(props) => (props.completed ? "#888" : "#454545")}; + text-decoration: ${(props) => (props.completed ? "line-through" : "none")}; + transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out; +`; + +// TaskList component dynamically renders tasks from the Zustand store +const TaskList = () => { + // Destructure the data from Zustand store + const { taskTitle, tasks, toggleTask, removeTask } = useStore(); + + console.log("Task Title:", taskTitle); + + return ( + + {/* Task Title */} + Requirements: + + {/* Task counter */} + + {tasks.map((task) => ( + + {/* Checkbox for toggling task completion */} + + toggleTask(task.id)} // Toggle task completion in store + /> + {/* Label showing the task's text */} + + {task.text} + + + {/* Delete button to remove the task */} + removeTask(task.id)} + title="Remove Task" + /> + + ))} + + ); +}; + +export default TaskList; + diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx new file mode 100644 index 00000000..80c68c1a --- /dev/null +++ b/src/components/footer/Footer.jsx @@ -0,0 +1,68 @@ +/** + * + * This styled component contains the footer section and includes a link to a GitHub account, a logo, and copyright information. + * + */ + +import styled from "styled-components"; +import gitHubLogo from "../../assets/GitHub-logo.png" + +const FooterContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding-top: 20px; + color: #454545; +`; + +const FooterContent = styled.div` + display: flex; + align-items: center; + min-width: 44px; + min-height: 44px; +`; + +const FooterLogo = styled.img` + width: 30px; + margin-right: 5px; +`; + +const FooterLink = styled.a` + color: #454545; + text-decoration: none; + transition: color 0.3s ease; + + &:hover { + text-decoration: underline; + } +`; + +const FooterCopyright = styled.div` + margin-top: 10px; + font-size: 14px; +`; + +const Footer = () => { + return ( + + + + + Joheri1 + + + +

© 2024 Copyright - Developed by Johanna Eriksson

+ + + ); +}; + +export default Footer; diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx new file mode 100644 index 00000000..6c21519a --- /dev/null +++ b/src/components/header/Header.jsx @@ -0,0 +1,54 @@ +/** + * Header Component + * + * This styled component contains the main header for the entire page. + * + * It displays the text with a FontAwesome checkmark icon. + */ + +import React from "react"; +import styled from "styled-components"; + +const StyledHeader = styled.header` + padding: 20px; + margin-top: 10px; + text-align: center; + + h1 { + display: flex; + align-items: center; + justify-content: center; + font-size: 40px; + font-weight: 200; + color: #454545; + margin-bottom: 20px; + } + + i { + font-size: 40px; + color: #0eb0b7; + margin-right: 5px; + } + + @media (max-width: 1024px) { + h1 { + font-size: 20px; + } + i { + font-size: 20px; + } + } +`; + +const Header = () => { + return ( + +

+ + Johanna's Checklists +

+ + ); +}; + +export default Header; diff --git a/src/components/pages/Home.jsx b/src/components/pages/Home.jsx new file mode 100644 index 00000000..82ffc291 --- /dev/null +++ b/src/components/pages/Home.jsx @@ -0,0 +1,45 @@ +import { Link } from "react-router-dom"; +import styled from "styled-components"; +import Header from "../../components/header/Header" +import Checklist from "../../components/checklist/Checklist"; // Checklist page +import Footer from "../../components/footer/Footer"; // Footer component + +const Nav = styled.nav` + display: flex; + justify-content: center; + padding: 10px; + background-color: #f8f8f8; +`; + +const StyledLink = styled(Link)` + text-decoration: none; + color: #0eb0b7; + font-size: 16px; + font-weight: bold; + transition: color 0.25s ease-in-out; + + &:hover { + color: #333; + } +`; + + +const Home = () => { + return ( +
+ + {/* Header */} +
+ + {/* Main page for checklist, the only one I got so far */} + + + {/* Footer */} +
+
+ ); +}; + +export default Home; \ No newline at end of file diff --git a/src/components/pages/PageNotFound.jsx b/src/components/pages/PageNotFound.jsx new file mode 100644 index 00000000..49a00bbc --- /dev/null +++ b/src/components/pages/PageNotFound.jsx @@ -0,0 +1,58 @@ +/** + * This component displays a "404 - Page Not Found" message when the user navigates to a non-existent route. + * + * It imports Link from react-router-dom to create a navigation link for Go Back to Home. + * + * */ + +import { Link } from "react-router-dom"; +import styled from "styled-components"; + +// Styled container for centering content +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + text-align: center; + padding: 20px; +`; + +// Styled link with button-like appearance +const StyledLink = styled(Link)` + margin-top: 20px; + padding: 10px 20px; + background-color: #f8f8f8; + color: #0eb0b7; + border: 1px solid #ccc; + border-radius: 4px; + text-decoration: none; + font-size: 16px; + font-weight: bold; + transition: background-color 0.25s ease-in-out; + + &:hover { + background-color: #e0e0e0; + } +`; + +export const PageNotFound = () => { + return ( + + {/* Main heading for the error message */} +

Oh no!

+ + {/* Subheading to clarify that the page was not found */} +

404 Not Found

+ + {/* Message explaining the situation to the user */} +

It seems that the page you are trying to access does not exist.

+ + {/* Link component to navigate back to the home page */} + {/* The link points to "/go-back-to-home", which is routed to render the Home component */} + Go Back to Home + + ); +}; + +export default PageNotFound; diff --git a/src/data/data.json b/src/data/data.json new file mode 100644 index 00000000..82e3c97d --- /dev/null +++ b/src/data/data.json @@ -0,0 +1,57 @@ +{ + "title": "Project ToDo List", + "description": "This week, the task is to build a Todo app using Zustand for state management.", + "taskTitle": "Requirements:", + "tasks": [ + { + "id": 1, + "text": "The should list all tasks - completed or uncompleted.", + "completed": false + }, + { + "id": 2, + "text": "You should be able to mark an uncompleted task as complete (and change it back to uncompleted).", + "completed": false + }, + { + "id": 3, + "text": "You should be able to add and remove tasks.", + "completed": false + }, + { + "id": 4, + "text": "Your app should show a count of the tasks. Either all tasks or all uncompleted tasks (or both).", + "completed": false + }, + { + "id": 5, + "text": "Make your app responsive (it should look good on devices from 320px width up to 1600px).", + "completed": false + }, + { + "id": 6, + "text": "Your project should be following accessibility guidelines to ensure your website is usable by a diverse range of users.", + "completed": false + }, + { + "id": 7, + "text": "You should have a score of at least 95 in Lighthouse.", + "completed": false + }, + { + "id": 8, + "text": "All images should have alt attributes and proper sizes.", + "completed": false + }, + { + "id": 9, + "text": "All contrasts should be OK.", + "completed": false + }, + { + "id": 10, + "text": "Follow the guidelines on how to write clean code.", + "completed": false + } + ] +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 4669a352..ce93fd5d 100644 --- a/src/index.css +++ b/src/index.css @@ -11,4 +11,253 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -} \ No newline at end of file + background: #f8f8f8; + color: #454545; +} + +#root { + padding-top: 50px; /* Space at the top of the screen */ +} + +h1 { + font-family: Arial, sans-serif; + text-align: center; + font-size: 30px; + font-weight: 200; + margin: 0; +} + +/* Old styling, keeping it if I fail with the styled components +{ + -webkit-transition:.25s ease-in-out; + -moz-transition:.25s ease-in-out; + -o-transition:.25s ease-in-out; + transition:.25s ease-in-out; + font-family:helvetica neue,helvetica,arial,sans-serif; + font-size:18px; + line-height:18px; + box-sizing:border-box; + margin:0; + } + body{ + background:#f8f8f8; + } + h1{ + text-align:center; + padding:50px 0; + font-size:30px; + margin:0; + font-weight:200; + color:#454545; + } + h1 .fa-check{ + font-size:30px; + margin-right:10px; + color:#0eb0b7; + } + .todo-header { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 10px; + } + #todo-list{ + width:500px; + margin:0 auto 50px auto; + padding:50px; + max-width: fit-content; + background:white; + position:relative; + + -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3); + -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3); + box-shadow:0 1px 4px rgba(0, 0, 0, 0.3); + + -webkit-border-radius:5px; + -moz-border-radius:5px; + border-radius:5px; + } + #todo-list:before{ + content:""; + position:absolute; + z-index:-1; + + -webkit-box-shadow:0 0 20px rgba(0,0,0,0.4); + -moz-box-shadow:0 0 20px rgba(0,0,0,0.4); + box-shadow:0 0 20px rgba(0,0,0,0.4); + top:50%; + bottom:0; + left:10px; + right:10px; + + -webkit-border-radius:100px / 10px; + -moz-border-radius:100px / 10px; + border-radius:100px / 10px; + } + .todo-wrap{ + display:block; + position:relative; + padding-left:35px; + + -webkit-box-shadow:0 2px 0 -1px #ebebeb; + -moz-box-shadow:0 2px 0 -1px #ebebeb; + box-shadow:0 2px 0 -1px #ebebeb; + } + .todo-wrap:last-of-type{ + + -webkit-box-shadow:none; + -moz-box-shadow:none; + box-shadow:none; + } + input[type="checkbox"]{ + position:absolute; + height:0; + width:0; + opacity:0; + top:-600px; + } + .todo{ + display:inline-block; + font-weight:200; + padding:10px 5px; + height:37px; + position:relative; + } + .todo:before{ + content:''; + display:block; + position:absolute; + top:calc(50% + 2px); + left:0; + width:0%; + height:1px; + background:#cd4400; + + -webkit-transition:.25s ease-in-out; + -moz-transition:.25s ease-in-out; + -o-transition:.25s ease-in-out; + transition:.25s ease-in-out; + } + .todo:after{ + content:''; + display:block; + position:absolute; + z-index:0; + height:18px; + width:18px; + top:9px; + left:-25px; + + -webkit-box-shadow:inset 0 0 0 2px #d8d8d8; + -moz-box-shadow:inset 0 0 0 2px #d8d8d8; + box-shadow:inset 0 0 0 2px #d8d8d8; + + -webkit-transition:.25s ease-in-out; + -moz-transition:.25s ease-in-out; + -o-transition:.25s ease-in-out; + transition:.25s ease-in-out; + + -webkit-border-radius:4px; + -moz-border-radius:4px; + border-radius:4px; + } + .todo:hover:after{ + + -webkit-box-shadow:inset 0 0 0 2px #949494; + -moz-box-shadow:inset 0 0 0 2px #949494; + box-shadow:inset 0 0 0 2px #949494; + } + .todo .fa-check{ + position:absolute; + z-index:1; + left:-31px; + top:0; + font-size:1px; + line-height:36px; + width:36px; + height:36px; + text-align:center; + color:transparent; + text-shadow:1px 1px 0 white, -1px -1px 0 white; + } + :checked + .todo{ + color:#717171; + } + :checked + .todo:before{ + width:100%; + } + :checked + .todo:after{ + + -webkit-box-shadow:inset 0 0 0 2px #0eb0b7; + -moz-box-shadow:inset 0 0 0 2px #0eb0b7; + box-shadow:inset 0 0 0 2px #0eb0b7; + } + :checked + .todo .fa-check{ + font-size:20px; + line-height:35px; + color:#0eb0b7; + } + + .delete-item{ + display:block; + position:absolute; + height:36px; + width:36px; + line-height:36px; + right:0; + top:0; + text-align:center; + color:#cd4400; + opacity:1; + } + .todo-wrap:hover .delete-item{ + opacity:1; + color: #cd4400; + } + .delete-item:hover{ + color:#cd4400; + opacity:1; + } + + #add-todo{ + padding:25px 0 0 0; + font-size:14px; + font-weight:200; + color:#d8d8d8; + display:inline-block; + cursor:pointer; + } + #add-todo:hover{ + color:#6bc569; + -webkit-transition:none; + -moz-transition:none; + -o-transition:none; + transition:none; + } + #add-todo .fa-plus{ + font-size:14px; + + -webkit-transition:none; + -moz-transition:none; + -o-transition:none; + transition:none; + } + .input-todo{ + border:none; + outline:none; + font-weight:200; + position:relative; + top:-1px; + margin:0; + padding:0; + padding-top: 20px; + width:100%; + } + .editing{ + height:0; + overflow:hidden; + } + + .editing.todo-wrap { + box-shadow:0 0 400px rgba(0,0,0,.8),inset 0 0px 0 2px #ebebeb; + } + */ \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 51294f39..f18b0f0d 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,6 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import { App } from "./App.jsx"; +import App from "./App"; import "./index.css"; ReactDOM.createRoot(document.getElementById("root")).render( diff --git a/src/routes/AppRoutes.jsx b/src/routes/AppRoutes.jsx new file mode 100644 index 00000000..2b63337d --- /dev/null +++ b/src/routes/AppRoutes.jsx @@ -0,0 +1,15 @@ +import { Route } from "react-router-dom"; +import Home from "../components/pages/Home"; // Home-sidan +import PageNotFound from "../components/pages/PageNotFound"; // 404-sidan + +export const AppRoutes = ( + <> + {/* Route for the Home page */} + } /> + + {/* Fallback for unmatched paths */} + } /> + +); + +export default AppRoutes; \ No newline at end of file diff --git a/src/store/store.jsx b/src/store/store.jsx new file mode 100644 index 00000000..db2303a1 --- /dev/null +++ b/src/store/store.jsx @@ -0,0 +1,53 @@ +/** + * + * The Zustand Store + * + * Import Create to define the initial state and the actions for updating that state. + * + * set: A function provided by Zustand to update the store's state, to modify it. + * + + */ + +import { create } from "zustand"; +import data from "../data/data.json"; + +export const useStore = create((set) => ({ + + // *** Import JSON data as the initial state *** + + title: data.title, + description: data.description, + taskTitle: data.taskTitle, + tasks: data.tasks, + + // *** Add a new task *** + + addTask: (text) => // Text is the description of the task. + set((state) => ({ //Updates the state by creating a new tasks array + tasks: [ + ...state.tasks, //Keeps all existing tasks in the array. + { text, id: crypto.randomUUID(), completed: false }, + ], + })), + + // *** Toggle task completion *** + + toggleTask: (id) => // ID - unique identifier of the task to toggle. + set((state) => ({ //Updates the state by creating a new tasks array + tasks: state.tasks.map((task) => + task.id === id ? // Check if the cirrect task matches the ID. Tasks that don’t match the ID remain unchanged. + // + { ...task, completed: !task.completed } : task // Creates a new object with the same data but true becomes false, and vice versa. + ), + })), + + // *** Remove a task *** + + removeTask: (id) => // The unique identifier of the task to remove. + set((state) => ({ //Updates the state by creating a new tasks array + tasks: state.tasks.filter((task) => task.id !== id), // Creates a new array excluding the task with the matching ID. + })), +})); + +export default useStore;