diff options
Diffstat (limited to 'src/components/organisms')
| -rw-r--r-- | src/components/organisms/layout/cards-list.tsx | 9 | ||||
| -rw-r--r-- | src/components/organisms/layout/comment.test.tsx | 2 | ||||
| -rw-r--r-- | src/components/organisms/layout/comment.tsx | 17 | ||||
| -rw-r--r-- | src/components/organisms/layout/overview.module.scss | 6 | ||||
| -rw-r--r-- | src/components/organisms/layout/overview.tsx | 8 |
5 files changed, 20 insertions, 22 deletions
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx index dd05e59..f6cb6ed 100644 --- a/src/components/organisms/layout/cards-list.tsx +++ b/src/components/organisms/layout/cards-list.tsx @@ -6,17 +6,14 @@ import Card, { type CardProps } from '@components/molecules/layout/card'; import { FC } from 'react'; import styles from './cards-list.module.scss'; -export type CardsListItem = Omit< - CardProps, - 'className' | 'coverFit' | 'titleLevel' -> & { +export type CardsListItem = Omit<CardProps, 'className' | 'titleLevel'> & { /** * The card id. */ id: string; }; -export type CardsListProps = Pick<CardProps, 'coverFit' | 'titleLevel'> & +export type CardsListProps = Pick<CardProps, 'titleLevel'> & Pick<ListProps, 'kind'> & { /** * Set additional classnames to the list wrapper. @@ -35,7 +32,6 @@ export type CardsListProps = Pick<CardProps, 'coverFit' | 'titleLevel'> & */ const CardsList: FC<CardsListProps> = ({ className = '', - coverFit, items, kind = 'unordered', titleLevel, @@ -56,7 +52,6 @@ const CardsList: FC<CardsListProps> = ({ <Card key={id} className={styles.card} - coverFit={coverFit} id={id} titleLevel={titleLevel} {...card} diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx index dc6d18d..7290c6c 100644 --- a/src/components/organisms/layout/comment.test.tsx +++ b/src/components/organisms/layout/comment.test.tsx @@ -30,7 +30,7 @@ describe('Comment', () => { screen.getByRole('link', { name: `${formattedDate} at ${formattedTime}`, }) - ).toHaveAttribute('href', `/#comment-${id}`); + ).toHaveAttribute('href', `#comment-${id}`); }); it('renders a reply button', () => { diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx index 497a04c..3b58a79 100644 --- a/src/components/organisms/layout/comment.tsx +++ b/src/components/organisms/layout/comment.tsx @@ -5,7 +5,7 @@ import { type SingleComment } from '@ts/types/app'; import useSettings from '@utils/hooks/use-settings'; import Image from 'next/image'; import Script from 'next/script'; -import { FC, useState } from 'react'; +import { FC, useCallback, useState } from 'react'; import { useIntl } from 'react-intl'; import { type Comment as CommentSchema, type WithContext } from 'schema-dts'; import CommentForm, { type CommentFormProps } from '../forms/comment-form'; @@ -42,6 +42,11 @@ const Comment: FC<CommentProps> = ({ const { website } = useSettings(); const [isReplying, setIsReplying] = useState<boolean>(false); + const handleReply = useCallback( + () => setIsReplying((prevState) => !prevState), + [] + ); + if (!approved) { return ( <div className={styles.wrapper}> @@ -114,11 +119,11 @@ const Comment: FC<CommentProps> = ({ {author.avatar && ( <div className={styles.avatar}> <Image - src={author.avatar.src} - alt={author.avatar.alt} - layout="fill" - objectFit="cover" {...props} + alt={author.avatar.alt} + fill + src={author.avatar.src} + style={{ objectFit: 'cover' }} /> </div> )} @@ -149,7 +154,7 @@ const Comment: FC<CommentProps> = ({ /> <footer className={styles.footer}> {canReply && ( - <Button kind="tertiary" onClick={() => setIsReplying(!isReplying)}> + <Button kind="tertiary" onClick={handleReply}> {buttonLabel} </Button> )} diff --git a/src/components/organisms/layout/overview.module.scss b/src/components/organisms/layout/overview.module.scss index 895bae5..5620513 100644 --- a/src/components/organisms/layout/overview.module.scss +++ b/src/components/organisms/layout/overview.module.scss @@ -36,9 +36,13 @@ .cover { width: fit-content; - max-height: fun.convert-px(175); + height: fun.convert-px(175); margin-bottom: var(--spacing-sm); padding: var(--spacing-2xs); border: fun.convert-px(1) solid var(--color-border); + + img { + object-fit: contain; + } } } diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx index b110e68..04ec79a 100644 --- a/src/components/organisms/layout/overview.tsx +++ b/src/components/organisms/layout/overview.tsx @@ -41,13 +41,7 @@ const Overview: FC<OverviewProps> = ({ className = '', cover, meta }) => { return ( <div className={`${styles.wrapper} ${className}`}> - {cover && ( - <ResponsiveImage - className={styles.cover} - objectFit="contain" - {...cover} - /> - )} + {cover && <ResponsiveImage className={styles.cover} {...cover} />} <Meta data={{ ...remainingMeta, technologies }} layout="inline" |
