My personal website
renderg.host
1import { Artwork } from '@/components/Artwork/Artwork';
2import { Heading } from '@/components/Heading/Heading';
3import { Paragraph } from '@/components/Paragraph/Paragraph';
4import { cn } from '@/lib/utils';
5import React from 'react';
6import { Tags } from '../Tags/Tags';
7import { skillStyles } from './Skill.styles';
8import { SkillProps } from './Skill.types';
9
10export const Skill: React.FC<SkillProps> = ({
11 skillTitle,
12 skillDescription,
13 skillApproach,
14 skillArtwork,
15 skillTags,
16 className = '',
17}) => (
18 <div className={cn(skillStyles.wrapper, className)}>
19 <div className="flex flex-col gap-8">
20 <Artwork name={skillArtwork} />
21 <div className="flex flex-col gap-2">
22 <Heading level={3} size="md">
23 {skillTitle}
24 </Heading>
25 <Paragraph size="sm">{skillDescription}</Paragraph>
26 <Paragraph size="md">{skillApproach}</Paragraph>
27 <Tags tags={skillTags} />
28 </div>
29 </div>
30 </div>
31);