Spaces:
Build error
Build error
Upload pages/index.js with huggingface_hub
Browse files- pages/index.js +92 -0
pages/index.js
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { useState } from 'react'
|
| 2 |
+
import Head from 'next/head'
|
| 3 |
+
import { FiGithub, FiTool, FiCode, FiCpu, FiImage, FiFileText } from 'react-icons/fi'
|
| 4 |
+
import ToolCard from '../components/ToolCard'
|
| 5 |
+
import Header from '../components/Header'
|
| 6 |
+
|
| 7 |
+
export default function Home() {
|
| 8 |
+
const [activeTool, setActiveTool] = useState(null)
|
| 9 |
+
|
| 10 |
+
const tools = [
|
| 11 |
+
{ id: 'code', name: 'Code Assistant', icon: <FiCode size={24} />, color: 'bg-blue-100 text-blue-600' },
|
| 12 |
+
{ id: 'image', name: 'Image Generator', icon: <FiImage size={24} />, color: 'bg-purple-100 text-purple-600' },
|
| 13 |
+
{ id: 'text', name: 'Text Generator', icon: <FiFileText size={24} />, color: 'bg-green-100 text-green-600' },
|
| 14 |
+
{ id: 'summarize', name: 'Text Summarizer', icon: <FiTool size={24} />, color: 'bg-yellow-100 text-yellow-600' },
|
| 15 |
+
{ id: 'translate', name: 'Translator', icon: <FiCpu size={24} />, color: 'bg-red-100 text-red-600' },
|
| 16 |
+
]
|
| 17 |
+
|
| 18 |
+
return (
|
| 19 |
+
<div className="min-h-screen">
|
| 20 |
+
<Head>
|
| 21 |
+
<title>ToolSentry - AI Multi-Tool Platform</title>
|
| 22 |
+
<meta name="description" content="All-in-one AI tools platform" />
|
| 23 |
+
</Head>
|
| 24 |
+
|
| 25 |
+
<Header />
|
| 26 |
+
|
| 27 |
+
<main className="container mx-auto px-4 py-8">
|
| 28 |
+
<div className="text-center mb-12">
|
| 29 |
+
<h1 className="text-4xl font-bold text-gray-900 mb-4">ToolSentry AI Platform</h1>
|
| 30 |
+
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
| 31 |
+
Your all-in-one solution for AI-powered tools. Select a tool below to get started.
|
| 32 |
+
</p>
|
| 33 |
+
</div>
|
| 34 |
+
|
| 35 |
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 36 |
+
{tools.map((tool) => (
|
| 37 |
+
<ToolCard
|
| 38 |
+
key={tool.id}
|
| 39 |
+
tool={tool}
|
| 40 |
+
onClick={() => setActiveTool(tool.id)}
|
| 41 |
+
/>
|
| 42 |
+
))}
|
| 43 |
+
</div>
|
| 44 |
+
|
| 45 |
+
{activeTool && (
|
| 46 |
+
<div className="mt-12 p-6 bg-white rounded-lg shadow-lg">
|
| 47 |
+
<h2 className="text-2xl font-bold mb-4">
|
| 48 |
+
{tools.find(t => t.id === activeTool)?.name}
|
| 49 |
+
</h2>
|
| 50 |
+
<div className="border-t pt-4">
|
| 51 |
+
{activeTool === 'code' && <CodeAssistant />}
|
| 52 |
+
{activeTool === 'image' && <ImageGenerator />}
|
| 53 |
+
{activeTool === 'text' && <TextGenerator />}
|
| 54 |
+
{activeTool === 'summarize' && <TextSummarizer />}
|
| 55 |
+
{activeTool === 'translate' && <Translator />}
|
| 56 |
+
</div>
|
| 57 |
+
</div>
|
| 58 |
+
)}
|
| 59 |
+
</main>
|
| 60 |
+
|
| 61 |
+
<footer className="bg-gray-100 py-6 mt-12">
|
| 62 |
+
<div className="container mx-auto px-4 text-center text-gray-600">
|
| 63 |
+
<p>© {new Date().getFullYear()} ToolSentry. All rights reserved.</p>
|
| 64 |
+
<p className="mt-2">
|
| 65 |
+
Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-primary hover:underline">anycoder</a>
|
| 66 |
+
</p>
|
| 67 |
+
</div>
|
| 68 |
+
</footer>
|
| 69 |
+
</div>
|
| 70 |
+
)
|
| 71 |
+
}
|
| 72 |
+
|
| 73 |
+
// Placeholder components for each tool
|
| 74 |
+
function CodeAssistant() {
|
| 75 |
+
return <div>Code Assistant Tool - Coming Soon</div>
|
| 76 |
+
}
|
| 77 |
+
|
| 78 |
+
function ImageGenerator() {
|
| 79 |
+
return <div>Image Generator Tool - Coming Soon</div>
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
function TextGenerator() {
|
| 83 |
+
return <div>Text Generator Tool - Coming Soon</div>
|
| 84 |
+
}
|
| 85 |
+
|
| 86 |
+
function TextSummarizer() {
|
| 87 |
+
return <div>Text Summarizer Tool - Coming Soon</div>
|
| 88 |
+
}
|
| 89 |
+
|
| 90 |
+
function Translator() {
|
| 91 |
+
return <div>Translator Tool - Coming Soon</div>
|
| 92 |
+
}
|