67 lines
2 KiB
TypeScript
67 lines
2 KiB
TypeScript
import React from 'react'
|
|
|
|
type SkillCategory = {
|
|
title: string
|
|
icon: string
|
|
tags: { tag: string }[]
|
|
}
|
|
|
|
type SkillsBlockProps = {
|
|
heading?: string
|
|
keySkills?: { skill: string }[]
|
|
categories?: SkillCategory[]
|
|
}
|
|
|
|
export function SkillsBlock({ heading, keySkills, categories }: SkillsBlockProps) {
|
|
return (
|
|
<section className="w-full max-w-5xl mx-auto py-12">
|
|
{heading && (
|
|
<p className="text-center text-xs tracking-widest uppercase text-foreground/30 mb-6">
|
|
{heading}
|
|
</p>
|
|
)}
|
|
|
|
{Array.isArray(keySkills) && keySkills.length > 0 && (
|
|
<div className="flex justify-center gap-3 flex-wrap mb-12">
|
|
{keySkills.map(({ skill }, i) => (
|
|
<span
|
|
key={i}
|
|
className="text-xs text-foreground/70 border border-foreground/25 rounded-full px-4 py-1.5"
|
|
>
|
|
{skill}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{Array.isArray(categories) && categories.length > 0 && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{categories.map((cat, i) => (
|
|
<div
|
|
key={i}
|
|
className="p-6 flex flex-col gap-3 rounded-xl bg-muted/50 border-0 shadow-none"
|
|
>
|
|
<i
|
|
className={`ti ${cat.icon} text-foreground/40`}
|
|
style={{ fontSize: 20 }}
|
|
aria-hidden="true"
|
|
/>
|
|
<p className="text-sm font-medium text-foreground/85">{cat.title}</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{Array.isArray(cat.tags) &&
|
|
cat.tags.map(({ tag }, j) => (
|
|
<span
|
|
key={j}
|
|
className="text-xs text-foreground/50 bg-background/50 border border-foreground/10 rounded-full px-2.5 py-0.5"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
)
|
|
}
|