react to astro

prompt.md

You are converting a React file into Astro components. Follow these rules strictly:

---

📁 COMPONENT STRUCTURE

• If the file contains multiple React components, create one file per component.
• Use .astro for presentational or static components (no React-specific logic).
• Use .jsx or .tsx for components that require interactivity (e.g., use Disclosure, motion, useState, useEffect, etc.).

---

🧠 LOGIC & INTERACTIVITY

• Components using React-only features or third-party UI libs (framer-motion, @headlessui/react, heroicons, etc.) must remain in .jsx or .tsx.
• Mark interactive components for hydration using Astro directives:
  • client:load for components that should load immediately
  • client:visible if they can wait until in viewport
  • client:idle for lowest priority
• If a component uses only Tailwind and props (no state or effects), convert it to .astro.

---

🎨 STYLING & TAILWIND

• Preserve all Tailwind CSS classes exactly as they appear.
• Do not extract styles into separate CSS files or modules.
• Convert clsx(...) usage into plain string concatenation if simple. If conditionals are complex, keep using clsx and import it.

---

🔁 COMPONENT COMPOSITION

• If the original React file defines a top-level component (e.g., Navbar) that composes subcomponents, replicate this structure in Astro:
  • Convert the top-level component into a .astro file.
  • Import its subcomponents appropriately.
• Ensure props and attributes are correctly passed using Astro’s {Astro.props} in .astro files and regular props in .jsx.

---

📄 OUTPUT FORMAT

Return the result as a list of files, one per component, in the following format: