@21st-dev/magic/dist/previewer/_next/static/chunks/app/layout-8f12b3201fe7bc45.js

Magic MCP UI builder by 21st.dev

(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[177],{8705:(e,t,r)=>{Promise.resolve().then(r.t.bind(r,9324,23)),Promise.resolve().then(r.bind(r,1244)),Promise.resolve().then(r.bind(r,4627)),Promise.resolve().then(r.t.bind(r,8173,23)),Promise.resolve().then(r.t.bind(r,9412,23))},1244:(e,t,r)=>{"use strict";r.d(t,{Header:()=>p});var n=r(5155),o=r(9602),a=r(8173),s=r.n(a),i=r(7401);let u=(0,i.A)("Sun",[["circle",{cx:"12",cy:"12",r:"4",key:"4exip2"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"m4.93 4.93 1.41 1.41",key:"149t6j"}],["path",{d:"m17.66 17.66 1.41 1.41",key:"ptbguv"}],["path",{d:"M2 12h2",key:"1t8f8n"}],["path",{d:"M20 12h2",key:"1q8mjw"}],["path",{d:"m6.34 17.66-1.41 1.41",key:"1m8zz5"}],["path",{d:"m19.07 4.93-1.41 1.41",key:"1shlcs"}]]),l=(0,i.A)("Moon",[["path",{d:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z",key:"a7tn18"}]]);var c=r(7113),d=r(2115),f=r(1271);function p(){let{resolvedTheme:e,setTheme:t}=(0,c.D)(),[r,a]=(0,d.useState)(!1);(0,d.useEffect)(()=>{a(!0)},[]);let i=r?e:"light";return(0,n.jsx)("header",{className:(0,o.cn)("border-b border-border/40"),children:(0,n.jsx)("div",{className:"container mx-auto px-[var(--container-x-padding)] max-w-[3680px] [--container-x-padding:20px] min-720:[--container-x-padding:24px] min-1280:[--container-x-padding:32px] min-1536:[--container-x-padding:80px]",children:(0,n.jsxs)("div",{className:"flex h-14 items-center justify-between py-0",children:[(0,n.jsxs)("div",{className:"flex items-center gap-1 text-sm",children:[(0,n.jsx)("span",{className:"font-medium",children:"Magic"})," by 21st.dev"]}),(0,n.jsxs)("div",{className:"flex gap-2",children:[(0,n.jsx)(s(),{href:"https://discord.gg/Qx4rFunHfm",target:"_blank",children:(0,n.jsx)(f.$,{variant:"outline",children:"Report a bug"})}),(0,n.jsx)("div",{className:"flex items-center gap-4",children:(0,n.jsxs)("fieldset",{className:"flex items-center rounded-full border border-border/40 bg-background",children:[(0,n.jsx)("legend",{className:"sr-only",children:"Select a display theme:"}),(0,n.jsxs)("span",{children:[(0,n.jsx)("input",{type:"radio",id:"theme-switch-light",value:"light",name:"theme",className:"sr-only peer",checked:"light"===i,onChange:()=>t("light")}),(0,n.jsxs)("label",{htmlFor:"theme-switch-light",className:"inline-flex items-center justify-center rounded-full p-1.5 text-sm cursor-pointer text-muted-foreground hover:text-foreground peer-checked:bg-accent peer-checked:text-foreground",children:[(0,n.jsx)("span",{className:"sr-only",children:"light"}),(0,n.jsx)(u,{className:"h-4 w-4"})]})]}),(0,n.jsxs)("span",{children:[(0,n.jsx)("input",{type:"radio",id:"theme-switch-dark",value:"dark",name:"theme",className:"sr-only peer",checked:"dark"===i,onChange:()=>t("dark")}),(0,n.jsxs)("label",{htmlFor:"theme-switch-dark",className:"inline-flex items-center justify-center rounded-full p-1.5 text-sm cursor-pointer text-muted-foreground hover:text-foreground peer-checked:bg-accent peer-checked:text-foreground",children:[(0,n.jsx)("span",{className:"sr-only",children:"dark"}),(0,n.jsx)(l,{className:"h-4 w-4"})]})]})]})})]})]})})})}},1271:(e,t,r)=>{"use strict";r.d(t,{$:()=>l});var n=r(5155),o=r(1290),a=r(1027),s=r(2115),i=r(9602);let u=(0,a.F)("inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:opacity-50 disabled:pointer-events-none disabled:border-primary/75 disabled:shadow-[inset_0_0.5px_0.5px_rgba(255,255,255,0.15)] [&_svg]:pointer-events-none [&_svg]:shrink-0",{variants:{variant:{default:"relative cursor-pointer space-x-2 font-regular ease-out duration-200 outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 border bg-gradient-to-b from-[hsl(var(--primary-gradient-start))] to-[hsl(var(--primary-gradient-end))] hover:opacity-90 text-primary-foreground border-[hsl(var(--primary-gradient-start))] focus-visible:outline-[hsl(var(--primary-gradient-start))] data-[state=open]:opacity-90 data-[state=open]:outline-[hsl(var(--primary-gradient-start))]",destructive:"bg-destructive text-destructive-foreground shadow-sm shadow-black/5 hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm shadow-black/5 hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm shadow-black/5 hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{sm:"h-8 rounded-lg px-3",default:"h-8 rounded-lg px-3",lg:"h-10 rounded-lg px-8",icon:"h-8 w-8"}},defaultVariants:{variant:"default",size:"default"}}),l=s.forwardRef((e,t)=>{let{className:r,variant:a,size:s,asChild:l=!1,...c}=e,d=l?o.DX:"button";return(0,n.jsx)(d,{className:(0,i.cn)(u({variant:a,size:s,className:r})),ref:t,...c})});l.displayName="Button"},4627:(e,t,r)=>{"use strict";r.d(t,{ThemeProvider:()=>a});var n=r(5155);r(2115);var o=r(7113);function a(e){let{children:t,...r}=e;return(0,n.jsx)(o.N,{...r,children:t})}},9602:(e,t,r)=>{"use strict";r.d(t,{Q:()=>s,cn:()=>a});var n=r(3463),o=r(9795);function a(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return(0,o.QP)((0,n.$)(t))}function s(e){return e?e.replace(/```tsx\n|```\n|```/g,""):""}},8173:(e,t,r)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return m}});let n=r(306),o=r(5155),a=n._(r(2115)),s=r(180),i=r(1394),u=r(4116),l=r(4445),c=r(5353),d=r(2170),f=r(9544);function p(e,t,r){"undefined"!=typeof window&&(async()=>e.prefetch(t,r))().catch(e=>{})}function h(e){return"string"==typeof e?e:(0,s.formatUrl)(e)}r(2363);let m=a.default.forwardRef(function(e,t){let r,n;let{href:s,as:m,children:g,prefetch:b=null,passHref:y,replace:v,shallow:x,scroll:j,onClick:k,onMouseEnter:_,onTouchStart:w,legacyBehavior:P=!1,...N}=e;r=g,P&&("string"==typeof r||"number"==typeof r)&&(r=(0,o.jsx)("a",{children:r}));let E=a.default.useContext(i.AppRouterContext),M=!1!==b,O=null===b?l.PrefetchKind.AUTO:l.PrefetchKind.FULL,{href:C,as:S}=a.default.useMemo(()=>{let e=h(s);return{href:e,as:m?h(m):e}},[s,m]),I=a.default.useRef(C),T=a.default.useRef(S);P&&(n=a.default.Children.only(r));let A=P?n&&"object"==typeof n&&n.ref:t,[R,F,U]=(0,u.useIntersection)({rootMargin:"200px"}),z=a.default.useCallback(e=>{(T.current!==S||I.current!==C)&&(U(),T.current=S,I.current=C),R(e)},[S,C,U,R]),D=(0,c.useMergedRef)(z,A);a.default.useEffect(()=>{E&&F&&M&&p(E,C,{kind:O})},[S,C,F,M,E,O]);let L={ref:D,onClick(e){P||"function"!=typeof k||k(e),P&&n.props&&"function"==typeof n.props.onClick&&n.props.onClick(e),E&&!e.defaultPrevented&&function(e,t,r,n,o,s,i){let{nodeName:u}=e.currentTarget;"A"===u.toUpperCase()&&function(e){let t=e.currentTarget.getAttribute("target");return t&&"_self"!==t||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.nativeEvent&&2===e.nativeEvent.which}(e)||(e.preventDefault(),a.default.startTransition(()=>{let e=null==i||i;"beforePopState"in t?t[o?"replace":"push"](r,n,{shallow:s,scroll:e}):t[o?"replace":"push"](n||r,{scroll:e})}))}(e,E,C,S,v,x,j)},onMouseEnter(e){P||"function"!=typeof _||_(e),P&&n.props&&"function"==typeof n.props.onMouseEnter&&n.props.onMouseEnter(e),E&&M&&p(E,C,{kind:O})},onTouchStart:function(e){P||"function"!=typeof w||w(e),P&&n.props&&"function"==typeof n.props.onTouchStart&&n.props.onTouchStart(e),E&&M&&p(E,C,{kind:O})}};return(0,d.isAbsoluteUrl)(S)?L.href=S:P&&!y&&("a"!==n.type||"href"in n.props)||(L.href=(0,f.addBasePath)(S)),P?a.default.cloneElement(n,L):(0,o.jsx)("a",{...N,...L,children:r})});("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},8571:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{cancelIdleCallback:function(){return n},requestIdleCallback:function(){return r}});let r="undefined"!=typeof self&&self.requestIdleCallback&&self.requestIdleCallback.bind(window)||function(e){let t=Date.now();return self.setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-t))}})},1)},n="undefined"!=typeof self&&self.cancelIdleCallback&&self.cancelIdleCallback.bind(window)||function(e){return clearTimeout(e)};("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},4116:(e,t,r)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"useIntersection",{enumerable:!0,get:function(){return u}});let n=r(2115),o=r(8571),a="function"==typeof IntersectionObserver,s=new Map,i=[];function u(e){let{rootRef:t,rootMargin:r,disabled:u}=e,l=u||!a,[c,d]=(0,n.useState)(!1),f=(0,n.useRef)(null),p=(0,n.useCallback)(e=>{f.current=e},[]);return(0,n.useEffect)(()=>{if(a){if(l||c)return;let e=f.current;if(e&&e.tagName)return function(e,t,r){let{id:n,observer:o,elements:a}=function(e){let t;let r={root:e.root||null,margin:e.rootMargin||""},n=i.find(e=>e.root===r.root&&e.margin===r.margin);if(n&&(t=s.get(n)))return t;let o=new Map;return t={id:r,observer:new IntersectionObserver(e=>{e.forEach(e=>{let t=o.get(e.target),r=e.isIntersecting||e.intersectionRatio>0;t&&r&&t(r)})},e),elements:o},i.push(r),s.set(r,t),t}(r);return a.set(e,t),o.observe(e),function(){if(a.delete(e),o.unobserve(e),0===a.size){o.disconnect(),s.delete(n);let e=i.findIndex(e=>e.root===n.root&&e.margin===n.margin);e>-1&&i.splice(e,1)}}}(e,e=>e&&d(e),{root:null==t?void 0:t.current,rootMargin:r})}else if(!c){let e=(0,o.requestIdleCallback)(()=>d(!0));return()=>(0,o.cancelIdleCallback)(e)}},[l,r,t,c,f.current]),[p,c,(0,n.useCallback)(()=>{d(!1)},[])]}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},5353:(e,t,r)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"useMergedRef",{enumerable:!0,get:function(){return o}});let n=r(2115);function o(e,t){let r=(0,n.useRef)(()=>{}),o=(0,n.useRef)(()=>{});return(0,n.useMemo)(()=>e&&t?n=>{null===n?(r.current(),o.current()):(r.current=a(e,n),o.current=a(t,n))}:e||t,[e,t])}function a(e,t){if("function"!=typeof e)return e.current=t,()=>{e.current=null};{let r=e(t);return"function"==typeof r?r:()=>e(null)}}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},180:(e,t,r)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{formatUrl:function(){return a},formatWithValidation:function(){return i},urlObjectKeys:function(){return s}});let n=r(9955)._(r(4156)),o=/https?|ftp|gopher|file/;function a(e){let{auth:t,hostname:r}=e,a=e.protocol||"",s=e.pathname||"",i=e.hash||"",u=e.query||"",l=!1;t=t?encodeURIComponent(t).replace(/%3A/i,":")+"@":"",e.host?l=t+e.host:r&&(l=t+(~r.indexOf(":")?"["+r+"]":r),e.port&&(l+=":"+e.port)),u&&"object"==typeof u&&(u=String(n.urlQueryToSearchParams(u)));let c=e.search||u&&"?"+u||"";return a&&!a.endsWith(":")&&(a+=":"),e.slashes||(!a||o.test(a))&&!1!==l?(l="//"+(l||""),s&&"/"!==s[0]&&(s="/"+s)):l||(l=""),i&&"#"!==i[0]&&(i="#"+i),c&&"?"!==c[0]&&(c="?"+c),""+a+l+(s=s.replace(/[?#]/g,encodeURIComponent))+(c=c.replace("#","%23"))+i}let s=["auth","hash","host","hostname","href","path","pathname","port","protocol","query","search","slashes"];function i(e){return a(e)}},4156:(e,t)=>{"use strict";function r(e){let t={};return e.forEach((e,r)=>{void 0===t[r]?t[r]=e:Array.isArray(t[r])?t[r].push(e):t[r]=[t[r],e]}),t}function n(e){return"string"!=typeof e&&("number"!=typeof e||isNaN(e))&&"boolean"!=typeof e?"":String(e)}function o(e){let t=new URLSearchParams;return Object.entries(e).forEach(e=>{let[r,o]=e;Array.isArray(o)?o.forEach(e=>t.append(r,n(e))):t.set(r,n(o))}),t}function a(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return r.forEach(t=>{Array.from(t.keys()).forEach(t=>e.delete(t)),t.forEach((t,r)=>e.append(r,t))}),e}Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{assign:function(){return a},searchParamsToUrlQuery:function(){return r},urlQueryToSearchParams:function(){return o}})},2170:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{DecodeError:function(){return h},MiddlewareNotFoundError:function(){return y},MissingStaticPage:function(){return b},NormalizeError:function(){return m},PageNotFoundError:function(){return g},SP:function(){return f},ST:function(){return p},WEB_VITALS:function(){return r},execOnce:function(){return n},getDisplayName:function(){return u},getLocationOrigin:function(){return s},getURL:function(){return i},isAbsoluteUrl:function(){return a},isResSent:function(){return l},loadGetInitialProps:function(){return d},normalizeRepeatedSlashes:function(){return c},stringifyError:function(){return v}});let r=["CLS","FCP","FID","INP","LCP","TTFB"];function n(e){let t,r=!1;return function(){for(var n=arguments.length,o=Array(n),a=0;a<n;a++)o[a]=arguments[a];return r||(r=!0,t=e(...o)),t}}let o=/^[a-zA-Z][a-zA-Z\d+\-.]*?:/,a=e=>o.test(e);function s(){let{protocol:e,hostname:t,port:r}=window.location;return e+"//"+t+(r?":"+r:"")}function i(){let{href:e}=window.location,t=s();return e.substring(t.length)}function u(e){return"string"==typeof e?e:e.displayName||e.name||"Unknown"}function l(e){return e.finished||e.headersSent}function c(e){let t=e.split("?");return t[0].replace(/\\/g,"/").replace(/\/\/+/g,"/")+(t[1]?"?"+t.slice(1).join("?"):"")}async function d(e,t){let r=t.res||t.ctx&&t.ctx.res;if(!e.getInitialProps)return t.ctx&&t.Component?{pageProps:await d(t.Component,t.ctx)}:{};let n=await e.getInitialProps(t);if(r&&l(r))return n;if(!n)throw Error('"'+u(e)+'.getInitialProps()" should resolve to an object. But found "'+n+'" instead.');return n}let f="undefined"!=typeof performance,p=f&&["mark","measure","getEntriesByName"].every(e=>"function"==typeof performance[e]);class h extends Error{}class m extends Error{}class g extends Error{constructor(e){super(),this.code="ENOENT",this.name="PageNotFoundError",this.message="Cannot find module for page: "+e}}class b extends Error{constructor(e,t){super(),this.message="Failed to load static file for page: "+e+" "+t}}class y extends Error{constructor(){super(),this.code="ENOENT",this.message="Cannot find the middleware module"}}function v(e){return JSON.stringify({message:e.message,stack:e.stack})}},9324:()=>{},9412:e=>{e.exports={style:{fontFamily:"'GeistSans', 'GeistSans Fallback'"},className:"__className_3a0388",variable:"__variable_3a0388"}}},e=>{var t=t=>e(e.s=t);e.O(0,[392,128,441,517,358],()=>t(8705)),_N_E=e.O()}]);