92 lines
No EOL
3.7 KiB
TypeScript
92 lines
No EOL
3.7 KiB
TypeScript
async function GetSkills() {
|
|
const res = await fetch(`${process.env.BACKEND_URL}/cv/skills`, {
|
|
cache: process.env.CACHE
|
|
});
|
|
|
|
if (!res.ok) {
|
|
throw new Error("Erreur lors du chargement des skills du CV");
|
|
}
|
|
return res.json();
|
|
}
|
|
export default async function Skills(){
|
|
const data = await GetSkills();
|
|
|
|
// Support both array and object responses from the backend and merge all items if array
|
|
let obj: Record<string, string[]> = {};
|
|
if (Array.isArray(data)) {
|
|
for (const item of data) {
|
|
if (item && typeof item === "object") {
|
|
for (const [category, items] of Object.entries(item as Record<string, unknown>)) {
|
|
if (Array.isArray(items)) {
|
|
obj[category] = [...(obj[category] ?? []), ...items.filter((x): x is string => typeof x === "string")];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Deduplicate items per category
|
|
obj = Object.fromEntries(
|
|
Object.entries(obj).map(([k, arr]) => [k, Array.from(new Set(arr))])
|
|
);
|
|
} else if (data && typeof data === "object") {
|
|
obj = data as Record<string, string[]>;
|
|
}
|
|
|
|
const entries = Object.entries(obj) as [string, string[]][];
|
|
|
|
if (entries.length === 0) {
|
|
return (
|
|
<section id="skills" className="section">
|
|
<div className="container">
|
|
<h2 className="section-title">Mes compétences</h2>
|
|
<p className="u-muted">Aucune compétence à afficher.</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
/*
|
|
*
|
|
{mySkillsEntries.length > 0 && (
|
|
<section id="competences" className="section">
|
|
<div className="container">
|
|
<h2 className="section-title">Compétences clés</h2>
|
|
<ul className="skill-grid">
|
|
{mySkillsEntries.map(([category, items]) => (
|
|
<li key={category} className="skill-card">
|
|
<h3 className="skill-card__title">{category}</h3>
|
|
<div className="skill-card__tags">
|
|
{items.map((it) => (
|
|
<span key={it} className="badge">{it}</span>
|
|
))}
|
|
</div>
|
|
|
|
<div className="skill-meter" aria-hidden="true">
|
|
<div className="skill-meter__bar" style={{["--level" as any]: "75%"}}/>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
)}
|
|
* */
|
|
<section id="competences" className="section">
|
|
<div className="container">
|
|
<h2 className="section-title">Mes compétences</h2>
|
|
<ul className="skill-grid">
|
|
{entries.map(([category, skills]) => (
|
|
<li key={category} className="skill-card">
|
|
<h3 className="skill-card__title">{category}</h3>
|
|
<div className="skill-card__tags">
|
|
{skills.map((skill: string) => (
|
|
<span key={skill} className="badge">{skill}</span>
|
|
))}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |