File size: 3,326 Bytes
ec7678e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { useState } from 'react'
import Head from 'next/head'
import { FiGithub, FiTool, FiCode, FiCpu, FiImage, FiFileText } from 'react-icons/fi'
import ToolCard from '../components/ToolCard'
import Header from '../components/Header'

export default function Home() {
  const [activeTool, setActiveTool] = useState(null)
  
  const tools = [
    { id: 'code', name: 'Code Assistant', icon: <FiCode size={24} />, color: 'bg-blue-100 text-blue-600' },
    { id: 'image', name: 'Image Generator', icon: <FiImage size={24} />, color: 'bg-purple-100 text-purple-600' },
    { id: 'text', name: 'Text Generator', icon: <FiFileText size={24} />, color: 'bg-green-100 text-green-600' },
    { id: 'summarize', name: 'Text Summarizer', icon: <FiTool size={24} />, color: 'bg-yellow-100 text-yellow-600' },
    { id: 'translate', name: 'Translator', icon: <FiCpu size={24} />, color: 'bg-red-100 text-red-600' },
  ]

  return (
    <div className="min-h-screen">
      <Head>
        <title>ToolSentry - AI Multi-Tool Platform</title>
        <meta name="description" content="All-in-one AI tools platform" />
      </Head>

      <Header />

      <main className="container mx-auto px-4 py-8">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">ToolSentry AI Platform</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Your all-in-one solution for AI-powered tools. Select a tool below to get started.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {tools.map((tool) => (
            <ToolCard
              key={tool.id}
              tool={tool}
              onClick={() => setActiveTool(tool.id)}
            />
          ))}
        </div>

        {activeTool && (
          <div className="mt-12 p-6 bg-white rounded-lg shadow-lg">
            <h2 className="text-2xl font-bold mb-4">
              {tools.find(t => t.id === activeTool)?.name}
            </h2>
            <div className="border-t pt-4">
              {activeTool === 'code' && <CodeAssistant />}
              {activeTool === 'image' && <ImageGenerator />}
              {activeTool === 'text' && <TextGenerator />}
              {activeTool === 'summarize' && <TextSummarizer />}
              {activeTool === 'translate' && <Translator />}
            </div>
          </div>
        )}
      </main>

      <footer className="bg-gray-100 py-6 mt-12">
        <div className="container mx-auto px-4 text-center text-gray-600">
          <p>© {new Date().getFullYear()} ToolSentry. All rights reserved.</p>
          <p className="mt-2">
            Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-primary hover:underline">anycoder</a>
          </p>
        </div>
      </footer>
    </div>
  )
}

// Placeholder components for each tool
function CodeAssistant() {
  return <div>Code Assistant Tool - Coming Soon</div>
}

function ImageGenerator() {
  return <div>Image Generator Tool - Coming Soon</div>
}

function TextGenerator() {
  return <div>Text Generator Tool - Coming Soon</div>
}

function TextSummarizer() {
  return <div>Text Summarizer Tool - Coming Soon</div>
}

function Translator() {
  return <div>Translator Tool - Coming Soon</div>
}