Implement Event Management Header Section

[BigJohn-dev]

#75

Summary

Adds a reusable EventManagementHeader component that displays the event logo, manage event label, event title, and action buttons. The design matches the reference and satisfies all acceptance criteria, with responsive layout and hover states.

Key Features

• Event Logo
  • Left-aligned with fallback SVG placeholder.
  • next/image support for real logos.
• Manage Event Label
  • Purple uppercase “Manage Event:” displayed above the event title.
• Event Title
  • Rendered as semantic <h1> with overflow truncation.
• Action Buttons
  • “Edit Event” → primary purple filled style with pencil icon.
  • “Preview Event Page” → secondary outlined purple style with eye icon.
  • Hover states: darkened fill, border, and shadow.
• Responsive Layout
  • Stacks vertically on mobile (flex-col).
  • Horizontal alignment on sm+ (sm:flex-row).

Acceptance Criteria Checklist

• Logo appears on the left, followed by event meta information
• “Manage Event:” label appears above the event title
• “Edit Event” button styled as primary purple button
• “Preview Event Page” button styled as secondary outlined button
• Buttons aligned to the right on desktop
• Layout responsive and matches design spacing
• Hover states implemented for both buttons

How to Test

1. Place EventManagementHeader.tsx in src/components/.
2. Import and render the component in any page.
3. Run npm run dev and verify at http://localhost:3000.
4. Resize to mobile width → confirm responsive stacking.
5. Hover over both buttons → confirm hover states.
6. Run npm run build → confirm no TypeScript or lint errors.

Tech Stack

• React v19
• Next.js v15
• Tailwind CSS v4
• TypeScript

---

[netlify]

❌ Deploy Preview for zicket failed.

Name	Link
🔨 Latest commit	94c16ce
🔍 Latest deploy log	https://app.netlify.com/projects/zicket/deploys/69a01908bef6980008e117dc

[DioChuks]

@BigJohn-dev your PR failed check, pls resolve

[DioChuks]

@BigJohn-dev

[DioChuks]

@BigJohn-dev CI still failed