43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { usePortfolioData } from "@/lib/usePortfolioData";
|
|
import { Section } from "./Section";
|
|
|
|
export default function Skills() {
|
|
const { data, loading, error } = usePortfolioData();
|
|
|
|
if (loading) return <div className="ds-loading">Loading skill registry</div>;
|
|
if (error || !data) {
|
|
return <div className="ds-error">Error loading skill registry</div>;
|
|
}
|
|
|
|
return (
|
|
<Section
|
|
id="skills"
|
|
eyebrow="MODULE_REGISTRY.lib"
|
|
title="Stack modular para produto, operação e escala"
|
|
description="Ferramentas escolhidas por previsibilidade operacional, velocidade de entrega e facilidade de manutenção."
|
|
dark
|
|
>
|
|
<div className="ds-grid-2">
|
|
{data.skills.technical.map((category, index) => (
|
|
<article key={category.category} className="ds-card">
|
|
<div className="flex items-center justify-between gap-sp-4">
|
|
<div className="ds-kicker">ID_0{index + 1}X</div>
|
|
<div className="ds-metric">{category.skills.length} items</div>
|
|
</div>
|
|
<h3 className="ds-card-title">{category.category}</h3>
|
|
<ul className="ds-tags mt-sp-6">
|
|
{category.skills.map((skill) => (
|
|
<li key={skill} className="ds-tag">
|
|
{skill}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|