modules/components.py

def generate_component(type: str, theme: str = "Modern", details: dict = None) -> str:
    """
    Generates HTML/Tailwind code for UI components.
    """
    details = details or {}
    title = details.get("title", "Headline Goes Here")
    text = details.get("text", "Supporting descriptive text for the component.")
    
    if type.lower() == "navbar":
        return f"""
<nav class="bg-white shadow">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <span class="text-xl font-bold text-indigo-600">{title}</span>
        </div>
      </div>
      <div class="flex items-center">
        <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
        <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Features</a>
        <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium ml-4">Sign Up</a>
      </div>
    </div>
  </div>
</nav>
"""
    elif type.lower() == "hero":
        return f"""
<section class="bg-white py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <h1 class="text-5xl font-extrabold text-gray-900 tracking-tight sm:text-6xl">
      {title}
    </h1>
    <p class="mt-6 text-xl text-gray-500 max-w-3xl mx-auto">
      {text}
    </p>
    <div class="mt-10 flex justify-center gap-4">
      <a href="#" class="bg-indigo-600 text-white px-8 py-3 rounded-md font-medium hover:bg-indigo-700">Get Started</a>
      <a href="#" class="border border-gray-300 text-gray-700 px-8 py-3 rounded-md font-medium hover:bg-gray-50">Live Demo</a>
    </div>
  </div>
</section>
"""
    elif type.lower() == "pricing":
        return f"""
<section class="bg-gray-50 py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Simple Pricing</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="bg-white p-8 rounded-lg shadow-sm border border-gray-200">
        <h3 class="text-lg font-semibold mb-4">Starter</h3>
        <p class="text-4xl font-bold mb-6">$0<span class="text-sm font-normal text-gray-500">/mo</span></p>
        <ul class="space-y-3 text-gray-600 mb-8">
          <li>Basic features</li>
          <li>Up to 3 projects</li>
          <li>Community support</li>
        </ul>
        <button class="w-full py-2 border border-indigo-600 text-indigo-600 rounded-md hover:bg-indigo-50">Choose Plan</button>
      </div>
      <div class="bg-white p-8 rounded-lg shadow-md border-2 border-indigo-600 scale-105">
        <h3 class="text-lg font-semibold mb-4 text-indigo-600">Pro</h3>
        <p class="text-4xl font-bold mb-6">$49<span class="text-sm font-normal text-gray-500">/mo</span></p>
        <ul class="space-y-3 text-gray-600 mb-8">
          <li>Advanced features</li>
          <li>Unlimited projects</li>
          <li>Priority support</li>
        </ul>
        <button class="w-full py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">Choose Plan</button>
      </div>
      <div class="bg-white p-8 rounded-lg shadow-sm border border-gray-200">
        <h3 class="text-lg font-semibold mb-4">Enterprise</h3>
        <p class="text-4xl font-bold mb-6">Custom</p>
        <ul class="space-y-3 text-gray-600 mb-8">
          <li>Custom solutions</li>
          <li>Dedicated account manager</li>
          <li>SLA agreements</li>
        </ul>
        <button class="w-full py-2 border border-indigo-600 text-indigo-600 rounded-md hover:bg-indigo-50">Contact Sales</button>
      </div>
    </div>
  </div>
</section>
"""
    return f"<div>Unsupported component type: {type}</div>"