From 9d09ce4d2b6b8e59821b6ffc7f9dbb90b5172e3c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 19 Sep 2025 22:13:18 +0000 Subject: [PATCH 1/2] Initial plan From 864c69ad9fcc93fb8a50ca949b2574deccf3d7e2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 19 Sep 2025 22:20:09 +0000 Subject: [PATCH 2/2] Add responsive Header component with navigation Co-authored-by: shabeeribrahim05 <221435619+shabeeribrahim05@users.noreply.github.com> --- .wrangler/deploy/config.json | 1 + src/react-app/App.css | 2 +- src/react-app/App.tsx | 2 + src/react-app/components/Header.css | 129 ++++++++++++++++++++++++++++ src/react-app/components/Header.tsx | 30 +++++++ 5 files changed, 163 insertions(+), 1 deletion(-) create mode 100644 .wrangler/deploy/config.json create mode 100644 src/react-app/components/Header.css create mode 100644 src/react-app/components/Header.tsx diff --git a/.wrangler/deploy/config.json b/.wrangler/deploy/config.json new file mode 100644 index 0000000..1aae8da --- /dev/null +++ b/.wrangler/deploy/config.json @@ -0,0 +1 @@ +{"configPath":"../../dist/vite_react_template/wrangler.json","auxiliaryWorkers":[]} \ No newline at end of file diff --git a/src/react-app/App.css b/src/react-app/App.css index cdc6755..6a35cc1 100644 --- a/src/react-app/App.css +++ b/src/react-app/App.css @@ -1,7 +1,7 @@ #root { max-width: 1280px; margin: 0 auto; - padding: 2rem; + padding: 1rem 2rem 2rem; text-align: center; } diff --git a/src/react-app/App.tsx b/src/react-app/App.tsx index 400da55..c521842 100644 --- a/src/react-app/App.tsx +++ b/src/react-app/App.tsx @@ -5,6 +5,7 @@ import reactLogo from "./assets/react.svg"; import viteLogo from "/vite.svg"; import cloudflareLogo from "./assets/Cloudflare_Logo.svg"; import honoLogo from "./assets/hono.svg"; +import Header from "./components/Header"; import "./App.css"; function App() { @@ -13,6 +14,7 @@ function App() { return ( <> +
Vite logo diff --git a/src/react-app/components/Header.css b/src/react-app/components/Header.css new file mode 100644 index 0000000..0a78485 --- /dev/null +++ b/src/react-app/components/Header.css @@ -0,0 +1,129 @@ +.header { + position: sticky; + top: 0; + z-index: 100; + background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); + border-bottom: 1px solid #333; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + padding: 1rem 0; +} + +.header-content { + max-width: 1280px; + margin: 0 auto; + padding: 0 2rem; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; +} + +.header-branding { + flex: 1; + min-width: 250px; +} + +.header-title { + margin: 0; + font-size: 1.5rem; + font-weight: 600; + color: #fff; + line-height: 1.2; +} + +.header-subtitle { + margin: 0.25rem 0 0 0; + font-size: 0.875rem; + color: #888; + line-height: 1.2; +} + +.header-nav { + display: flex; + gap: 1.5rem; + align-items: center; + flex-wrap: wrap; +} + +.nav-link { + color: #646cff; + text-decoration: none; + font-weight: 500; + padding: 0.5rem 1rem; + border-radius: 6px; + transition: all 0.2s ease; + font-size: 0.9rem; +} + +.nav-link:hover { + color: #535bf2; + background-color: rgba(100, 108, 255, 0.1); + transform: translateY(-1px); +} + +.nav-link:active { + transform: translateY(0); +} + +/* Responsive design */ +@media (max-width: 768px) { + .header-content { + flex-direction: column; + text-align: center; + gap: 1.5rem; + } + + .header-branding { + min-width: auto; + } + + .header-nav { + justify-content: center; + gap: 1rem; + } + + .nav-link { + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + } +} + +@media (max-width: 480px) { + .header-content { + padding: 0 1rem; + } + + .header-title { + font-size: 1.25rem; + } + + .header-subtitle { + font-size: 0.8rem; + } + + .nav-link { + padding: 0.25rem 0.5rem; + font-size: 0.8rem; + } +} + +/* Light theme support */ +@media (prefers-color-scheme: light) { + .header { + background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); + border-bottom: 1px solid #e9ecef; + } + + .header-title { + color: #213547; + } + + .header-subtitle { + color: #6c757d; + } + + .nav-link:hover { + background-color: rgba(116, 123, 255, 0.1); + } +} \ No newline at end of file diff --git a/src/react-app/components/Header.tsx b/src/react-app/components/Header.tsx new file mode 100644 index 0000000..b8f4097 --- /dev/null +++ b/src/react-app/components/Header.tsx @@ -0,0 +1,30 @@ +import "./Header.css"; + +function Header() { + return ( +
+
+
+

Vite React Template

+

Built with Vite + React + Hono + Cloudflare

+
+ +
+
+ ); +} + +export default Header; \ No newline at end of file