probat: activate and auto-wrap src/components/Header.tsx (proposal 0724676c)

probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/12e22a6d-64a4-4a18-a592-1b34cc7afcf3.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import '../../src/components/Header.css';
+
+const Header: React.FC = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <>
+      <style>{`
+        .header-theme-variant-b {
+          --header-bg: #4A5568;
+          --header-text: #F7FAFC;
+          --nav-brand-color: #F7FAFC;
+          --nav-link-color: #F7FAFC;
+          --nav-link-hover-color: #667EEA;
+          --btn-outline-border: #F7FAFC;
+          --btn-outline-text: #F7FAFC;
+          --btn-primary-bg: #667EEA;
+          --btn-primary-text: #F7FAFC;
+          --mobile-menu-toggle-color: #F7FAFC;
+        }
+        .header.header-theme-variant-b {
+          background-color: var(--header-bg);
+          color: var(--header-text);
+        }
+        .header.header-theme-variant-b .nav-brand h2 {
+          color: var(--nav-brand-color);
+        }
+        .header.header-theme-variant-b .nav-link {
+          color: var(--nav-link-color);
+        }
+        .header.header-theme-variant-b .nav-link:hover {
+          color: var(--nav-link-hover-color);
+        }
+        .header.header-theme-variant-b .btn-outline {
+          border-color: var(--btn-outline-border);
+          color: var(--btn-outline-text);
+        }
+        .header.header-theme-variant-b .btn-primary {
+          background-color: var(--btn-primary-bg);
+          color: var(--btn-primary-text);
+        }
+        .header.header-theme-variant-b .mobile-menu-toggle span {
+          background-color: var(--mobile-menu-toggle-color);
+        }
+      `}</style>
+      <header className="header header-theme-variant-b">
+        <div className="container">
+          <div className="nav-brand">
+            <h2>Brand</h2>
+          </div>
+
+          <nav className={`nav ${isMenuOpen ? 'nav-open' : ''}`}>
+            <ul className="nav-list">
+              <li><a href="#home" className="nav-link">Home</a></li>
+              <li><a href="#features" className="nav-link">Features</a></li>
+              <li><a href="#about" className="nav-link">About</a></li>
+              <li><a href="#contact" className="nav-link">Contact</a></li>
+            </ul>
+          </nav>
+
+          <div className="nav-actions">
+            <button className="btn btn-outline">Sign In</button>
+            <button className="btn btn-primary">Get Started</button>
+          </div>
+
+          <button 
+            className="mobile-menu-toggle"
+            onClick={toggleMenu}
+            aria-label="Toggle menu"
+          >
+            <span></span>
+            <span></span>
+            <span></span>
+          </button>
+        </div>
+      </header>
+    </>
+  );
+};
+
+export default Header;

probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/1d0e03bb-5695-4cc8-8ffc-5eecfd0f13bd.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import '../../src/components/Header.css';
+
+const Header: React.FC = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <>
+      <style>{`
+        .header-theme-variant-i {
+          --header-bg: #F7FAFC;
+          --header-text: #4A5568;
+          --nav-brand-color: #000000;
+          --nav-link-color: #4A5568;
+          --nav-link-hover-color: #667EEA;
+          --btn-outline-border: #667EEA;
+          --btn-outline-text: #667EEA;
+          --btn-primary-bg: #667EEA;
+          --btn-primary-text: #F7FAFC;
+          --mobile-menu-toggle-color: #4A5568;
+        }
+        .header.header-theme-variant-i {
+          background-color: var(--header-bg);
+          color: var(--header-text);
+        }
+        .header.header-theme-variant-i .nav-brand h2 {
+          color: var(--nav-brand-color);
+        }
+        .header.header-theme-variant-i .nav-link {
+          color: var(--nav-link-color);
+        }
+        .header.header-theme-variant-i .nav-link:hover {
+          color: var(--nav-link-hover-color);
+        }
+        .header.header-theme-variant-i .btn-outline {
+          border-color: var(--btn-outline-border);
+          color: var(--btn-outline-text);
+        }
+        .header.header-theme-variant-i .btn-primary {
+          background-color: var(--btn-primary-bg);
+          color: var(--btn-primary-text);
+        }
+        .header.header-theme-variant-i .mobile-menu-toggle span {
+          background-color: var(--mobile-menu-toggle-color);
+        }
+      `}</style>
+      <header className="header header-theme-variant-i">
+        <div className="container">
+          <div className="nav-brand">
+            <h2>Brand</h2>
+          </div>
+
+          <nav className={`nav ${isMenuOpen ? 'nav-open' : ''}`}>
+            <ul className="nav-list">
+              <li><a href="#home" className="nav-link">Home</a></li>
+              <li><a href="#features" className="nav-link">Features</a></li>
+              <li><a href="#about" className="nav-link">About</a></li>
+              <li><a href="#contact" className="nav-link">Contact</a></li>
+            </ul>
+          </nav>
+
+          <div className="nav-actions">
+            <button className="btn btn-outline">Sign In</button>
+            <button className="btn btn-primary">Get Started</button>
+          </div>
+
+          <button 
+            className="mobile-menu-toggle"
+            onClick={toggleMenu}
+            aria-label="Toggle menu"
+          >
+            <span></span>
+            <span></span>
+            <span></span>
+          </button>
+        </div>
+      </header>
+    </>
+  );
+};
+
+export default Header;

probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/427c2161-ba7d-45c4-85eb-5f9297ce1e54.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import '../../src/components/Header.css';
+
+const Header: React.FC = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <>
+      <style>{`
+        .header-theme-variant-h {
+          --header-bg: #667EEA;
+          --header-text: #F7FAFC;
+          --nav-brand-color: #F7FAFC;
+          --nav-link-color: #F7FAFC;
+          --nav-link-hover-color: #F6E05E;
+          --btn-outline-border: #F6E05E;
+          --btn-outline-text: #F6E05E;
+          --btn-primary-bg: #F6E05E;
+          --btn-primary-text: #000000;
+          --mobile-menu-toggle-color: #F7FAFC;
+        }
+        .header.header-theme-variant-h {
+          background-color: var(--header-bg);
+          color: var(--header-text);
+        }
+        .header.header-theme-variant-h .nav-brand h2 {
+          color: var(--nav-brand-color);
+        }
+        .header.header-theme-variant-h .nav-link {
+          color: var(--nav-link-color);
+        }
+        .header.header-theme-variant-h .nav-link:hover {
+          color: var(--nav-link-hover-color);
+        }
+        .header.header-theme-variant-h .btn-outline {
+          border-color: var(--btn-outline-border);
+          color: var(--btn-outline-text);
+        }
+        .header.header-theme-variant-h .btn-primary {
+          background-color: var(--btn-primary-bg);
+          color: var(--btn-primary-text);
+        }
+        .header.header-theme-variant-h .mobile-menu-toggle span {
+          background-color: var(--mobile-menu-toggle-color);
+        }
+      `}</style>
+      <header className="header header-theme-variant-h">
+        <div className="container">
+          <div className="nav-brand">
+            <h2>Brand</h2>
+          </div>
+
+          <nav className={`nav ${isMenuOpen ? 'nav-open' : ''}`}>
+            <ul className="nav-list">
+              <li><a href="#home" className="nav-link">Home</a></li>
+              <li><a href="#features" className="nav-link">Features</a></li>
+              <li><a href="#about" className="nav-link">About</a></li>
+              <li><a href="#contact" className="nav-link">Contact</a></li>
+            </ul>
+          </nav>
+
+          <div className="nav-actions">
+            <button className="btn btn-outline">Sign In</button>
+            <button className="btn btn-primary">Get Started</button>
+          </div>
+
+          <button 
+            className="mobile-menu-toggle"
+            onClick={toggleMenu}
+            aria-label="Toggle menu"
+          >
+            <span></span>
+            <span></span>
+            <span></span>
+          </button>
+        </div>
+      </header>
+    </>
+  );
+};
+
+export default Header;

probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/49c1d2ed-8af1-4172-aa89-b38da3a00bb0.tsx

@@ -0,0 +1,86 @@
+import React, { useState } => from 'react';
+import '../../src/components/Header.css';
+
+const Header: React.FC = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <>
+      <style>{`
+        .header-theme-variant-d {
+          --header-bg: #F7FAFC;
+          --header-text: #000000;
+          --nav-brand-color: #000000;
+          --nav-link-color: #000000;
+          --nav-link-hover-color: #667EEA;
+          --btn-outline-border: #000000;
+          --btn-outline-text: #000000;
+          --btn-primary-bg: #667EEA;
+          --btn-primary-text: #F7FAFC;
+          --mobile-menu-toggle-color: #000000;
+        }
+        .header.header-theme-variant-d {
+          background-color: var(--header-bg);
+          color: var(--header-text);
+        }
+        .header.header-theme-variant-d .nav-brand h2 {
+          color: var(--nav-brand-color);
+        }
+        .header.header-theme-variant-d .nav-link {
+          color: var(--nav-link-color);
+        }
+        .header.header-theme-variant-d .nav-link:hover {
+          color: var(--nav-link-hover-color);
+        }
+        .header.header-theme-variant-d .btn-outline {
+          border-color: var(--btn-outline-border);
+          color: var(--btn-outline-text);
+        }
+        .header.header-theme-variant-d .btn-primary {
+          background-color: var(--btn-primary-bg);
+          color: var(--btn-primary-text);
+        }
+        .header.header-theme-variant-d .mobile-menu-toggle span {
+          background-color: var(--mobile-menu-toggle-color);
+        }
+      `}</style>
+      <header className="header header-theme-variant-d">
+        <div className="container">
+          <div className="nav-brand">
+            <h2>Brand</h2>
+          </div>
+
+          <nav className={`nav ${isMenuOpen ? 'nav-open' : ''}`}>
+            <ul className="nav-list">
+              <li><a href="#home" className="nav-link">Home</a></li>
+              <li><a href="#features" className="nav-link">Features</a></li>
+              <li><a href="#about" className="nav-link">About</a></li>
+              <li><a href="#contact" className="nav-link">Contact</a></li>
+            </ul>
+          </nav>
+
+          <div className="nav-actions">
+            <button className="btn btn-outline">Sign In</button>
+            <button className="btn btn-primary">Get Started</button>
+          </div>
+
+          <button 
+            className="mobile-menu-toggle"
+            onClick={toggleMenu}
+            aria-label="Toggle menu"
+          >
+            <span></span>
+            <span></span>
+            <span></span>
+          </button>
+        </div>
+      </header>
+    </>
+  );
+};
+
+export default Header;