Full-Stack Basics

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const { prompt, tool } = await req.json();

  // Validate input
  if (!prompt || !tool) {
    return NextResponse.json(
      { error: "Missing prompt or tool selection" },
      { status: 400 }
    );
  }

  // Call your AI backend
  const response = await fetch(process.env.AI_API_URL!, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.AI_API_KEY}`,
    },
    body: JSON.stringify({ prompt, tool }),
  });

  const data = await response.json();
  return NextResponse.json(data);
}

"use client";

interface ToolCardProps {
  title: string;
  description: string;
  icon: React.ReactNode;
  href: string;
}

export default function ToolCard({
  title, description, icon, href
}: ToolCardProps) {
  return (
    <a
      href={href}
      className="block p-6 rounded-xl border border-gray-200
                 hover:border-teal-400 hover:shadow-lg
                 transition-all duration-200 group"
    >
      <div className="w-10 h-10 rounded-lg bg-teal-50
                      flex items-center justify-center mb-4
                      group-hover:bg-teal-100 transition-colors">
        {icon}
      </div>
      <h3 className="font-bold text-gray-900 mb-1">{title}</h3>
      <p className="text-sm text-gray-500">{description}</p>
    </a>
  );
}