-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2c6ea48
commit ebec9b4
Showing
4 changed files
with
174 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
76 changes: 76 additions & 0 deletions
76
next/components/molecules/sections/general/TestimonialsSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import { TestimonialItemBlockFragment, TestimonialsSectionFragment } from '@backend/graphql' | ||
| import { Typography } from '@bratislava/component-library' | ||
| import Markdown from '@components/atoms/Markdown' | ||
| import { isDefined } from '@utils/isDefined' | ||
| import cx from 'classnames' | ||
| import React from 'react' | ||
| import { twMerge } from 'tailwind-merge' | ||
|
|
||
| type TestimonialsSectionProps = { | ||
| section: TestimonialsSectionFragment | ||
| } | ||
|
|
||
| const TestimonialCard = ({ | ||
| testimonial, | ||
| hasBackground, | ||
| className, | ||
| }: { | ||
| testimonial: TestimonialItemBlockFragment | ||
| hasBackground?: boolean | ||
| className?: string | ||
| }) => { | ||
| return ( | ||
| <div | ||
| className={twMerge( | ||
| 'relative rounded-lg bg-white p-4', | ||
| hasBackground ? 'bg-white' : 'bg-category-100', | ||
| className, | ||
| )} | ||
| > | ||
| {/* TODO validate if this html syntax is ok */} | ||
| <blockquote className="flex flex-col gap-4"> | ||
| <Typography type="p">{testimonial.quote}</Typography> | ||
| <footer> | ||
| {/* TODO there probably should not be p inside cite, but cite should be used directly */} | ||
| <cite> | ||
| <Typography type="p" fontWeight="semibold"> | ||
| {testimonial.name} | ||
| </Typography> | ||
| </cite> | ||
| </footer> | ||
| </blockquote> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const Testimonials = ({ section }: TestimonialsSectionProps) => { | ||
| return ( | ||
| <div className="grid grid-cols-1 gap-6 md:grid-cols-12 md:gap-8"> | ||
| <div className={cx('col-span-1 flex flex-col gap-3', 'md:col-span-5')}> | ||
| {section.title ? <Typography type="h2">{section.title}</Typography> : null} | ||
| {section.text ? <Markdown content={section.text} variant="small-no-respo" /> : null} | ||
| </div> | ||
| <div className={cx('hidden md:block', 'col-span-1')} /> | ||
| <div className={cx('col-span-1', 'md:col-span-6')}> | ||
| {/* TODO render as <ul> */} | ||
| <div className="grid grid-cols-1 gap-2 md:grid-cols-2 md:gap-3"> | ||
| {section.testimonials.filter(isDefined).map((testimonial, index) => ( | ||
| <TestimonialCard | ||
| // eslint-disable-next-line react/no-array-index-key | ||
| key={index} | ||
| className={cx('col-span-1', 'md:col-span-2')} | ||
| testimonial={testimonial} | ||
| hasBackground={section.hasBackground ?? false} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const TestimonialsSection = ({ section }: TestimonialsSectionProps) => { | ||
| return <Testimonials section={section} /> | ||
| } | ||
|
|
||
| export default TestimonialsSection |