aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/layout/comment.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/layout/comment.tsx')
-rw-r--r--src/components/organisms/layout/comment.tsx189
1 files changed, 0 insertions, 189 deletions
diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx
deleted file mode 100644
index b55bb3d..0000000
--- a/src/components/organisms/layout/comment.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import NextImage from 'next/image';
-import Script from 'next/script';
-import type { FC } from 'react';
-import { useIntl } from 'react-intl';
-import type { Comment as CommentSchema, WithContext } from 'schema-dts';
-import type { SingleComment } from '../../../types';
-import { useSettings, useToggle } from '../../../utils/hooks';
-import { Button, Heading, Link, Time } from '../../atoms';
-import {
- Card,
- CardActions,
- CardBody,
- CardCover,
- CardFooter,
- CardHeader,
- CardMeta,
- CardTitle,
-} from '../../molecules';
-import { CommentForm, type CommentFormProps } from '../forms';
-import styles from './comment.module.scss';
-
-export type UserCommentProps = Pick<
- SingleComment,
- 'approved' | 'content' | 'id' | 'meta' | 'parentId'
-> &
- Pick<CommentFormProps, 'onSubmit'> & {
- /**
- * Enable or disable the reply button. Default: true.
- */
- canReply?: boolean;
- };
-
-/**
- * UserComment component
- *
- * Render a single comment.
- */
-export const UserComment: FC<UserCommentProps> = ({
- approved,
- canReply = true,
- content,
- id,
- meta,
- onSubmit,
- parentId,
- ...props
-}) => {
- const intl = useIntl();
- const { website } = useSettings();
- const [isReplying, toggleIsReplying] = useToggle(false);
-
- if (!approved) {
- return (
- <div className={styles.wrapper}>
- {intl.formatMessage({
- defaultMessage: 'This comment is awaiting moderation...',
- description: 'Comment: awaiting moderation',
- id: '6a1Uo6',
- })}
- </div>
- );
- }
-
- const { author, date } = meta;
-
- const buttonLabel = isReplying
- ? intl.formatMessage({
- defaultMessage: 'Cancel reply',
- description: 'Comment: cancel reply button',
- id: 'LCorTC',
- })
- : intl.formatMessage({
- defaultMessage: 'Reply',
- description: 'Comment: reply button',
- id: 'hzHuCc',
- });
- const formTitle = intl.formatMessage({
- defaultMessage: 'Leave a reply',
- description: 'Comment: comment form title',
- id: '2fD5CI',
- });
-
- const commentSchema: WithContext<CommentSchema> = {
- '@context': 'https://schema.org',
- '@id': `${website.url}/#comment-${id}`,
- '@type': 'Comment',
- parentItem: parentId
- ? { '@id': `${website.url}/#comment-${parentId}` }
- : undefined,
- about: { '@type': 'Article', '@id': `${website.url}/#article` },
- author: {
- '@type': 'Person',
- name: author.name,
- image: author.avatar?.src,
- url: author.website,
- },
- creator: {
- '@type': 'Person',
- name: author.name,
- image: author.avatar?.src,
- url: author.website,
- },
- dateCreated: date,
- datePublished: date,
- text: content,
- };
-
- return (
- <>
- <Script
- dangerouslySetInnerHTML={{ __html: JSON.stringify(commentSchema) }}
- id="schema-comments"
- type="application/ld+json"
- />
- <Card
- cover={
- author.avatar ? (
- <CardCover className={styles.avatar}>
- <NextImage
- {...props}
- alt={author.avatar.alt}
- fill
- src={author.avatar.src}
- style={{ objectFit: 'cover' }}
- />
- </CardCover>
- ) : undefined
- }
- id={`comment-${id}`}
- variant={2}
- >
- <CardHeader>
- <CardTitle className={styles.author} isFake>
- {author.website ? (
- <Link href={author.website}>{author.name}</Link>
- ) : (
- author.name
- )}
- </CardTitle>
- <CardMeta
- hasInlinedItems
- items={[
- {
- id: 'publication-date',
- label: intl.formatMessage({
- defaultMessage: 'Published on:',
- description: 'Comment: publication date label',
- id: 'soj7do',
- }),
- value: (
- <Link href={`#comment-${id}`}>
- <Time date={date} showTime />
- </Link>
- ),
- },
- ]}
- />
- </CardHeader>
- <CardBody
- className={styles.body}
- dangerouslySetInnerHTML={{ __html: content }}
- />
- {canReply ? (
- <CardFooter>
- <CardActions>
- <Button kind="tertiary" onClick={toggleIsReplying}>
- {buttonLabel}
- </Button>
- </CardActions>
- </CardFooter>
- ) : null}
- </Card>
- {isReplying ? (
- <Card className={styles.form__wrapper} variant={2}>
- <CardBody>
- <Heading className={styles.form__heading} level={2}>
- {formTitle}
- </Heading>
- <CommentForm
- className={styles.form}
- onSubmit={onSubmit}
- parentId={id}
- />
- </CardBody>
- </Card>
- ) : null}
- </>
- );
-};