Create Skill component (#19)

Co-authored-by: hoolek77 <szymon.kin@gmail.com>

package-lock.json

@@ -42,6 +42,7 @@
         "prettier": "2.7.1",
         "tailwindcss": "3.1.8",
         "type-fest": "3.1.0",
+        "typescript": "4.8.3",
         "vite": "3.1.8",
         "vite-tsconfig-paths": "3.5.1"
       },
@@ -9236,9 +9237,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",
-      "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -16782,9 +16783,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",
-      "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
       "dev": true
     },
     "unbox-primitive": {

package.json

@@ -15,6 +15,7 @@
     "preview": "astro preview",
     "astro": "astro",
     "lint": "eslint . --ext .cjs,.ts,.tsx,.astro --ignore-path .gitignore",
+    "lint:fix": "eslint . --ext .cjs,.ts,.tsx,.astro --ignore-path .gitignore --fix",
     "lint:ts": "tsc --jsx preserve --skipLibCheck"
   },
   "dependencies": {
@@ -51,6 +52,7 @@
     "postcss": "8.4.18",
     "prettier": "2.7.1",
     "tailwindcss": "3.1.8",
+    "typescript": "4.8.3",
     "type-fest": "3.1.0",
     "vite": "3.1.8",
     "vite-tsconfig-paths": "3.5.1"

src/components/atoms/skill-level-tile.astro

@@ -0,0 +1,21 @@
+---
+export interface Props extends astroHTML.JSX.HTMLAttributes {
+  skillLevel: number;
+  tileLevel: number;
+}
+const { skillLevel, tileLevel } = Astro.props;
+const isFilled = skillLevel >= tileLevel;
+---
+
+<div
+  class:list={[
+    'w-9',
+    'h-2',
+    'last:rounded-l-none',
+    'last:rounded-r-sm',
+    'first:rounded-l-sm',
+    'first:rounded-r-none',
+    { 'bg-gray-500': isFilled, 'bg-gray-300': !isFilled },
+  ]}
+>
+</div>

src/components/organisms/skill-level.astro

@@ -0,0 +1,14 @@
+---
+import SkillLevelTile from '@/atoms/skill-level-tile.astro';
+
+export interface Props extends astroHTML.JSX.HTMLAttributes {
+  skillLevel: number;
+}
+const { skillLevel } = Astro.props;
+
+const LEVELS = [1, 2, 3, 4, 5];
+---
+
+<div class:list={['flex', 'gap-1']}>
+  {LEVELS.map((tileLevel) => <SkillLevelTile tileLevel={tileLevel} skillLevel={skillLevel} />)}
+</div>

src/components/organisms/skill.astro

@@ -0,0 +1,23 @@
+---
+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 astroHTML.JSX.HTMLAttributes {
+  levelledSkill: LevelledSkill;
+}
+
+const { levelledSkill, ...props } = Astro.props;
+---
+
+<div class:list={['flex', 'flex-col', 'gap-2']} {...props}>
+  <div class:list={['flex', 'gap-2', 'h-5']}>
+    <a href={levelledSkill.url} target="_blank" rel="noopener noreferrer">
+      <Icon client:load name={levelledSkill.icon} color={levelledSkill.iconColor} size={20} />
+    </a>
+    <Typography variant="tile-subtitle" class="text-gray-700">{levelledSkill.name}</Typography>
+  </div>
+  <SkillLevel skillLevel={levelledSkill.level} />
+</div>

src/pages/playground/skill.astro

@@ -0,0 +1,14 @@
+---
+import Skill from '@/organisms/skill.astro';
+import type { LevelledSkill } from '@/types/skills-section';
+
+const levelledSkill: LevelledSkill = {
+  icon: 'simple-icons:react',
+  iconColor: '#61DAFB',
+  name: 'React.js',
+  level: 3,
+  url: 'https://reactjs.org/',
+};
+---
+
+<Skill levelledSkill={levelledSkill} />

src/types/skills-section.ts

@@ -1,6 +1,6 @@
 import type { SectionConfig, Tag } from './common';
 
-interface LevelledSkill extends Tag {
+export interface LevelledSkill extends Tag {
   level: 1 | 2 | 3 | 4 | 5;
 }