From 1a5e53775052e5a43a34dac5abdd66be1429495b Mon Sep 17 00:00:00 2001 From: Szymon Kin <68154191+hoolek77@users.noreply.github.com> Date: Sun, 23 Oct 2022 16:47:56 +0200 Subject: [PATCH] Create testimonial component + testimonials section (#53) --- src/components/atoms/divider.astro | 1 + src/components/atoms/section-card.astro | 2 +- src/components/organisms/testimonial.astro | 37 +++++++++++++++ .../sections/testimonials-section.astro | 22 ++++++++- src/pages/playground/testimonial.astro | 20 +++++++++ .../playground/testimonials-section.astro | 45 +++++++++++++++++++ src/types/testimonials-section.ts | 2 +- 7 files changed, 126 insertions(+), 3 deletions(-) create mode 100644 src/components/atoms/divider.astro create mode 100644 src/components/organisms/testimonial.astro create mode 100644 src/pages/playground/testimonial.astro create mode 100644 src/pages/playground/testimonials-section.astro diff --git a/src/components/atoms/divider.astro b/src/components/atoms/divider.astro new file mode 100644 index 0000000..58375f6 --- /dev/null +++ b/src/components/atoms/divider.astro @@ -0,0 +1 @@ +
diff --git a/src/components/atoms/section-card.astro b/src/components/atoms/section-card.astro index 283f44a..85de4c8 100644 --- a/src/components/atoms/section-card.astro +++ b/src/components/atoms/section-card.astro @@ -1 +1 @@ -
+
diff --git a/src/components/organisms/testimonial.astro b/src/components/organisms/testimonial.astro new file mode 100644 index 0000000..81f1585 --- /dev/null +++ b/src/components/organisms/testimonial.astro @@ -0,0 +1,37 @@ +--- +import { Image } from '@astrojs/image/components'; + +import IconButton from '@/atoms/icon-button.astro'; +import Typography from '@/atoms/typography.astro'; +import type { Testimonial } from '@/types/testimonials-section'; + +export interface Props extends astroHTML.JSX.HTMLAttributes { + testimonial: Testimonial; +} + +const { + testimonial: { author, content, image, relation, socials }, +} = Astro.props; +--- + +
+
+
+ {author} +
+ {author} + {relation} +
+
+ { + socials && ( +
+ {socials.map(({ icon, url }) => ( + + ))} +
+ ) + } +
+ {content} +
diff --git a/src/components/sections/testimonials-section.astro b/src/components/sections/testimonials-section.astro index f35dda4..e10aaa7 100644 --- a/src/components/sections/testimonials-section.astro +++ b/src/components/sections/testimonials-section.astro @@ -1,8 +1,28 @@ --- +import Divider from '@/atoms/divider.astro'; import SectionCard from '@/atoms/section-card.astro'; +import Typography from '@/atoms/typography.astro'; +import Testimonial from '@/organisms/testimonial.astro'; import type { TestimonialsSection } from '@/types/testimonials-section'; export interface Props extends TestimonialsSection {} + +const { + testimonials, + config: { title }, +} = Astro.props; --- -Testimonials section + + {title} +
+ { + testimonials.map((testimonial, index) => ( + <> + + {index !== testimonials.length - 1 && } + + )) + } +
+ diff --git a/src/pages/playground/testimonial.astro b/src/pages/playground/testimonial.astro new file mode 100644 index 0000000..46dbe12 --- /dev/null +++ b/src/pages/playground/testimonial.astro @@ -0,0 +1,20 @@ +--- +import Testimonial from '@/organisms/testimonial.astro'; +import type { Testimonial as TestimonialData } from '@/types/testimonials-section'; + +const testimonial: TestimonialData = { + author: 'Howard Stewart', + relation: 'We work together as front-end developers at Google', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl vel tincidunt aliquam, nunc nisl aliquet nisl, eget aliquet nunc nisl euismod nisl. Sed euismod, nisl vel tincidunt aliquam, nunc nisl aliquet nisl, eget aliquet nunc nisl euismod nisl.', + image: import('@/assets/testimonials/testimonial-1.jpeg'), + socials: [ + { name: 'GitHub', icon: 'fa6-brands:github', url: '#' }, + { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' }, + ], +}; +--- + +
+ +
diff --git a/src/pages/playground/testimonials-section.astro b/src/pages/playground/testimonials-section.astro new file mode 100644 index 0000000..47cef67 --- /dev/null +++ b/src/pages/playground/testimonials-section.astro @@ -0,0 +1,45 @@ +--- +import TestimonialsSection from '@/sections/testimonials-section.astro'; +import type { Testimonial } from '@/types/testimonials-section'; + +const testimonials: Testimonial[] = [ + { + image: import('@/assets/testimonials/testimonial-1.jpeg'), + author: 'Howard Stewart', + relation: 'We work together as front-end developers at Google', + content: + 'In nec mattis sem. Morbi purus lorem, euismod ac varius at, aliquet vitae augue. Pellentesque ut facilisis felis. In sed dui blandit, aliquet odio eu, elementum leo. In facilisis dapibus tortor ac volutpat. Cras cursus nec odio maximus elementum.', + socials: [ + { name: 'GitHub', icon: 'fa6-brands:github', url: '#' }, + { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' }, + ], + }, + { + image: import('@/assets/testimonials/testimonial-2.jpeg'), + author: 'Jean Richards', + relation: 'My project manager at GitLab', + content: + 'Praesent nec congue elit. Vestibulum lobortis congue ipsum, a gravida mi tempus ac. Mauris aliquet purus nibh, vel varius turpis tempus non. Nullam eget ultricies orci. Quisque nulla ante, auctor eget varius ac, imperdiet nec magna.', + socials: [{ name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' }], + }, + { + image: import('@/assets/testimonials/testimonial-3.jpeg'), + author: 'Jason Fisher', + relation: 'My customer for sidewing.com website', + content: + 'Mauris tincidunt at purus vehicula porta. Mauris eget mollis turpis. Sed iaculis rutrum pharetra. Vivamus risus quam, suscipit et semper ut, aliquet ut tellus. Donec quis auctor nunc.', + socials: [ + { name: 'GitHub', icon: 'fa6-brands:github', url: '#' }, + { name: 'Website', icon: 'fa6-solid:globe', url: '#' }, + ], + }, +]; +--- + + +
+
+ +
+
+ diff --git a/src/types/testimonials-section.ts b/src/types/testimonials-section.ts index d0ddf38..996d554 100644 --- a/src/types/testimonials-section.ts +++ b/src/types/testimonials-section.ts @@ -1,6 +1,6 @@ import type { LocalImage, SectionConfig, Social } from './common'; -interface Testimonial { +export interface Testimonial { image: LocalImage; author: string; relation: string;