From 0e3bb5f8494a6db258c5d0e9ae6116747c560235 Mon Sep 17 00:00:00 2001 From: Szymon Kin <68154191+hoolek77@users.noreply.github.com> Date: Tue, 25 Oct 2022 19:38:25 +0200 Subject: [PATCH] Create profile card section (#55) --- src/components/atoms/button.astro | 7 +- src/components/atoms/tag.astro | 6 +- src/components/atoms/typography.astro | 6 +- src/components/organisms/sidebar.astro | 2 +- src/components/organisms/skill.astro | 4 +- src/components/sections/main-section.astro | 77 +++++++++++++++++++++- src/pages/playground/main-section.astro | 37 +++++++++++ src/types/main-section.ts | 1 + 8 files changed, 126 insertions(+), 14 deletions(-) create mode 100644 src/pages/playground/main-section.astro diff --git a/src/components/atoms/button.astro b/src/components/atoms/button.astro index 72acb89..0831c25 100644 --- a/src/components/atoms/button.astro +++ b/src/components/atoms/button.astro @@ -1,9 +1,10 @@ --- export interface Props { href: string; + download?: astroHTML.JSX.AnchorHTMLAttributes['download']; } -const { href } = Astro.props; +const { href, download } = Astro.props; const classes = { main: 'inline-flex items-center px-4 h-10 text-base font-medium rounded-md shadow-sm text-white bg-primary-600 select-none cursor-pointer', @@ -13,4 +14,6 @@ const classes = { }; --- - + + diff --git a/src/components/atoms/tag.astro b/src/components/atoms/tag.astro index 123b9ff..7557735 100644 --- a/src/components/atoms/tag.astro +++ b/src/components/atoms/tag.astro @@ -6,13 +6,11 @@ import Icon from './icon'; export interface Props { icon?: { name: IconName; - color: string; + color?: string; }; } -const { - props: { icon }, -} = Astro; +const { icon } = Astro.props; ---
diff --git a/src/components/atoms/typography.astro b/src/components/atoms/typography.astro index fdb12eb..9a5535d 100644 --- a/src/components/atoms/typography.astro +++ b/src/components/atoms/typography.astro @@ -25,8 +25,8 @@ const variantToElement = { } as const; const variantToClassName = { - 'main-title': 'text-4xl font-extrabold text-gray-900', - 'main-subtitle': 'text-lg font-medium text-gray-700', + 'main-title': 'text-3xl sm:text-4xl font-extrabold text-gray-900', + 'main-subtitle': 'text-md sm:text-lg font-medium text-gray-700', 'section-title': 'text-3xl font-extrabold text-gray-900', 'section-subtitle': 'text-lg font-extrabold text-gray-900', 'item-title': 'text-xl font-extrabold text-gray-900', @@ -34,7 +34,7 @@ const variantToClassName = { 'item-subtitle': 'text-md font-medium text-gray-700', 'tile-title': 'text-sm font-medium text-gray-700', 'tile-subtitle': 'text-sm font-normal text-gray-500', - paragraph: 'text-base leading-relaxed font-normal text-gray-500', + paragraph: 'text-sm sm:text-base leading-relaxed font-normal text-gray-500', }; export interface Props extends Omit { diff --git a/src/components/organisms/sidebar.astro b/src/components/organisms/sidebar.astro index 16259a8..a88c4c4 100644 --- a/src/components/organisms/sidebar.astro +++ b/src/components/organisms/sidebar.astro @@ -1,6 +1,6 @@ --- export interface Props { - className: string; + className?: string; } const { className } = Astro.props; diff --git a/src/components/organisms/skill.astro b/src/components/organisms/skill.astro index 9fd921b..cb1bb2e 100644 --- a/src/components/organisms/skill.astro +++ b/src/components/organisms/skill.astro @@ -12,9 +12,7 @@ const { url, icon, iconColor, name, level } = Astro.props;
- - - + {name}
diff --git a/src/components/sections/main-section.astro b/src/components/sections/main-section.astro index 7d4b197..b969baa 100644 --- a/src/components/sections/main-section.astro +++ b/src/components/sections/main-section.astro @@ -1,8 +1,83 @@ --- +import { Image } from '@astrojs/image/components'; + +import Button from '@/atoms/button.astro'; +import IconButton from '@/atoms/icon-button.astro'; import SectionCard from '@/atoms/section-card.astro'; +import Tag from '@/atoms/tag.astro'; +import Typography from '@/atoms/typography.astro'; import type { MainSection } from '@/types/main-section'; export interface Props extends MainSection {} + +const { + image, + fullName, + role, + socials, + details, + description, + action: { label, url, downloadedFileName }, + tags, +} = Astro.props; --- -Main section + +
+
+ {fullName} + +
+
+
+
+ {fullName} + {role} +
+ { + socials.length > 0 && ( +
+ {socials.map(({ icon, url: iconUrl }) => ( + + ))} +
+ ) + } +
+
+
+ { + details.map(({ label: detailLabel, value }) => ( +
+ + {detailLabel}: + {value} + +
+ )) + } +
+
+ {description} +
+ { + tags.map(({ icon, iconColor, name, url: tagUrl }) => + tagUrl ? ( + + {name} + + ) : ( + {name} + ) + ) + } +
+
+
+
+
+ diff --git a/src/pages/playground/main-section.astro b/src/pages/playground/main-section.astro new file mode 100644 index 0000000..96ae368 --- /dev/null +++ b/src/pages/playground/main-section.astro @@ -0,0 +1,37 @@ +--- +import MainSection from '@/sections/main-section.astro'; +import type { MainSection as MainSectionData } from '@/types/main-section'; + +const mainSectionData: MainSectionData = { + image: import('@/assets/my-image.jpeg'), + fullName: 'Mark Freeman', + role: 'Senior React Developer', + details: [ + { label: 'Phone', value: '+48 604 343 212' }, + { label: 'Email', value: 'veeeery.long.email.address@gmail.com' }, + { label: 'From', value: 'Warsaw, Poland' }, + { label: 'Salary range', value: '18 000 - 25 000 PLN' }, + ], + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ac dui at vestibulum. In condimentum metus id dui tincidunt, in blandit mi vehicula. Nulla lacinia, erat sit amet elementum vulputate, lectus mauris volutpat mi, vitae accumsan metus elit ut nunc. Vestibulum lacinia enim eget eros fermentum scelerisque. Proin augue leo, posuere ut imperdiet vitae, fermentum eu ipsum. Sed sed neque sagittis, posuere urna nec, commodo leo. Pellentesque posuere justo vitae massa volutpat maximus.', + tags: [{ name: 'Open for freelance' }, { name: 'Available for mentoring' }, { name: 'Working on side project' }], + action: { + label: 'Download CV', + url: '#', + }, + socials: [ + { name: 'Facebook', icon: 'fa6-brands:facebook-f', url: '#' }, + { name: 'GitHub', icon: 'fa6-brands:github', url: '#' }, + { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' }, + { name: 'Twitter', icon: 'fa6-brands:twitter', url: '#' }, + ], +}; +--- + + +
+
+ +
+
+ diff --git a/src/types/main-section.ts b/src/types/main-section.ts index c00573d..69a6f01 100644 --- a/src/types/main-section.ts +++ b/src/types/main-section.ts @@ -10,6 +10,7 @@ export interface MainSection { action: { label: string; url: string; + downloadedFileName?: string; }; socials: Social[]; config: Omit;