Skip to content

Commit e59e933

Browse files
nikohoffrennikohoffren
committed
add more AI related information & update theme selector button
1 parent e16bbfa commit e59e933

2 files changed

Lines changed: 214 additions & 75 deletions

File tree

‎components/ThemeSelector.tsx‎

Lines changed: 12 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,7 @@
11
import { SunIcon, MoonIcon } from '@heroicons/react/24/outline'
22
import { useState, useEffect } from 'react'
3-
import { ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react'
4-
5-
type Theme = {
6-
name: string
7-
icon: ForwardRefExoticComponent<
8-
Omit<SVGProps<SVGSVGElement>, 'ref'> & RefAttributes<SVGSVGElement>
9-
>
10-
}
11-
12-
const themes: Theme[] = [
13-
{ name: 'light', icon: SunIcon },
14-
{ name: 'dark', icon: MoonIcon }
15-
]
163

174
const ThemeSelector = () => {
18-
const [isOpen, setIsOpen] = useState(false)
195
const [theme, setTheme] = useState('dark')
206

217
useEffect(() => {
@@ -24,47 +10,27 @@ const ThemeSelector = () => {
2410
document.documentElement.classList.add(`theme-${savedTheme}`)
2511
}, [])
2612

27-
const handleThemeChange = (newTheme: string) => {
13+
const toggleTheme = () => {
14+
const newTheme = theme === 'dark' ? 'light' : 'dark'
2815
setTheme(newTheme)
2916
localStorage.setItem('theme', newTheme)
3017
document.documentElement.classList.remove(`theme-${theme}`)
3118
document.documentElement.classList.add(`theme-${newTheme}`)
32-
setIsOpen(false)
3319
}
3420

35-
const currentTheme = themes.find(t => t.name === theme)
36-
const CurrentIcon = currentTheme?.icon
37-
3821
return (
39-
<div className='relative'>
40-
<button
41-
onClick={() => setIsOpen(!isOpen)}
42-
className='focus:ring-modern-purple flex items-center space-x-2 rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2'
43-
>
44-
{CurrentIcon && <CurrentIcon className='h-5 w-5' />}
45-
<span className='capitalize'>{theme}</span>
46-
</button>
47-
48-
{isOpen && (
49-
<div className='absolute left-0 md:left-auto md:right-0 mt-2 w-48 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'>
50-
{themes.map(t => {
51-
const Icon = t.icon
52-
return (
53-
<button
54-
key={t.name}
55-
onClick={() => handleThemeChange(t.name)}
56-
className='flex w-full items-center space-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100'
57-
>
58-
<Icon className='h-5 w-5' />
59-
<span className='capitalize'>{t.name}</span>
60-
</button>
61-
)
62-
})}
63-
</div>
22+
<button
23+
onClick={toggleTheme}
24+
className='text-text-1 hover:bg-background-2 focus:ring-primary flex items-center space-x-2 rounded-md px-3 py-2 text-sm font-medium focus:outline-none focus:ring-2'
25+
>
26+
{theme === 'dark' ? (
27+
<SunIcon className='h-5 w-5' />
28+
) : (
29+
<MoonIcon className='h-5 w-5' />
6430
)}
65-
</div>
31+
<span className='capitalize'>{theme}</span>
32+
</button>
6633
)
6734
}
6835

6936
export default ThemeSelector
70-

‎components/ai/AIContent.tsx‎

Lines changed: 202 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,27 @@
11
import React from 'react'
22

33
const AIContent = () => {
4-
const aiTools = [
4+
const aiCodeEditors = [
5+
{
6+
name: 'Cursor',
7+
description:
8+
'An AI-first code editor that combines the power of GPT-4 with a modern development environment.',
9+
features: [
10+
'AI-powered code generation and editing',
11+
'Natural language to code conversion',
12+
'Real-time pair programming',
13+
'Intelligent code search and navigation',
14+
'Seamless integration with existing workflows'
15+
],
16+
link: 'https://cursor.sh'
17+
}
18+
]
19+
20+
const aiCodingAssistants = [
521
{
622
name: 'ChatGPT',
7-
description: 'OpenAI\'s large language model that can assist with code generation, debugging, and explaining complex programming concepts.',
23+
description:
24+
"OpenAI's large language model that can assist with code generation, debugging, and explaining complex programming concepts.",
825
features: [
926
'Code generation and completion',
1027
'Code review and optimization',
@@ -16,7 +33,8 @@ const AIContent = () => {
1633
},
1734
{
1835
name: 'Claude',
19-
description: 'Anthropic\'s AI assistant known for its strong coding capabilities and ability to handle complex technical discussions.',
36+
description:
37+
"Anthropic's AI assistant known for its strong coding capabilities and ability to handle complex technical discussions.",
2038
features: [
2139
'Advanced code analysis',
2240
'Technical documentation',
@@ -28,31 +46,34 @@ const AIContent = () => {
2846
},
2947
{
3048
name: 'Gemini',
31-
description: 'Google\'s most capable AI model, offering advanced coding assistance and multimodal capabilities.',
49+
description:
50+
"Google's most capable AI model, offering advanced coding assistance and multimodal capabilities.",
3251
features: [
3352
'Code generation in multiple languages',
3453
'Understanding code from screenshots',
3554
'Technical problem-solving',
3655
'Code explanation and documentation',
37-
'Integration with Google\'s ecosystem'
56+
"Integration with Google's ecosystem"
3857
],
3958
link: 'https://gemini.google.com'
4059
},
4160
{
4261
name: 'Grok',
43-
description: 'X\'s (formerly Twitter) AI model known for real-time data analysis and coding assistance.',
62+
description:
63+
"X's (formerly Twitter) AI model known for real-time data analysis and coding assistance.",
4464
features: [
4565
'Real-time code suggestions',
4666
'Access to current development trends',
4767
'Contextual coding assistance',
48-
'Integration with X\'s platform',
68+
"Integration with X's platform",
4969
'Witty and creative problem-solving'
5070
],
5171
link: 'https://grok.x.ai'
5272
},
5373
{
5474
name: 'Copilot',
55-
description: 'GitHub\'s AI-powered coding assistant that integrates directly into your development environment.',
75+
description:
76+
"GitHub's AI-powered coding assistant that integrates directly into your development environment.",
5677
features: [
5778
'Real-time code suggestions',
5879
'Context-aware completions',
@@ -61,31 +82,183 @@ const AIContent = () => {
6182
'Documentation generation'
6283
],
6384
link: 'https://github.com/features/copilot'
85+
},
86+
{
87+
name: 'Codeium',
88+
description:
89+
'A free AI-powered coding assistant that provides intelligent code completion and chat capabilities.',
90+
features: [
91+
'Free unlimited code completions',
92+
'AI-powered chat interface',
93+
'Multi-language support',
94+
'IDE integration',
95+
'Code search and navigation'
96+
],
97+
link: 'https://codeium.com'
98+
},
99+
{
100+
name: 'Tabnine',
101+
description:
102+
'An AI assistant that helps developers write code faster with intelligent code completion.',
103+
features: [
104+
'AI-powered code completion',
105+
'Team learning capabilities',
106+
'Privacy-focused',
107+
'Multiple language support',
108+
'Custom model training'
109+
],
110+
link: 'https://www.tabnine.com'
111+
}
112+
]
113+
114+
const localAIPlatforms = [
115+
{
116+
name: 'Anything LLM',
117+
description:
118+
'A full-stack application that enables you to run your own private AI assistant with local models.',
119+
features: [
120+
'Local model deployment',
121+
'Private document processing',
122+
'Customizable UI',
123+
'Multiple model support',
124+
'Document embedding and search'
125+
],
126+
link: 'https://github.com/anythingllm/anythingllm'
127+
},
128+
{
129+
name: 'LocalAI',
130+
description:
131+
'A self-hosted, community-driven alternative to OpenAI API that runs on consumer hardware.',
132+
features: [
133+
'Multiple model support',
134+
'REST API compatible with OpenAI',
135+
'CPU/GPU inference',
136+
'Docker deployment',
137+
'Community-driven model support'
138+
],
139+
link: 'https://github.com/go-skynet/LocalAI'
140+
},
141+
{
142+
name: 'Ollama',
143+
description:
144+
'A lightweight, extensible framework for running large language models locally.',
145+
features: [
146+
'Easy model management',
147+
'Simple API',
148+
'Multiple model support',
149+
'Cross-platform compatibility',
150+
'Lightweight and fast'
151+
],
152+
link: 'https://ollama.ai'
153+
},
154+
{
155+
name: 'Text Generation WebUI',
156+
description:
157+
'A web interface for running various language models locally.',
158+
features: [
159+
'Multiple model support',
160+
'Chat interface',
161+
'Model training capabilities',
162+
'Extensions support',
163+
'GPU acceleration'
164+
],
165+
link: 'https://github.com/oobabooga/text-generation-webui'
64166
}
65167
]
66168

169+
const aiModels = [
170+
{
171+
name: 'GPT-4',
172+
description:
173+
"OpenAI's most advanced model, offering state-of-the-art performance across various tasks.",
174+
features: [
175+
'Advanced reasoning capabilities',
176+
'Multimodal support',
177+
'Large context window',
178+
'High accuracy',
179+
'Broad knowledge base'
180+
],
181+
link: 'https://openai.com/gpt-4'
182+
},
183+
{
184+
name: 'Claude 3',
185+
description:
186+
"Anthropic's latest model family, offering improved performance and safety features.",
187+
features: [
188+
'Enhanced reasoning',
189+
'Improved accuracy',
190+
'Better context understanding',
191+
'Advanced safety measures',
192+
'Multiple model sizes'
193+
],
194+
link: 'https://www.anthropic.com/claude'
195+
},
196+
{
197+
name: 'Llama 2',
198+
description:
199+
"Meta's open-source large language model, available in various sizes.",
200+
features: [
201+
'Open source',
202+
'Multiple model sizes',
203+
'Commercial use allowed',
204+
'Strong performance',
205+
'Community support'
206+
],
207+
link: 'https://ai.meta.com/llama'
208+
},
209+
{
210+
name: 'Mistral',
211+
description:
212+
'A series of efficient open-source language models with strong performance.',
213+
features: [
214+
'Open source',
215+
'Efficient inference',
216+
'Strong performance',
217+
'Multiple model sizes',
218+
'Commercial use allowed'
219+
],
220+
link: 'https://mistral.ai'
221+
}
222+
]
223+
224+
const renderSection = (title: string, items: any[]) => (
225+
<div className='mb-12'>
226+
<h2 className='mb-6 text-3xl font-bold'>{title}</h2>
227+
<div
228+
className={`grid w-full max-w-4xl gap-8 ${items.length === 1 ? 'grid-cols-1' : 'md:grid-cols-2'}`}
229+
>
230+
{items.map((item, index) => (
231+
<div key={index} className='bg-background-2 rounded-lg p-6 shadow-lg'>
232+
<h3 className='text-text-1 mb-4 text-2xl font-semibold'>
233+
{item.name}
234+
</h3>
235+
<p className='text-text-2 mb-4'>{item.description}</p>
236+
<h4 className='text-text-1 mb-2 text-xl'>Key Features:</h4>
237+
<ul className='text-text-2 mb-4 list-disc pl-5'>
238+
{item.features.map((feature: string, featureIndex: number) => (
239+
<li key={featureIndex}>{feature}</li>
240+
))}
241+
</ul>
242+
<a
243+
href={item.link}
244+
target='_blank'
245+
rel='noopener noreferrer'
246+
className='text-primary cursor-pointer hover:underline'
247+
>
248+
Learn more about {item.name}
249+
</a>
250+
</div>
251+
))}
252+
</div>
253+
</div>
254+
)
255+
67256
return (
68-
<div className='grid w-full max-w-4xl gap-8 md:grid-cols-2'>
69-
{aiTools.map((tool, index) => (
70-
<div key={index} className='rounded-lg bg-gray-800 p-6 shadow-lg'>
71-
<h2 className='mb-4 text-2xl font-semibold'>{tool.name}</h2>
72-
<p className='mb-4'>{tool.description}</p>
73-
<h3 className='mb-2 text-xl'>Key Features:</h3>
74-
<ul className='mb-4 list-disc pl-5'>
75-
{tool.features.map((feature, featureIndex) => (
76-
<li key={featureIndex}>{feature}</li>
77-
))}
78-
</ul>
79-
<a
80-
href={tool.link}
81-
target='_blank'
82-
rel='noopener noreferrer'
83-
className='cursor-pointer text-blue-400 hover:underline'
84-
>
85-
Try {tool.name}
86-
</a>
87-
</div>
88-
))}
257+
<div className='container mx-auto px-4 py-8'>
258+
{renderSection('AI Code Editors', aiCodeEditors)}
259+
{renderSection('AI Coding Assistants', aiCodingAssistants)}
260+
{renderSection('Local AI Platforms', localAIPlatforms)}
261+
{renderSection('AI Models', aiModels)}
89262
</div>
90263
)
91264
}

0 commit comments

Comments
 (0)