nextjs製サイトで引用ブロック(blockquoteタグ、citeタグ)を作成する

1import React from "react";
2import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
3
4type text = {
5  content: string;
6  title: string;
7  author: string;
8  publisher: string;
9  publicationDate: string;
10  page: string;
11  link: string;
12};
13
14const Citation = (props: text) => {
15  const { content, title, author, publisher, publicationDate, page, link } =
16    props;
17  return (
18    <div>
19      <div className="bg-gray-200 p-4">
20        <FormatQuoteIcon fontSize="large" className="mb-3" />
21        <blockquote className="text-lg italic font-semibold text-gray-900 dark:text-white">
22          <p>“{content}”</p>
23          <footer className="mt-10">
24            <div className="text-sm  font-semibold text-gray-800 dark:text-neutral-400">
25              出典 :
26              <cite>
27                <a className="text-blue-500 " href={link}>
28                  {title}
29                </a>
30              </cite>
31            </div>
32            <div className="text-sm font-semibold text-gray-800 dark:text-neutral-400">
33              著者 : {author}
34            </div>
35            <div className="text-sm font-semibold text-gray-800 dark:text-neutral-400">
36              出版社 : {publisher}
37            </div>
38            <div className="text-sm font-semibold text-gray-800 dark:text-neutral-400">
39              発行年月日 : {publicationDate}
40            </div>
41            <div className="text-sm font-semibold text-gray-800 dark:text-neutral-400">
42              ページ : {page}
43            </div>
44          </footer>
45        </blockquote>
46      </div>
47    </div>
48  );
49};
50
51export default Citation;
52

1 <Citation
2    content={"ここに引用する本文の内容を書きます。"}
3    title={
4        "ここには書籍のタイトルを入れます"
5    }
6    author={"〇〇"}
7    publisher={"〇〇"}
8    publicationDate={"〇〇"}
9    page={"〇〇"}
10    link={"販売元の公式サイトのurlを入れます"}
11  />