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
|
import { Card } from "@/components/ui/card";
import { GitGraph, Coffee, Terminal, Box, Snowflake, Code } from 'lucide-react';
const tools = [
{
name: 'Git',
icon: GitGraph,
color: 'group-hover:text-[#F05032]'
},
{
name: 'Java',
icon: Coffee,
color: 'group-hover:text-[#5382a1]'
},
{
name: 'Python',
icon: Code,
color: 'group-hover:text-[#FFE873]'
},
{
name: 'Nix',
icon: Snowflake,
color: 'group-hover:text-[#5277C3]'
},
{
name: 'Docker',
icon: Box,
color: 'group-hover:text-[#2496ED]'
},
{
name: 'Linux',
icon: Terminal,
color: 'group-hover:text-[#FCC624]'
},
];
export function ToolsGrid() {
return (
<div className="grid grid-cols-3 md:grid-cols-6 gap-4 w-full max-w-4xl mx-auto">
{tools.map((tool) => (
<Card
key={tool.name}
className="group flex flex-col items-center justify-center gap-2 p-4 bg-card/50 hover:bg-card/80 transition-all duration-300 shadow-none"
>
<tool.icon
className={`w-6 h-6 text-muted-foreground transition-colors duration-300 ${tool.color}`}
strokeWidth={1.5}
/>
<span className="text-xs font-medium text-muted-foreground/60 group-hover:text-muted-foreground transition-colors">
{tool.name}
</span>
</Card>
))}
</div>
);
}
|
