48 lines
1.7 KiB
Text
48 lines
1.7 KiB
Text
---
|
|
import type { SkillsSection } from '@/types/sections/skills-section.types';
|
|
import SectionHeading from '../components/section-heading.astro';
|
|
|
|
export interface Props extends SkillsSection {}
|
|
|
|
const { config, skillSets } = Astro.props;
|
|
---
|
|
|
|
<div>
|
|
<SectionHeading>{config.title}</SectionHeading>
|
|
<div class="flex flex-col gap-5">
|
|
{
|
|
skillSets.map((skillSet) => (
|
|
<div>
|
|
<div class="text-base font-extrabold text-gray-900">{skillSet.title}</div>
|
|
<div class="mt-2 flex flex-wrap gap-3.5 text-sm text-gray-700">
|
|
{skillSet.skills.map((skill) => {
|
|
if ('level' in skill) {
|
|
return (
|
|
<div class="flex h-6 w-fit overflow-hidden rounded">
|
|
<div class="flex items-center bg-gray-100 pl-2.5 pr-2 font-medium">{skill.name}</div>
|
|
<div class="flex items-center bg-gray-200 pr-2.5 pl-2 font-normal">{skill.level}/5</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (skill.name.includes(' - ')) {
|
|
return (
|
|
<div class="flex h-6 w-fit overflow-hidden rounded">
|
|
<div class="flex items-center bg-gray-100 pl-2.5 pr-2 font-medium">
|
|
{skill.name.split(' - ')[0]}
|
|
</div>
|
|
<div class="flex items-center bg-gray-200 pr-2.5 pl-2 font-normal">
|
|
{skill.name.split(' - ')[1]}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <div class="flex h-6 w-fit items-center rounded bg-gray-100 px-2.5 font-medium">{skill.name}</div>;
|
|
})}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|