import React, { useState, useCallback } from 'react';
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Loader2 } from "lucide-react"
// This should be stored in an environment variable in a real application
const API_KEY = 'sk-ant-api03-AyP...hgAA';
const generateAPIIdea = async (input) => {
const response = await fetch('https://api.example.com/generate-idea', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`
},
body: JSON.stringify(input)
});
if (!response.ok) {
throw new Error('Failed to generate idea');
}
const data = await response.json();
return data.idea;
};
const SEOContentIdeaTool = () => {
const [formData, setFormData] = useState({
industry: '',
blogIdeas: '',
targetAudience: '',
contentType: ''
});
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const generateIdeas = useCallback(async (count = 3) => {
setLoading(true);
setError('');
if (Object.values(formData).some(value => !value.trim())) {
setError('Please fill in all fields before generating ideas.');
setLoading(false);
return;
}
try {
const newIdeas = await Promise.all(
Array(count).fill().map(() => generateAPIIdea(formData))
);
setResults(prev => [...prev, ...newIdeas]);
} catch (err) {
setError('Failed to generate ideas. Please try again.');
console.error('API Error:', err);
} finally {
setLoading(false);
}
}, [formData]);
const handleSubmit = (e) => {
e.preventDefault();
setResults([]);
generateIdeas();
};
return (
AI-Powered SEO Content Idea Generator
Generate content ideas using advanced language models
{error && (
{error}
)}
Results:
{results.length > 0 ? (
<>
{results.map((result, index) => (
- {result}
))}
) : (
No results yet. Submit the form to generate ideas.
)}
);
};
export default SEOContentIdeaTool;