import React, { useState } from
"react"
;
import { ImCross } from
"react-icons/im"
;
import { Frame, Scroll, useAnimation } from
"framer"
;
const Card = ({ yPos, title, subtitle }) => {
const [state, setState] = useState(
false
);
const handleTap = () => {
state ? controls.start({ y: 0 }) : setState(!state);
};
const controls = useAnimation();
const variants = {
active: {
width: 320,
height: 800,
borderRadius: 0,
overflow:
"visible"
,
left: 28,
right:0,
y: 0,
transition: { duration: 0.125,
type:
"spring"
,
damping: 10,
mass: 0.6 }
},
inactive: {
width: 280,
height: 280,
borderRadius: 24,
overflow:
"hidden"
,
left: 45,
y: yPos,
transition: { duration: 0.125,
type:
"spring"
,
damping: 10,
mass: 0.6 }
}
};
return
(
<Frame
y={yPos}
variants={variants}
animate={state ?
"active"
:
"inactive"
}
width={300}
height={300}
borderRadius={24}
style={state ? { zIndex: 10 } : { zIndex: 1 }}
left={37.5}
onTap={handleTap}
shadow={
state
?
"0 0 0 0 rgba(0, 0, 0, 0)"
:
"0px 0px 20px 0px rgba(0, 0, 0, .25)"
}
>
<Scroll
width=
"100%"
height=
"100%"
backgroundColor={
null
}
scrollAnimate={controls}
>
<Frame
position=
"relative"
backgroundColor={
"#09a960"
}
width=
"100%"
height={300}
/>
<Frame position=
"relative"
height={1200}
background=
"white"
/>
<Frame
top={20}
left={20}
height={
""
}
width={
""
}
background={
null
}
style={{
color:
"white"
,
fontFamily:
"sans-serif"
}}
>
<span style={{ fontSize:
"1.6em"
,
fontWeight: 600 }}>
{title}
</span>
<br />
<span
style={{
fontSize:
"1em"
,
fontWeight: 500,
opacity: 0.5
}}
>
{subtitle}
</span>
</Frame>
</Scroll>
{state && (
<Frame
borderRadius={20}
size={15}
top={15}
right={20}
backgroundColor={
"#09a960"
}
onTap={() => {
setState(
false
);
}}
>
<ImCross color=
"red"
/>
</Frame>
)}
</Frame>
);
};
export
default
Card;