https://clockety.com/assets/DaylightDurationPage-SeWLIMGp.js

1import{j as e}from"./ui-core-YkX9ufhw.js";import{r}from"./vendor-react-CffrGP6S.js";import{L as D,H as w,C as l,j as x,k as u,h as i,I as C}from"./index-Dgrh25g1.js";import{C as k}from"./CitySelector-Be7bRzkX.js";import{b as j}from"./astroUtils-DU0l5fim.js";import{L as g}from"./label-Cp0VrZxJ.js";import{f as p,H as S,z as M,I as T}from"./vendor-date-F1sWvkAm.js";import{T as L,$ as A,a0 as Y}from"./vendor-icons-4guMy4-W.js";import{R as H,B as I,d as $,X as z,Y as B,T as E,c as F,e as O}from"./vendor-misc-BmNsVLiH.js";import"./ui-extended-MmrHYtjS.js";import"./vendor-utils-EL5wpLGY.js";import"./vendor-router-c2u0I7nJ.js";const ee=()=>{const[a,y]=r.useState(null),[n,f]=r.useState(p(new Date,"yyyy-MM-dd")),[h,N]=r.useState(null),[t,b]=r.useState([]);return r.useEffect(()=>{if(a){const{hours:s,minutes:o}=j(a.coordinates.lat,a.coordinates.lng,new Date(n));N({hours:s,minutes:o});const c=new Date(n).getFullYear(),v=S({start:M(new Date(c,0,1)),end:T(new Date(c,0,1))}).map(m=>{const d=j(a.coordinates.lat,a.coordinates.lng,m);return{month:p(m,"MMM"),hours:d.hours+d.minutes/60,label:`${d.hours}h ${d.minutes}m`}});b(v)}},[a,n]),e.jsxs(D,{children:[e.jsxs(w,{children:[e.jsx("title",{children:"Daylight Duration Calculator | Clockety"}),e.jsx("meta",{name:"description",content:"Calculate total daylight hours for any city. Visualize seasonal changes in day length and find the longest and shortest days of the year."})]}),e.jsxs("div",{className:"container px-4 py-8 max-w-5xl mx-auto",children:[e.jsxs("div",{className:"mb-8 text-center",children:[e.jsx("h1",{className:"text-4xl font-bold mb-4 text-sky-700",children:"Daylight Duration"}),e.jsx("p",{className:"text-muted-foreground text-lg",children:"Measure and visualize the length of day anywhere on earth."})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6 mb-12",children:[e.jsxs(l,{className:"md:col-span-2",children:[e.jsx(x,{children:e.jsx(u,{children:"Settings"})}),e.jsx(i,{className:"space-y-4",children:e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(g,{children:"Select City"}),e.jsx(k,{onSelect:y})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(g,{children:"Date"}),e.jsx(C,{type:"date",value:n,onChange:s=>f(s.target.value)})]})]})})]}),e.jsx(l,{className:"bg-sky-50 border-sky-100",children:e.jsxs(i,{className:"pt-8 text-center",children:[e.jsx(L,{className:"h-12 w-12 text-sky-500 mx-auto mb-4"}),h?e.jsxs("div",{children:[e.jsxs("div",{className:"text-4xl font-black text-sky-900",children:[h.hours,"h ",h.minutes,"m"]}),e.jsx("div",{className:"text-sm text-sky-600 font-bold uppercase tracking-widest mt-1",children:"Total Daylight"})]}):e.jsx("p",{className:"text-sky-400 italic",children:"Select a city to calculate duration."})]})})]}),a&&t.length>0&&e.jsxs("div",{className:"space-y-12 animate-in fade-in duration-700",children:[e.jsxs(l,{children:[e.jsxs(x,{children:[e.jsx(u,{children:"Annual Daylight Trend"}),e.jsxs("p",{className:"text-sm text-muted-foreground",children:["Length of day throughout the year in ",a.name]})]}),e.jsx(i,{children:e.jsx("div",{className:"h-[400px] w-full mt-4",children:e.jsx(H,{width:"100%",height:"100%",children:e.jsxs(I,{data:t,children:[e.jsx($,{strokeDasharray:"3 3",vertical:!1,opacity:.3}),e.jsx(z,{dataKey:"month"}),e.jsx(B,{domain:[0,24],ticks:[0,4,8,12,16,20,24]}),e.jsx(E,{formatter:(s,o,c)=>[c.payload.label,"Daylight"]}),e.jsx(F,{dataKey:"hours",radius:[4,4,0,0],children:t.map((s,o)=>e.jsx(O,{fill:s.hours>12?"#0ea5e9":"#38bdf8"},`cell-${o}`))})]})})})})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(l,{className:"bg-gradient-to-br from-amber-50 to-orange-100/50 border-orange-200",children:e.jsx(i,{className:"pt-6",children:e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:"p-3 bg-white rounded-xl shadow-sm",children:e.jsx(A,{className:"text-orange-600 h-6 w-6"})}),e.jsxs("div",{children:[e.jsx("h4",{className:"font-bold text-orange-900",children:"Longest Day"}),e.jsx("p",{className:"text-sm text-orange-700",children:"Summer Solstice"})]}),e.jsxs("div",{className:"ml-auto text-2xl font-black text-orange-900",children:[Math.max(...t.map(s=>s.hours)).toFixed(1),"h"]})]})})}),e.jsx(l,{className:"bg-gradient-to-br from-slate-50 to-blue-100/50 border-blue-200",children:e.jsx(i,{className:"pt-6",children:e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:"p-3 bg-white rounded-xl shadow-sm",children:e.jsx(Y,{className:"text-blue-600 h-6 w-6"})}),e.jsxs("div",{children:[e.jsx("h4",{className:"font-bold text-blue-900",children:"Shortest Day"}),e.jsx("p",{className:"text-sm text-blue-700",children:"Winter Solstice"})]}),e.jsxs("div",{className:"ml-auto text-2xl font-black text-blue-900",children:[Math.min(...t.map(s=>s.hours)).toFixed(1),"h"]})]})})})]})]})]})]})};export{ee as default};
2//# sourceMappingURL=DaylightDurationPage-SeWLIMGp.js.map