fix: correct typo and extract shared Notice component

Fix typo "Arrangemtns" to "Arrangements" in figure captions
for all 16 TE*.json dataset files.

Extract a reusable Notice component from Contact and News pages
to avoid duplicated inline notice markup.

Replace react-helmet-async with @dr.pogodin/react-helmet.

Add VS Code workspace config and cspell dictionary.

src/features/contact/Contact.module.css

@@ -7,10 +7,6 @@
 .contact p {
   margin: 5px 0 15px 15px;
 }
-.notice {
-  margin: 10px 0 20px;
-  color: #ff0000;
-}
 .note {
   margin-left: 15px;
   font-style: italic;

src/features/contact/Contact.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { useEffect } from 'react';
 import { useAppDispatch } from '../../app/hooks';
+import Notice from '../notice/Notice';
 import { setTitle } from '../page-title/pageTitleSlice';
 import styles from './Contact.module.css';
 
@@ -11,9 +12,7 @@ const Contact: React.FC = () => {
   }, [dispatch]);
   return (
     <div className={styles.contact}>
-      <section className={styles.notice}>
-        Notice: This site has been archived since May 2019 and is no longer updated.
-      </section>
+      <Notice />
       <h4>CelLoc-3D is managed by Teppei Ebina and Tadaharu Tsumoto</h4>
       <p>
         Laboratory for cortical circuit plasticity

src/features/news/News.module.css

@@ -1,8 +1,8 @@
 .news {
-  margin: 10px;
+  margin: 20px;
 }
 .item {
-  margin: 0 10px 10px 10px;
+  margin: 0 0 10px 0;
 }
 .item:after {
   content: ".";

src/features/news/News.tsx

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { useAppDispatch } from '../../app/hooks';
 import JsonNews_ from '../../assets/news.json';
 import nl2br from '../../utils/nl2br';
+import Notice from '../notice/Notice';
 import { setTitle } from '../page-title/pageTitleSlice';
 import styles from './News.module.css';
 
@@ -23,6 +24,7 @@ const News: React.FC = () => {
 
   return (
     <div className={styles.news}>
+      <Notice />
       {JsonNews.map((item, key) => {
         return (
           // biome-ignore lint/suspicious/noArrayIndexKey: static JSON data

src/features/notice/Notice.module.css

@@ -0,0 +1,4 @@
+.notice {
+  margin: 10px 0 20px;
+  color: #ff0000;
+}

src/features/notice/Notice.tsx

@@ -0,0 +1,10 @@
+import type React from 'react';
+import styles from './Notice.module.css';
+
+const Notice: React.FC = () => {
+  return (
+    <section className={styles.notice}>This site has been archived since May 2019 and is no longer updated.</section>
+  );
+};
+
+export default Notice;

src/features/page-title/PageTitle.tsx

@@ -1,5 +1,5 @@
+import { Helmet } from '@dr.pogodin/react-helmet';
 import type React from 'react';
-import { Helmet } from 'react-helmet-async';
 import { useAppSelector } from '../../app/hooks';
 import styles from './PageTitle.module.css';
 import { selectPageTitle } from './pageTitleSlice';

src/index.tsx

@@ -1,6 +1,6 @@
+import { HelmetProvider } from '@dr.pogodin/react-helmet';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { HelmetProvider } from 'react-helmet-async';
 import { Provider } from 'react-redux';
 import App from './App';
 import { store } from './app/store';