https://rainz.lovable.app/assets/Widgets-0Ub9wa9x.js

1import{c as O,n as q,r as l,al as Z,b0 as J,j as e,C as u,i as j,k as g,m as f,L as r,F as X,I as c,b1 as Y,y as T,B as h,a$ as ee,S as se,e as ae,f as te,h as p,N as ie,O as re,ai as le,ak as ne,af as oe}from"./index-l-WhndpF.js";import{S as w,a as b,b as v,c as y,d as n}from"./select-DLiobH3_.js";import{S as de}from"./slider-DIcny1P5.js";import{C as ce}from"./code-l7g2_tKK.js";import{M as he}from"./monitor-DsU4hGqC.js";import{E as me}from"./external-link-B7GWNpPD.js";import"./chevron-down-YD7cuk6R.js";import"./chevron-up-WvrBTDzr.js";/**
2 * @license lucide-react v0.462.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const xe=O("Tablet",[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",ry:"2",key:"76otgf"}],["line",{x1:"12",x2:"12.01",y1:"18",y2:"18",key:"1dp563"}]]),W=[{key:"small",label:"Small",w:"280",h:"200",desc:"Sidebar widget"},{key:"medium",label:"Medium",w:"320",h:"280",desc:"Standard card"},{key:"large",label:"Large",w:"400",h:"400",desc:"Full dashboard"}],ue={mobile:320,tablet:500,desktop:700},je=[{name:"Minimal Dark",theme:"dark",size:"small",showHourly:!1,showDetail

6s:!1},{name:"Full Dashboard",theme:"light",size:"large",showHourly:!0,showDetails:!0},{name:"Glass Card",theme:"glass",size:"medium",showHourly:!0,showDetails:!1},{name:"Clean Minimal",theme:"minimal",size:"medium",showHourly:!1,showDetails:!0}];function ge({defaultLocation:H}){const{toast:D}=q(),[E,N]=l.useState(!1),[m,M]=l.useState("iframe"),[C,I]=l.useState("mobile"),[S,k]=l.useState(!0),[P,F]=l.useState(0),[a,i]=l.useState({location:H||{lat:0,lon:0,name:""},theme:"light",size:"medium",units:"metric",showHourly:!0,showDetails:!0,width:"320",height:"280",accentColor:"#3b82f6",borderRadius:12,fontSize:"medium"}),[d,z]=l.useState(""),[B,$]=l.useState(!1),{data:R=[]}=Z({queryKey:["widget-location-search",d],queryFn:()=>J.searchLocations(d),enabled:d.length>=2});l.useEffect(()=>{if(a.location.lat===0)return;k(!0);const s=setTimeout(()=>F(t=>t+1),500);return()=>clearTimeout(s)},[a]);const o=`https://rainz.lovable.app/widget?lat=${a.location.lat}&lon=${a.location.lon}&location=${encodeURIComponent(a.location.name)}&theme=${a.theme}&size=${a.size}&units=${a.units}&hourly=${a.showHourly}

6&details=${a.showDetails}&accent=${encodeURIComponent(a.accentColor)}&radius=${a.borderRadius}&fontsize=${a.fontSize}`,U=`<iframe
7  src="${o}"
8  width="${a.width}"
9  height="${a.height}"
10  frameborder="0"
11  style="border-radius: ${a.borderRadius}px; overflow: hidden;"
12  title="Rejn Weather Widget"
13></iframe>`,V=`<iframe
14  src="${o}"
15  width={${a.width}}
16  height={${a.height}}
17  frameBorder="0"
18  style={{ borderRadius: ${a.borderRadius}, overflow: "hidden" }}
19  title="Rejn Weather Widget"
20/>`,A=`<!-- Rejn Weather Widget -->
21<div id="rainz-widget"></div>
22<script>
23  (function() {
24    var iframe = document.createElement('iframe');
25    iframe.src = '${o}';
26    iframe.width = '${a.width}';
27    iframe.height = '${a.height}';
28    iframe.frameBorder = '0';
29    iframe.style.borderRadius = '${a.borderRadius}px';
30    iframe.style.overflow = 'hidden';
31    iframe.title = 'Rejn Weather Widget';
32    document.getElementById('rainz-widget').appendChild(iframe);
33  })();
34<\/script>`,L=m==="iframe"?U:m==="react"?V:A,G=()=>{navigator.clipboard.writeText(L),N(!0),D({title:"Copied!",description:"Embed code copied to clipboard"}),setTimeout(()=>N(!1),2e3)},Q=s=>{i(t=>({...t,location:{lat:s.latitude,lon:s.longitude,name:s.name}})),z(""),$(!1)},_=s=>{const t=W.find(x=>x.key===s.size);i(x=>({...x,theme:s.theme,size:s.size,showHourly:s.showHourly,showDetails:s.showDetail

34s,width:t.w,height:t.h}))},K=Math.min(ue[C],parseInt(a.width));return e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-sm font-medium text-muted-foreground mb-3",children:"Quick Start Presets"}),e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-2",children:je.map(s=>e.jsxs("button",{onClick:()=>_(s),className:"p-3 rounded-xl border border-border/40 hover:border-primary/40 hover:bg-primary/5 transition-colors text-left",children:[e.jsx("div",{className:"text-sm font-medium",children:s.name}),e.jsxs("div",{className:"text-xs text-muted-foreground mt-0.5",children:[s.theme," · ",s.size]})]},s.name))})]}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-6",children:[e.jsxs(u,{children:[e.jsx(j,{children:e.jsxs(g,{className:"flex items-center gap-2 text-base",children:[e.jsx(ce,{className:"h-4 w-4"}),"Configuration"]})}),e.jsxs(f,{className:"space-y-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(r,{children:"Location"}),e.jsxs("div",{className:"relative",children:[e.jsx(X,{className:"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"}),e.jsx(c,{value:d,onChange:s=>{z(s.target.value),$(!0)},placeholder:"Search for a city...",className:"pl-9"}),B&&R.length>0&&e.jsx("div",{className:"absolute z-50 mt-1 w-full bg-popover border rounded-md shadow-lg max-h-48 overflow-y-auto",children:R.map((s,t)=>e.jsxs("button",{className:"w-full px-3 py-2 text-left text-sm hover:bg-muted transition-colors",onClick:()=>Q(s),children:[s.name,s.state?`, ${s.state}`:"",s.country?`, ${s.country}`:""]},t))})]}),a.location.name&&e.jsxs("p",{className:"text-xs text-muted-foreground",children:["Selected: ",a.location.name," (",a.location.lat.toFixed(2),", ",a.location.lon.toFixed(2),")"]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(r,{children:"Theme"}),e.jsxs(w,{value:a.theme,onValueChange:s=>i(t=>({...t,theme:s})),children:[e.jsx(b,{children:e.jsx(v,{})}),e.jsxs(y,{children:[e.jsx(n,{value:"light",children:"Light"}),e.jsx(n,{value:"dark",children:"Dark"}),e.jsx(n,{value:"glass",children:"Glass"}),e.jsx(n,{value:"minimal",children:"Minimal"})]})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(r,{children:"Units"}),e.jsxs(w,{value:a.units,onValueChange:s=>i(t=>({...t,units:s})),children:[e.jsx(b,{children:e.jsx(v,{})}),e.jsxs(y,{children:[e.jsx(n,{value:"metric",children:"°C"}),e.jsx(n,{value:"imperial",children:"°F"})]})]})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(r,{children:"Size"}),e.jsx("div",{className:"grid grid-cols-3 gap-2",children:W.map(s=>e.jsxs("button",{onClick:()=>i(t=>({...t,size:s.key,width:s.w,height:s.h})),className:`p-2 rounded-lg border text-center transition-colors ${a.size===s.key?"border-primary bg-primary/10":"border-border/40 hover:border-primary/30"}`,children:[e.jsx("div",{className:"text-xs font-medium",children:s.label}),e.jsxs("div",{className:"text-[10px] text-muted-foreground",children:[s.w,"×",s.h]})]},s.key))})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(r,{children:["Border Radius: ",a.borderRadius,"px"]}),e.jsx(de,{value:[a.borderRadius],onValueChange:([s])=>i(t=>({...t,borderRadius:s})),min:0,max:24,step:2})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(r,{children:"Font Size"}),e.jsxs(w,{value:a.fontSize,onValueChange:s=>i(t=>({...t,fontSize:s})),children:[e.jsx(b,{children:e.jsx(v,{})}),e.jsxs(y,{children:[e.jsx(n,{value:"small",children:"Small"}),e.jsx(n,{value:"medium",children:"Medium"}),e.jsx(n,{value:"large",children:"Large"})]})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs(r,{className:"flex items-center gap-2",children:[e.jsx(Y,{className:"h-3.5 w-3.5"})," Accent Color"]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("input",{type:"color",value:a.accentColor,onChange:s=>i(t=>({...t,accentColor:s.target.value})),className:"w-10 h-8 rounded border cursor-pointer"}),e.jsx(c,{value:a.accentColor,onChange:s=>i(t=>({...t,accentColor:s.target.value})),className:"flex-1",placeholder:"#3b82f6"})]})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx(r,{children:"Show Hourly Forecast"}),e.jsx(T,{checked:a.showHourly,onCheckedChange:s=>i(t=>({...t,showHourly:s}))})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx(r,{children:"Show Details"}

34),e.jsx(T,{checked:a.showDetails,onCheckedChange:s=>i(t=>({...t,showDetails:s}))})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(r,{children:"Width (px)"}),e.jsx(c,{type:"number",value:a.width,onChange:s=>i(t=>({...t,width:s.target.value}))})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(r,{children:"Height (px)"}),e.jsx(c,{type:"number",value:a.height,onChange:s=>i(t=>({...t,height:s.target.value}))})]})]})]})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs(u,{children:[e.jsx(j,{children:e.jsxs(g,{className:"flex items-center justify-between text-base",children:[e.jsx("span",{children:"Preview"}),e.jsxs("div",{className:"flex items-center gap-1",children:[["mobile","tablet","desktop"].map(s=>e.jsx(h,{variant:C===s?"default":"ghost",size:"icon",className:"h-7 w-7",onClick:()=>I(s),children:s==="mobile"?e.jsx(ee,{className:"h-3.5 w-3.5"}):s==="tablet"?e.jsx(xe,{className:"h-3.5 w-3.5"}):e.jsx(he,{className:"h-3.5 w-3.5"})},s)),e.jsx(h,{variant:"ghost",size:"sm",asChild:!0,className:"ml-1",children:e.jsx("a",{href:o,target:"_blank",rel:"noopener noreferrer",children:e.jsx(me,{className:"h-3.5 w-3.5"})})})]})]})}),e.jsx(f,{children:e.jsx("div",{className:"rounded-xl overflow-hidden border bg-muted/30 mx-auto transition-all",style:{width:`${Math.min(K,500)}px`,height:`${Math.min(parseInt(a.height),400)}px`},children:a.location.lat!==0?e.jsxs(e.Fragment,{children:[S&&e.jsx("div",{className:"h-full flex items-center justify-center",children:e.jsx(se,{className:"w-full h-full"})}),e.jsx("iframe",{src:o,width:"100%",height:"100%",frameBorder:"0",title:"Widget Preview",onLoad:()=>k(!1),className:S?"hidden":""},P)]}):e.jsx("div",{className:"h-full flex items-center justify-center text-muted-foreground text-sm",children:"Select a location to preview"})})})]}),e.jsxs(u,{children:[e.jsx(j,{children:e.jsx(g,{className:"text-base",children:"Embed Code"})}),e.jsxs(f,{children:[e.jsxs(ae,{value:m,onValueChange:M,children:[e.jsxs(te,{className:"w-full mb-3",children:[e.jsx(p,{value:"iframe",className:"flex-1",children:"HTML"}),e.jsx(p,{value:"react",className:"flex-1",children:"React"}),e.jsx(p,{value:"script",className:"flex-1",children:"Script"})]}),e.jsxs("div",{className:"relative",children:[e.jsx("pre",{className:"bg-muted p-4 rounded-lg text-xs overflow-x-auto whitespace-pre-wrap break-all font-mono max-h-48",children:L}),e.jsx(h,{size:"sm",variant:"secondary",className:"absolute top-2 right-2",onClick:G,children:E?e.jsx(ie,{className:"h-4 w-4"}):e.jsx(re,{className:"h-4 w-4"})})]})]}),e.jsx("p",{className:"text-xs text-muted-foreground mt-3",children:"Copy this code and paste it into your website's HTML."})]})]})]})]})]})}function ke(){return e.jsxs(e.Fragment,{children:[e.jsx(le,{title:"Embeddable Weather Widgets - Rejn",description:"Create customizable weather widgets for your website. Choose themes, sizes, and data displays with our easy embed code generator."}),e.jsx("div",{className:"min-h-screen bg-background",children:e.jsxs("div",{className:"container mx-auto px-4 py-8",children:[e.jsxs("div",{className:"mb-8",children:[e.jsx(h,{variant:"ghost",size:"sm",asChild:!0,className:"mb-4",children:e.jsxs(ne,{to:"/",children:[e.jsx(oe,{className:"h-4 w-4 mr-2"}),"Back to Weather"]})}),e.jsx("h1",{className:"text-3xl font-bold mb-2",children:"Weather Widgets"}),e.jsx("p",{className:"text-muted-foreground",children:"Create beautiful, customizable weather widgets for your website. Configure your widget below and copy the embed code."})]}),e.jsx(ge,{}),e.jsxs("div",{className:"mt-12 prose prose-sm dark:prose-invert max-w-none",children:[e.jsx("h2",{children:"How to Use"}),e.jsxs("ol",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"Select a location"})," - Search for the city you want to display weather for"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Customize appearance"})," - Choose theme, size, and display options"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Set dimensions"})," - Adjust width and height to fit your layout"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Copy the code"})," - Paste the iframe code into your website's HTML"]})]}),e.jsx("h2",{children:"Features"}),e.jsxs("ul",{children:[e.jsx("li",{children:"Real-time weather data from multiple sources"}),e.jsx("li",{children:"4 beautiful themes: Light, Dark, Glass, and Minimal"}),e.jsx("li",{children:"3 size presets: Small, Medium, and Large"}),e.jsx("li",{children:"Custom accent colors and border radius"}),e.jsx("li",{children:"HTML, React, and Script embed options"}),e.jsx("li",{children:"Responsive preview modes"}),e.jsx("li",{children:"Auto-refreshes every 10 minutes"})]})]})]})})]})}export{ke as default};