const{Fragment:e,jsx:a,jsxs:n}=arguments[0];function _createMdxContent(s){const l={a:"a",code:"code",h1:"h1",h3:"h3",hr:"hr",img:"img",p:"p",path:"path",pre:"pre",span:"span",svg:"svg",...s.components};return n(e,{children:[a(l.p,{children:"The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes."}),n(l.p,{children:["Features images served using ",a(l.code,{children:"next/image"})," component. The locally stored images are located in a folder with the following path: ",a(l.code,{children:"/static/images/canada/[filename].jpg"})]}),a(l.p,{children:"Since we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes."}),a(l.hr,{}),n(l.h1,{className:"content-header",id:"gallery",children:[a(l.a,{href:"#gallery","aria-hidden":"true",tabIndex:"-1",children:a(e,{children:a(l.span,{className:"content-header-link",children:n(l.svg,{className:"h-5 linkicon w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[a(l.path,{d:"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}),a(l.path,{d:"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"})]})})})}),"Gallery"]}),n("div",{className:"-mx-2 flex flex-wrap overflow-hidden xl:-mx-2",children:[a("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2",children:a(l.p,{children:a(l.img,{alt:"Maple",src:"/static/images/canada/maple.jpg"})})}),a("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2",children:a(l.p,{children:a(l.img,{alt:"Lake",src:"/static/images/canada/lake.jpg"})})}),a("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2",children:a(l.p,{children:a(l.img,{alt:"Mountains",src:"/static/images/canada/mountains.jpg"})})}),a("div",{className:"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2",children:a(l.p,{children:a(l.img,{alt:"Toronto",src:"/static/images/canada/toronto.jpg"})})})]}),n(l.h1,{className:"content-header",id:"implementation",children:[a(l.a,{href:"#implementation","aria-hidden":"true",tabIndex:"-1",children:a(e,{children:a(l.span,{className:"content-header-link",children:n(l.svg,{className:"h-5 linkicon w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[a(l.path,{d:"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}),a(l.path,{d:"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"})]})})})}),"Implementation"]}),a(l.pre,{className:"language-js",children:n(l.code,{className:"language-js code-highlight",children:[n(l.span,{className:"code-line",children:[a(l.span,{className:"token operator",children:"<"}),"div className",a(l.span,{className:"token operator",children:"="}),a(l.span,{className:"token string",children:'"-mx-2 flex flex-wrap overflow-hidden xl:-mx-2"'}),a(l.span,{className:"token operator",children:">"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"<"}),"div className",a(l.span,{className:"token operator",children:"="}),a(l.span,{className:"token string",children:'"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2"'}),a(l.span,{className:"token operator",children:">"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"!"}),a(l.span,{className:"token punctuation",children:"["}),a(l.span,{className:"token maybe-class-name",children:"Maple"}),a(l.span,{className:"token punctuation",children:"]"}),a(l.span,{className:"token punctuation",children:"("}),a(l.span,{className:"token operator",children:"/"}),a(l.span,{className:"token keyword",children:"static"}),a(l.span,{className:"token operator",children:"/"}),"images",a(l.span,{className:"token operator",children:"/"}),"canada",a(l.span,{className:"token operator",children:"/"}),"maple",a(l.span,{className:"token punctuation",children:"."}),a(l.span,{className:"token property-access",children:"jpg"}),a(l.span,{className:"token punctuation",children:")"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"<"}),a(l.span,{className:"token operator",children:"/"}),"div",a(l.span,{className:"token operator",children:">"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"<"}),"div className",a(l.span,{className:"token operator",children:"="}),a(l.span,{className:"token string",children:'"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2"'}),a(l.span,{className:"token operator",children:">"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"!"}),a(l.span,{className:"token punctuation",children:"["}),a(l.span,{className:"token maybe-class-name",children:"Lake"}),a(l.span,{className:"token punctuation",children:"]"}),a(l.span,{className:"token punctuation",children:"("}),a(l.span,{className:"token operator",children:"/"}),a(l.span,{className:"token keyword",children:"static"}),a(l.span,{className:"token operator",children:"/"}),"images",a(l.span,{className:"token operator",children:"/"}),"canada",a(l.span,{className:"token operator",children:"/"}),"lake",a(l.span,{className:"token punctuation",children:"."}),a(l.span,{className:"token property-access",children:"jpg"}),a(l.span,{className:"token punctuation",children:")"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"<"}),a(l.span,{className:"token operator",children:"/"}),"div",a(l.span,{className:"token operator",children:">"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"<"}),"div className",a(l.span,{className:"token operator",children:"="}),a(l.span,{className:"token string",children:'"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2"'}),a(l.span,{className:"token operator",children:">"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"!"}),a(l.span,{className:"token punctuation",children:"["}),a(l.span,{className:"token maybe-class-name",children:"Mountains"}),a(l.span,{className:"token punctuation",children:"]"}),a(l.span,{className:"token punctuation",children:"("}),a(l.span,{className:"token operator",children:"/"}),a(l.span,{className:"token keyword",children:"static"}),a(l.span,{className:"token operator",children:"/"}),"images",a(l.span,{className:"token operator",children:"/"}),"canada",a(l.span,{className:"token operator",children:"/"}),"mountains",a(l.span,{className:"token punctuation",children:"."}),a(l.span,{className:"token property-access",children:"jpg"}),a(l.span,{className:"token punctuation",children:")"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"<"}),a(l.span,{className:"token operator",children:"/"}),"div",a(l.span,{className:"token operator",children:">"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"<"}),"div className",a(l.span,{className:"token operator",children:"="}),a(l.span,{className:"token string",children:'"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2"'}),a(l.span,{className:"token operator",children:">"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"!"}),a(l.span,{className:"token punctuation",children:"["}),a(l.span,{className:"token maybe-class-name",children:"Toronto"}),a(l.span,{className:"token punctuation",children:"]"}),a(l.span,{className:"token punctuation",children:"("}),a(l.span,{className:"token operator",children:"/"}),a(l.span,{className:"token keyword",children:"static"}),a(l.span,{className:"token operator",children:"/"}),"images",a(l.span,{className:"token operator",children:"/"}),"canada",a(l.span,{className:"token operator",children:"/"}),"toronto",a(l.span,{className:"token punctuation",children:"."}),a(l.span,{className:"token property-access",children:"jpg"}),a(l.span,{className:"token punctuation",children:")"}),"\n"]}),n(l.span,{className:"code-line",children:[" ",a(l.span,{className:"token operator",children:"<"}),a(l.span,{className:"token operator",children:"/"}),"div",a(l.span,{className:"token operator",children:">"}),"\n"]}),n(l.span,{className:"code-line",children:[a(l.span,{className:"token operator",children:"<"}),a(l.span,{className:"token operator",children:"/"}),"div",a(l.span,{className:"token operator",children:">"}),"\n"]})]})}),a(l.p,{children:"With MDX v2, one can interleave markdown in jsx as shown in the example code."}),n(l.h3,{className:"content-header",id:"photo-credits",children:[a(l.a,{href:"#photo-credits","aria-hidden":"true",tabIndex:"-1",children:a(e,{children:a(l.span,{className:"content-header-link",children:n(l.svg,{className:"h-5 linkicon w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[a(l.path,{d:"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}),a(l.path,{d:"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"})]})})})}),"Photo Credits"]}),a("div",{children:n(l.p,{children:["Maple photo by ",a(l.a,{href:"https://unsplash.com/@i_am_g?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Guillaume Jaillet"})," on ",a(l.a,{href:"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Unsplash"})]})}),a("div",{children:n(l.p,{children:["Mountains photo by ",a(l.a,{href:"https://unsplash.com/@john_artifexfilms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"John Lee"})," on ",a(l.a,{href:"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Unsplash"})]})}),a("div",{children:n(l.p,{children:["Lake photo by ",a(l.a,{href:"https://unsplash.com/@tjholowaychuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Tj Holowaychuk"})," on ",a(l.a,{href:"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Unsplash"})]})}),a("div",{children:n(l.p,{children:["Toronto photo by ",a(l.a,{href:"https://unsplash.com/@matthewhenry?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Matthew Henry"})," on ",a(l.a,{href:"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText",children:"Unsplash"})]})})]})}return{default:function(e={}){const{wrapper:n}=e.components||{};return n?a(n,{...e,children:a(_createMdxContent,{...e})}):_createMdxContent(e)}};

O Canada