react-icons/fi#FiPlay JavaScript Examples
The following examples show how to use
react-icons/fi#FiPlay.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: HomeDemo.jsx From react-motion-layout with MIT License | 4 votes |
|
export default function HomeDemo() {
const [animated, setAnimated] = useState(false);
const [blocked, setBlocked] = useState(false);
const withTransition = useMotion('story-0');
const animate = useCallback(() => {
if (blocked) {
return;
}
setBlocked(true);
withTransition(() => {
setAnimated(!animated);
setBlocked(false);
})();
},
[withTransition, animated, blocked]);
return (
<>
<div className="xl:mr-14 w-4/4 mr-0 rounded bg-white lg:rounded-lg p-10 pt-8 lg:shadow-xl demo-box">
{ !animated
&& (
<MotionScreen name="Feed-Screen">
<MotionScene name="story-0" easing="cubic-bezier(0.22, 1, 0.36, 1)">
<div className="flex flex-col cursor-default">
<div className="flex">
<SharedElement.Image
animationKey="avatar"
className="w-16 h-16 rounded-full object-cover"
src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
/>
<div className="flex flex-col ml-4 mt-2">
<SharedElement.Text animationKey="name" className="font-bold text-lg leading-tight text-pink-400">
Patricia
</SharedElement.Text>
<div className="font-normal text-sm text-gray-500">
a minute ago
</div>
</div>
</div>
<div className="mt-4">
<SharedElement.Text animationKey="body" className="font-normal text-gray-500 max-w-xs">
Hey guys, as I promised here is my collection of vintage pictures. I hope you like it.
</SharedElement.Text>
<div className="flex my-8">
<img
className="h-40 rounded-lg object-cover"
src="https://images.unsplash.com/photo-1502120492606-fba13cc63721?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=50"
/>
<div className="ml-2">
<SharedElement.Image
animationKey="big-image"
className="h-40 rounded-lg object-cover"
src="https://images.unsplash.com/photo-1527786356703-4b100091cd2c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<img
className="h-40 rounded-lg object-cover ml-2"
src="https://images.unsplash.com/photo-1516962126636-27ad087061cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=50"
/>
</div>
<div className="mt-4 flex items-center">
<img
className="w-10 h-10 rounded-full object-cover border-white border-2 border-solid z-20"
src="https://images.unsplash.com/photo-1523598455533-144bae6cf56e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
<img
className="w-10 h-10 rounded-full object-cover border-white border-2 -ml-4 border-solid z-10"
src="https://images.unsplash.com/photo-1532910404247-7ee9488d7292?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
<img
className="w-10 h-10 rounded-full object-cover border-white border-2 -ml-4 border-solid"
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
<div className="text-bold font-bold pl-2 text-pink-300">+1801</div>
</div>
</div>
</div>
</MotionScene>
</MotionScreen>
)}
{ animated
&& (
<MotionScreen name="Story-Screen">
<MotionScene name="story-0" easing="cubic-bezier(0.22, 1, 0.36, 1)">
<div className="flex">
<div className="flex flex-col items-center flex-shrink-0">
<SharedElement.Image
animationKey="avatar"
className="w-10 h-10 rounded-full object-cover"
src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
/>
</div>
<div className="ml-4">
<div className="mb-4">
<div className="flex flex-col">
<SharedElement.Text animationKey="name" className="font-bold text-base leading-tight text-pink-400">
Patricia
</SharedElement.Text>
</div>
<div className="mt-2">
<SharedElement.Text animationKey="body" className="font-normal text-gray-500 max-w-sm">
Hey guys, as I promised here is my collection of vintage pictures. I hope you like it.
</SharedElement.Text>
</div>
</div>
<SharedElement.Image
animationKey="big-image"
className="h-64 rounded-lg object-cover"
src="https://images.unsplash.com/photo-1527786356703-4b100091cd2c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
<div className="mt-4 flex items-center">
<img
className="opacity-75 w-8 h-8 rounded-full object-cover border-white border-2 border-solid z-20"
src="https://images.unsplash.com/photo-1535207010348-71e47296838a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
<img
className="opacity-75 w-8 h-8 rounded-full object-cover border-white border-2 -ml-4 border-solid z-10"
src="https://images.unsplash.com/photo-1520409364224-63400afe26e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
<img
className="opacity-75 w-8 h-8 rounded-full object-cover border-white border-2 -ml-4 border-solid"
src="https://images.unsplash.com/photo-1510678960173-b52e15cbcfb4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
</div>
</div>
</div>
</MotionScene>
</MotionScreen>
)}
</div>
<div className="mt-4 inline-block mb-8 ml-4 lg:ml-0">
<div onClick={animate} className="p-4 bg-white rounded-md flex items-center shadow-md text-gray-600 cursor-pointer">
{animated ? <FiArrowLeft /> : <FiPlay />}
<div className="ml-4 font-medium ">
{animated ? 'Go back' : 'Run animation'}
</div>
</div>
</div>
</>
);
}
