From e6bb39e3b33bb05ad5bfa4bed45ff40865e75adb Mon Sep 17 00:00:00 2001 From: Szymon Kin <68154191+hoolek77@users.noreply.github.com> Date: Sat, 12 Nov 2022 22:15:56 +0100 Subject: [PATCH] Create tooltip component (#77) --- package-lock.json | 51 ++++++++++++++++++++++ package.json | 1 + src/components/atoms/icon-with-tooltip.tsx | 15 +++++++ src/components/atoms/sidebar-item.tsx | 22 ++++++---- src/components/atoms/tooltip.tsx | 25 +++++++++++ src/components/organisms/skill.astro | 36 ++++++++++----- src/data.ts | 1 + src/pages/index.astro | 13 +++++- src/pages/playground/tooltip.astro | 10 +++++ src/types/main-section.ts | 2 +- 10 files changed, 154 insertions(+), 22 deletions(-) create mode 100644 src/components/atoms/icon-with-tooltip.tsx create mode 100644 src/components/atoms/tooltip.tsx create mode 100644 src/pages/playground/tooltip.astro diff --git a/package-lock.json b/package-lock.json index e0ec678..5f29d0c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@astrojs/image": "0.11.4", "@iconify-icon/react": "1.0.1", + "@tippyjs/react": "4.2.6", "clsx": "1.2.1", "prettier-plugin-astro": "0.7.0", "react": "18.2.0", @@ -898,6 +899,15 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "node_modules/@popperjs/core": { + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@proload/core": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@proload/core/-/core-0.3.3.tgz", @@ -920,6 +930,18 @@ "@proload/core": "^0.3.2" } }, + "node_modules/@tippyjs/react": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz", + "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==", + "dependencies": { + "tippy.js": "^6.3.1" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/@types/acorn": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz", @@ -9280,6 +9302,14 @@ "globrex": "^0.1.2" } }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -11189,6 +11219,11 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "@popperjs/core": { + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==" + }, "@proload/core": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@proload/core/-/core-0.3.3.tgz", @@ -11208,6 +11243,14 @@ "tsm": "^2.1.4" } }, + "@tippyjs/react": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz", + "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==", + "requires": { + "tippy.js": "^6.3.1" + } + }, "@types/acorn": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz", @@ -17105,6 +17148,14 @@ "globrex": "^0.1.2" } }, + "tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "requires": { + "@popperjs/core": "^2.9.0" + } + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", diff --git a/package.json b/package.json index 5f2977c..a6ce06a 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "dependencies": { "@astrojs/image": "0.11.4", "@iconify-icon/react": "1.0.1", + "@tippyjs/react": "4.2.6", "clsx": "1.2.1", "prettier-plugin-astro": "0.7.0", "react": "18.2.0", diff --git a/src/components/atoms/icon-with-tooltip.tsx b/src/components/atoms/icon-with-tooltip.tsx new file mode 100644 index 0000000..7c5482e --- /dev/null +++ b/src/components/atoms/icon-with-tooltip.tsx @@ -0,0 +1,15 @@ +import type { IconProps } from './icon'; +import Icon from './icon'; +import Tooltip, { TooltipProps } from './tooltip'; + +type Props = IconProps & Omit; + +const IconWithTooltip = ({ name, color, size, ...tooltipProps }: Props) => ( + +
+ +
+ +); + +export default IconWithTooltip; diff --git a/src/components/atoms/sidebar-item.tsx b/src/components/atoms/sidebar-item.tsx index ce7576c..836332f 100644 --- a/src/components/atoms/sidebar-item.tsx +++ b/src/components/atoms/sidebar-item.tsx @@ -5,28 +5,32 @@ import type { Section } from '@/types/data'; import type { IconName } from '@/types/icon'; import Icon from './icon'; +import Tooltip from './tooltip'; -export interface Props { +export interface SidebarItemProps { section: Section; icon: IconName; + title?: string; } -const SidebarItem = ({ section, icon }: Props) => { +const SidebarItem = ({ section, icon, title = '' }: SidebarItemProps) => { const { hash } = useLocation(); const href = `#${section}`; const active = hash === '' ? section === MAIN_SECTION : hash === href; return ( - + - - + aria-current={active ? 'page' : undefined} + > + + + ); }; diff --git a/src/components/atoms/tooltip.tsx b/src/components/atoms/tooltip.tsx new file mode 100644 index 0000000..7f4c308 --- /dev/null +++ b/src/components/atoms/tooltip.tsx @@ -0,0 +1,25 @@ +import Tippy, { TippyProps } from '@tippyjs/react/headless'; +import type { ReactElement } from 'react'; + +export interface TooltipProps { + children: ReactElement; + content: string; + placement?: TippyProps['placement']; +} + +const Tooltip = ({ children, content, placement = 'top' }: TooltipProps) => { + return ( + ( +
+ {content} +
+ )} + placement={placement} + > + {children} + + ); +}; + +export default Tooltip; diff --git a/src/components/organisms/skill.astro b/src/components/organisms/skill.astro index f6ab60a..a33501f 100644 --- a/src/components/organisms/skill.astro +++ b/src/components/organisms/skill.astro @@ -1,26 +1,42 @@ --- import Icon from '@/atoms/icon'; +import IconWithTooltip from '@/atoms/icon-with-tooltip'; import Typography from '@/atoms/typography.astro'; +import type { IconName } from '@/types/icon'; 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 { url, icon, iconColor, name, level, description } = Astro.props; const IconWrapper = url ? 'a' : 'div'; ---
- - - - {name} - - +
+ + + + {name} + + + { + description && ( + + ) + } +
diff --git a/src/data.ts b/src/data.ts index 6a10a79..9c6f598 100644 --- a/src/data.ts +++ b/src/data.ts @@ -9,6 +9,7 @@ const data: Data = { main: { config: { icon: 'fa6-solid:user', + title: 'Profile', }, image: import('@/assets/my-image.jpeg'), fullName: 'Mark Freeman', diff --git a/src/pages/index.astro b/src/pages/index.astro index 672c126..83a7322 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -26,12 +26,21 @@ const { seo, ...dataWithoutSeo } = data;
-
+
{ getObjectKeys(dataWithoutSeo).map((key) => { const sectionData = dataWithoutSeo[key]; - return sectionData && ; + return ( + sectionData && ( + + ) + ); }) } diff --git a/src/pages/playground/tooltip.astro b/src/pages/playground/tooltip.astro new file mode 100644 index 0000000..054a37d --- /dev/null +++ b/src/pages/playground/tooltip.astro @@ -0,0 +1,10 @@ +--- +import SidebarItem from '@/atoms/sidebar-item'; +import Tooltip from '@/atoms/tooltip'; +--- + +
+ + + +
diff --git a/src/types/main-section.ts b/src/types/main-section.ts index 69a6f01..6a3b0f2 100644 --- a/src/types/main-section.ts +++ b/src/types/main-section.ts @@ -13,5 +13,5 @@ export interface MainSection { downloadedFileName?: string; }; socials: Social[]; - config: Omit; + config: SectionConfig; }