(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[811],{6497:function(e,n,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/magic-card",function(){return i(2650)}])},2650:function(e,n,i){"use strict";i.r(n),i.d(n,{__toc:function(){return c}});var a=i(7458),t=i(3542),s=i(5193),o=i(532);i(5611);var r=i(3281);let c=[{depth:3,value:"Overview",id:"overview"},{depth:3,value:"Props",id:"props"}];function _createMdxContent(e){let n=Object.assign({h1:"h1",code:"code",h3:"h3",ul:"ul",li:"li",p:"p",a:"a",pre:"pre",span:"span",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},(0,r.a)(),e.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{children:(0,a.jsx)(n.code,{children:"<MagicCard />"})}),"\n",(0,a.jsx)(n.h3,{id:"overview",children:"Overview"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"This component is used for making an expandable card-like animation."}),"\n",(0,a.jsxs)(n.li,{children:["Passing in an ",(0,a.jsx)(n.code,{children:"isCardExpanded"})," prop will make the card expand and collapse."]}),"\n",(0,a.jsx)(n.li,{children:"The expanded card is positioned absolutely and in the center of the screen."}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["An example of the component can be seen on the ",(0,a.jsx)(n.a,{href:"/applications/expandable-card",children:"Expandable Card example"}),"."]}),"\n",(0,a.jsx)(n.h3,{id:"props",children:"Props"}),"\n",(0,a.jsx)(n.pre,{"data-language":"ts","data-theme":"default",children:(0,a.jsxs)(n.code,{"data-language":"ts","data-theme":"default",children:[(0,a.jsxs)(n.span,{className:"line",children:[(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"MagicCardProps"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,a.jsxs)(n.span,{className:"line",children:[(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  isCardExpanded"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,a.jsxs)(n.span,{className:"line",children:[(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  children"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"JSX"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,a.jsxs)(n.span,{className:"line",children:[(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  transition"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"Transition"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,a.jsxs)(n.span,{className:"line",children:[(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  isBackgroundFadeEnabled"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"boolean"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,a.jsxs)(n.span,{className:"line",children:[(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"onBackgroundFadeClick"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" (e"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"React"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"MouseEvent"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"HTMLDivElement"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:">) "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,a.jsx)(n.span,{className:"line",children:(0,a.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,a.jsxs)(n.table,{children:[(0,a.jsx)(n.thead,{children:(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.th,{align:"left",children:"Prop name"}),(0,a.jsx)(n.th,{align:"left",children:"Default value"}),(0,a.jsx)(n.th,{align:"left",children:"Description"})]})}),(0,a.jsxs)(n.tbody,{children:[(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{align:"left",children:(0,a.jsx)(n.code,{children:"isCardExpanded"})}),(0,a.jsx)(n.td,{align:"left",children:(0,a.jsx)(n.code,{children:"false"})}),(0,a.jsx)(n.td,{align:"left",children:"Whether the card is expanded or not."})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{align:"left",children:(0,a.jsx)(n.a,{href:"https://www.framer.com/motion/transition/",children:(0,a.jsx)(n.code,{children:"transition"})})}),(0,a.jsx)(n.td,{align:"left",children:"set by framer-motion"}),(0,a.jsx)(n.td,{align:"left",children:"The transition animation for the card."})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{align:"left",children:(0,a.jsx)(n.code,{children:"isBackgroundFadeEnabled"})}),(0,a.jsx)(n.td,{align:"left",children:(0,a.jsx)(n.code,{children:"true"})}),(0,a.jsx)(n.td,{align:"left",children:"Whether the background for the expanded card should show. This is good for creating contrast between the expanded card and the background."})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{align:"left",children:(0,a.jsx)(n.code,{children:"onBackgroundFadeClick"})}),(0,a.jsx)(n.td,{align:"left",children:(0,a.jsx)(n.code,{children:"undefined"})}),(0,a.jsx)(n.td,{align:"left",children:"Callback function for when the background is clicked. This is useful for collapsing the card."})]})]})]})]})}function MDXContent(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,r.a)(),e.components);return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(_createMdxContent,{...e})}):_createMdxContent(e)}let l={MDXContent,pageOpts:{filePath:"pages/components/magic-card.mdx",route:"/components/magic-card",timestamp:1698381453e3,pageMap:[{kind:"MdxPage",name:"404",route:"/404"},{kind:"MdxPage",name:"License",route:"/License"},{kind:"Meta",data:{404:"404",index:"Introduction",applications:"Applications",components:"Components",guides:"Guides",License:"License"}},{kind:"Folder",name:"applications",route:"/applications",children:[{kind:"Meta",data:{index:"To Do List",accordion:"Accordion","collapsible-sidebar":"Collapsible Sidebar","context-menu":"Context Menu","expandable-card":"Expandable Card","grid-area":"Grid Area",search:"Search",tabs:"Tabs"}},{kind:"MdxPage",name:"accordion",route:"/applications/accordion"},{kind:"MdxPage",name:"collapsible-sidebar",route:"/applications/collapsible-sidebar"},{kind:"MdxPage",name:"context-menu",route:"/applications/context-menu"},{kind:"MdxPage",name:"expandable-card",route:"/applications/expandable-card"},{kind:"MdxPage",name:"grid-area",route:"/applications/grid-area"},{kind:"MdxPage",name:"index",route:"/applications"},{kind:"MdxPage",name:"search",route:"/applications/search"},{kind:"MdxPage",name:"tabs",route:"/applications/tabs"}]},{kind:"Folder",name:"components",route:"/components",children:[{kind:"Meta",data:{index:"<MagicMotion />","magic-exit":"<MagicExit />","magic-card":"<MagicCard />","magic-tab-select":"<MagicTabSelect />"}},{kind:"MdxPage",name:"index",route:"/components"},{kind:"MdxPage",name:"magic-card",route:"/components/magic-card"},{kind:"MdxPage",name:"magic-exit",route:"/components/magic-exit"},{kind:"MdxPage",name:"magic-tab-select",route:"/components/magic-tab-select"}]},{kind:"Folder",name:"guides",route:"/guides",children:[{kind:"Meta",data:{index:"Adding Exit Animations","non-layout-animations":"Non Layout Animations"}},{kind:"MdxPage",name:"index",route:"/guides"},{kind:"MdxPage",name:"non-layout-animations",route:"/guides/non-layout-animations"}]},{kind:"MdxPage",name:"index",route:"/"}],flexsearch:{codeblocks:!0},title:"<MagicCard />",headings:c},pageNextRoute:"/components/magic-card",nextraLayout:s.ZP,themeConfig:o.Z};n.default=(0,t.j)(l)},532:function(e,n,i){"use strict";var a=i(7458),t=i(4324),s=i.n(t);n.Z={head:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,a.jsx)("meta",{property:"og:title",content:"react-magic-motion"}),(0,a.jsx)("meta",{property:"og:description",content:"react-magic-motion is a react.js library that magically animates your components."}),(0,a.jsx)("link",{rel:"icon",type:"image/x-icon",href:"https://react-magic-motion.nyc3.cdn.digitaloceanspaces.com/react-magic-motion-logo.png"})]}),logo:(0,a.jsxs)("span",{style:{display:"flex",gap:"0.65rem",alignItems:"center"},children:[(0,a.jsx)(s(),{alt:"react-magic-motion logo",height:36,width:36,src:"https://react-magic-motion.nyc3.cdn.digitaloceanspaces.com/react-magic-motion-logo.png"}),(0,a.jsx)("h1",{style:{fontWeight:"bold"},children:"react-magic-motion"})]}),project:{link:"https://github.com/etesam913/react-magic-motion"},docsRepositoryBase:"https://github.com/Etesam913/react-magic-motion/tree/main/apps/docs/",useNextSeoProps:()=>({titleTemplate:"%s - react-magic-motion"}),footer:{text:(0,a.jsxs)("span",{style:{display:"flex",flex:1,gap:"0.65rem",alignItems:"center",justifyContent:"space-between"},children:[(0,a.jsxs)("a",{href:"https://github.com/etesam913/react-magic-motion",style:{display:"flex",gap:"0.5rem",alignItems:"center"},children:[(0,a.jsx)(s(),{height:24,width:24,alt:"react-magic-motion-logo",src:"https://react-magic-motion.nyc3.cdn.digitaloceanspaces.com/react-magic-motion-logo.png"}),"react-magic-motion"]}),(0,a.jsxs)("span",{children:[" MIT ",new Date().getFullYear()," \xa9"]})]})}}}},function(e){e.O(0,[113,774,888,179],function(){return e(e.s=6497)}),_N_E=e.O()}]);