Hermes
99 lines
4.2 KiB
TypeScript
99 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { ChevronRight, ChevronDown, Search, X } from "lucide-react";
|
|
import { useSkills } from "@/lib/hooks";
|
|
import type { SkillSummary } from "@/lib/types";
|
|
|
|
export default function SkillsPage() {
|
|
const { data, isLoading } = useSkills();
|
|
const [search, setSearch] = useState("");
|
|
const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
|
|
|
|
const skills = data?.skills || [];
|
|
const categories = [...new Set(skills.map((s) => s.category || "uncategorized"))].sort();
|
|
|
|
const filtered = search
|
|
? skills.filter((s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.description.toLowerCase().includes(search.toLowerCase()))
|
|
: skills;
|
|
|
|
const grouped = categories
|
|
.map((cat) => ({ category: cat, skills: filtered.filter((s) => (s.category || "uncategorized") === cat) }))
|
|
.filter((g) => g.skills.length > 0);
|
|
|
|
const toggle = (cat: string) => {
|
|
setCollapsed((prev) => {
|
|
const next = new Set(prev);
|
|
next.has(cat) ? next.delete(cat) : next.add(cat);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Skills</h1>
|
|
<span className="text-[12px]" style={{ color: "var(--text-3)" }}>{skills.length}</span>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }} />
|
|
<input
|
|
type="text"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
placeholder="Filter..."
|
|
className="w-full pl-9 pr-9 py-2.5 rounded-xl text-sm outline-none transition-colors"
|
|
style={{ background: "var(--bg-raised)", border: "1px solid var(--border)", color: "var(--text-1)" }}
|
|
/>
|
|
{search && (
|
|
<button onClick={() => setSearch("")} className="absolute right-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }}>
|
|
<X size={16} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="space-y-2">{[...Array(5)].map((_, i) => <div key={i} className="card p-4 animate-pulse"><div className="h-4 rounded w-3/4" style={{ background: "var(--bg-hover)" }} /></div>)}</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{grouped.map(({ category, skills }) => {
|
|
const isCollapsed = collapsed.has(category) && !search;
|
|
return (
|
|
<div key={category}>
|
|
<button
|
|
onClick={() => toggle(category)}
|
|
className="flex items-center gap-1.5 w-full text-left mb-1.5 px-1 active:opacity-70"
|
|
>
|
|
{isCollapsed ? (
|
|
<ChevronRight size={14} style={{ color: "var(--text-3)" }} />
|
|
) : (
|
|
<ChevronDown size={14} style={{ color: "var(--text-3)" }} />
|
|
)}
|
|
<span className="section-label">{category}</span>
|
|
<span className="text-[10px] ml-1" style={{ color: "var(--text-3)" }}>{skills.length}</span>
|
|
</button>
|
|
{!isCollapsed && skills.map((s) => (
|
|
<Link key={s.name} href={"/skills/" + s.name}>
|
|
<div className="flex items-center gap-3 py-2.5 px-1 border-b border-white/[0.04] active:bg-white/[0.02] transition-colors">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-[14px]" style={{ color: "var(--text-1)" }}>{s.name}</div>
|
|
<div className="text-[12px] line-clamp-1" style={{ color: "var(--text-3)" }}>{s.description}</div>
|
|
</div>
|
|
<ChevronRight size={16} style={{ color: "var(--text-3)" }} />
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
})}
|
|
{grouped.length === 0 && (
|
|
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No skills match “{search}”</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|