26 lines
770 B
Text
26 lines
770 B
Text
---
|
|
import Icon from '@/atoms/icon';
|
|
import Typography from '@/atoms/typography.astro';
|
|
import type { LevelledSkill } from '@/types/skills-section';
|
|
|
|
import SkillLevel from './skill-level.astro';
|
|
|
|
export interface Props extends LevelledSkill {}
|
|
|
|
const { url, icon, iconColor, name, level } = Astro.props;
|
|
|
|
const IconWrapper = url ? 'a' : 'div';
|
|
---
|
|
|
|
<div class:list={['flex', 'flex-col', 'gap-2']}>
|
|
<IconWrapper
|
|
class:list={['flex', 'gap-2', 'h-5']}
|
|
{...(url && { href: url, target: "_blank", rel: "noopener noreferrer" })}
|
|
>
|
|
<Icon client:load name={icon} color={iconColor} size={20} />
|
|
<Typography variant="tile-subtitle">
|
|
<span class="text-gray-700">{name}</span>
|
|
</Typography>
|
|
</IconWrapper>
|
|
<SkillLevel skillLevel={level} />
|
|
</div>
|