Animated shared layout using framer-motion and React.js

// Filename - App.js

import React from "react";
import { AnimateSharedLayout } from "framer-motion";
import Item from "./Item";
import "./styles.css";

// This is an example of animating shared layouts
// using react and framer-motion library.
const itemsList = [
    {
        index: 0,
        content: `Motion components are DOM primitives 
  optimised for 60fps animation and gestures.`,
    },
    {
        index: 1,
        content: `Motion can animate:
    Numbers: 0, 10 etc.
    Strings containing numbers: "0vh", "10px" etc.`,
    },
    {
        index: 2,
        content: `Transform properties are accelerated by the GPU,
     and therefore animate smoothly. `,
    },
];

const App = () => {
    return (
        // The framer-motion component to wrap Item component to animate it
        <AnimateSharedLayout>
            {/* Mapping through itemList array to render layouts*/}
            {itemsList.map((item) => (
                <Item
                    key={item.index}
                    content={item.content}
                />
            ))}
        </AnimateSharedLayout>
    );
};

export default App;

// Filename - Item.js

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

const Content = ({ content }) => {

  const url = "https://media.geeksforgeeks.org/wp-content/cdn-uploads/" +
    "20200817185016/gfg_complete_logo_2x-min.png"

  return (
    <motion.div
      layout
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <img
        src={url}
        alt="geeksforgeeks"
      />
      <div className="row">{content}</div>
    </motion.div>
  );
};

const Item = ({ content }) => {
  // React useState hook is used to manage the state of 'isOpen'
  // that in turn toggles shared layout, user clicks on
  const [isOpen, setIsOpen] = useState(false);

  // Utility function to set 'isOpen' '!'(not) of its last value
  const toggleOpen = () => setIsOpen(!isOpen);

  const url = "https://yt3.ggpht.com/ytc/AAUvwnjJqZG9PvGfC3GoV" +
    "27UlohMeBLxyUdhs9hUbc-Agw=s900-c-k-c0x00ffffff-no-rj"

  return (
    <motion.li
      layout
      title="Click to reveal"
      onClick={toggleOpen}
      initial={{ borderRadius: [25] }}
    >
      <motion.div className="avatar" layout>
        {" "}
        <img
          src={url}
          alt="gfg"
        />{" "}
      </motion.div>
      <br />
      <AnimatePresence>{isOpen && <Content content={content} />}
      </AnimatePresence>
    </motion.li>
  );
};

export default Item;