aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms')
-rw-r--r--src/components/organisms/layout/cards-list.tsx9
-rw-r--r--src/components/organisms/layout/comment.test.tsx2
-rw-r--r--src/components/organisms/layout/comment.tsx17
-rw-r--r--src/components/organisms/layout/overview.module.scss6
-rw-r--r--src/components/organisms/layout/overview.tsx8
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"