aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/CommentForm
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/CommentForm')
-rw-r--r--src/components/CommentForm/CommentForm.tsx18
1 files changed, 11 insertions, 7 deletions
diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
index 3539311..c409d04 100644
--- a/src/components/CommentForm/CommentForm.tsx
+++ b/src/components/CommentForm/CommentForm.tsx
@@ -1,5 +1,5 @@
import { ButtonSubmit } from '@components/Buttons';
-import { Form, FormItem, Input, Label, TextArea } from '@components/Form';
+import { Field, Form, FormItem, Label } from '@components/FormElements';
import Notice from '@components/Notice/Notice';
import Spinner from '@components/Spinner/Spinner';
import { createComment } from '@services/graphql/mutations';
@@ -144,30 +144,32 @@ const CommentForm = (
</h2>
<Form
submitHandler={submitHandler}
- modifier={isReply ? 'centered' : undefined}
+ kind={isReply ? 'centered' : undefined}
>
<FormItem>
- <Input
+ <Field
id="commenter-name"
name="commenter-name"
label={getLabel(nameLabelBody, 'commenter-name', true)}
value={name}
setValue={setName}
+ required={true}
ref={ref}
/>
</FormItem>
<FormItem>
- <Input
+ <Field
id="commenter-email"
name="commenter-email"
- type="email"
+ kind="email"
label={getLabel(emailLabelBody, 'commenter-email', true)}
value={email}
setValue={setEmail}
+ required={true}
/>
</FormItem>
<FormItem>
- <Input
+ <Field
id="commenter-website"
name="commenter-website"
label={getLabel(websiteLabelBody, 'commenter-website')}
@@ -176,12 +178,14 @@ const CommentForm = (
/>
</FormItem>
<FormItem>
- <TextArea
+ <Field
id="commenter-comment"
name="commenter-comment"
+ kind="textarea"
label={getLabel(commentLabelBody, 'commenter-comment', true)}
value={comment}
setValue={setComment}
+ required={true}
/>
</FormItem>
<FormItem>
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 12:03:38 +0000
.sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
import PostMeta from '@components/PostMeta/PostMeta';
import { t } from '@lingui/macro';
import { ArticlePreview } from '@ts/types/articles';
import Link from 'next/link';
import ArrowRightIcon from '@assets/images/icon-arrow-right.svg';
import styles from './PostPreview.module.scss';
import Image from 'next/image';

type TitleLevel = 2 | 3 | 4 | 5 | 6;

const PostPreview = ({
  post,
  titleLevel,
}: {
  post: ArticlePreview;
  titleLevel: TitleLevel;
}) => {
  const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;

  return (
    <article className={styles.wrapper}>
      {post.featuredImage && Object.keys(post.featuredImage).length > 0 && (
        <div className={styles.cover}>
          <Image
            src={post.featuredImage.sourceUrl}
            alt={post.featuredImage.altText}
            layout="fill"
            objectFit="contain"
          />
        </div>
      )}
      <header className={styles.header}>
        <TitleTag>
          <Link href={`/article/${post.slug}`}>
            <a>{post.title}</a>
          </Link>
        </TitleTag>
      </header>
      <div
        className={styles.body}
        dangerouslySetInnerHTML={{ __html: post.content }}
      ></div>
      <footer className={styles.footer}>
        <Link href={`/article/${post.slug}`}>
          <a className={styles['read-more']}>
            {t`Read more`}
            <span className="screen-reader-text">
              {' '}
              {t({ message: `about ${post.title}`, comment: 'Post title' })}
            </span>
            <ArrowRightIcon className={styles.icon} />
          </a>
        </Link>
      </footer>
      <PostMeta
        commentCount={post.commentCount}
        publicationDate={post.date.publication}
        updateDate={post.date.update}
        thematics={post.thematics}
      />
    </article>
  );
};

export default PostPreview;