Generated Code

React Component

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

const AppHeader = ({ title, onMenuClick }) => {
  const [isAnimating, setIsAnimating] = useState(false);

  return (
    <header className="app-header">
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        className="header-container"
      >
        <h1>{title}</h1>
        <nav className="header-nav">
          <button onClick={onMenuClick}>
            Menu
          </button>
        </nav>
      </motion.div>
    </header>
  );
};

export default AppHeader;

Code Information

• Generated using AppCraft AI Studio

• Framework: React with Framer Motion

• Component Type: Functional Component

• Dependencies: react, framer-motion