From a8a05c6298c27d8231b15a60d4ac5a02217591fd Mon Sep 17 00:00:00 2001 From: Hanna Kozak Date: Mon, 17 Oct 2022 22:32:57 +0100 Subject: [PATCH] Create Skill component (#19) Co-authored-by: hoolek77 --- package-lock.json | 13 ++++++------ package.json | 2 ++ src/components/atoms/skill-level-tile.astro | 21 +++++++++++++++++++ src/components/organisms/skill-level.astro | 14 +++++++++++++ src/components/organisms/skill.astro | 23 +++++++++++++++++++++ src/pages/playground/skill.astro | 14 +++++++++++++ src/types/skills-section.ts | 2 +- 7 files changed, 82 insertions(+), 7 deletions(-) create mode 100644 src/components/atoms/skill-level-tile.astro create mode 100644 src/components/organisms/skill-level.astro create mode 100644 src/components/organisms/skill.astro create mode 100644 src/pages/playground/skill.astro diff --git a/package-lock.json b/package-lock.json index 79b43d1..716f8c8 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index 64f05b0..410ea3c 100644 --- a/package.json +++ b/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" diff --git a/src/components/atoms/skill-level-tile.astro b/src/components/atoms/skill-level-tile.astro new file mode 100644 index 0000000..85bbd86 --- /dev/null +++ b/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; +--- + +
+
diff --git a/src/components/organisms/skill-level.astro b/src/components/organisms/skill-level.astro new file mode 100644 index 0000000..7e13697 --- /dev/null +++ b/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]; +--- + +
+ {LEVELS.map((tileLevel) => )} +
diff --git a/src/components/organisms/skill.astro b/src/components/organisms/skill.astro new file mode 100644 index 0000000..e7a3071 --- /dev/null +++ b/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; +--- + +
+
+ + + + {levelledSkill.name} +
+ +
diff --git a/src/pages/playground/skill.astro b/src/pages/playground/skill.astro new file mode 100644 index 0000000..bf1ceed --- /dev/null +++ b/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/', +}; +--- + + diff --git a/src/types/skills-section.ts b/src/types/skills-section.ts index 3bd45f1..7c876a0 100644 --- a/src/types/skills-section.ts +++ b/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; }