Feature/add announcement card

canopeum_frontend/src/components/AnnouncementCard/AnnouncementCard.scss

@@ -0,0 +1,18 @@
+@import '@assets/styles/theme-variables.scss';
+
+
+.card {
+  border-width: $card-border-width;
+  border-radius: $card-border-width;
+  border-color: $card-border-color;
+  background-color: $card-bg;
+}
+
+.card-title {
+  font-family: $font-family-sans-serif;
+  font-size: $h2-font-size;
+}
+
+.card-text {
+  font-family: $font-family-monospace;
+}

canopeum_frontend/src/components/AnnouncementCard/AnnouncementCard.tsx

@@ -0,0 +1,61 @@
+import './AnnouncementCard.scss';
+
+import { useEffect, useState } from 'react'
+
+import type { Site } from '../../services/api'
+import api from '../../services/apiInterface'
+import { ensureError } from '../../services/errors'
+
+const AnnouncementCard = ({ siteId }: { readonly siteId: number }) => {
+  const [site, setSite] = useState<Site>()
+  const [isLoadingSite, setIsLoadingSite] = useState(false)
+  const [SiteError, setSiteError] = useState<Error | undefined>(undefined)
+
+  const fetchSites = async () => {
+    setIsLoadingSite(true)
+    try {
+      const response = await api().social.site(siteId)
+      setSite(response)
+    } catch (error: unknown) {
+      setSiteError(ensureError(error))
+    } finally {
+      setIsLoadingSite(false)
+    }
+  }
+
+  useEffect((): void => {
+    void fetchSites()
+  }, [])
+
+  const renderAnnouncementCard = () => {
+    if (isLoadingSite) {
+      return <p>Loading...</p>
+    }
+
+    if (SiteError) {
+      return <p>Error: {SiteError.message}</p>
+    }
+
+    return (
+      <div className='card-body'>
+        <div className='d-flex justify-content-between align-items-center'>
+          <h2 className='card-title'>Announcement</h2>
+          <span className='material-symbols-outlined'>edit_square</span>
+        </div>
+        <p className='card-text'>
+          {site?.announcement.body}
+        </p>
+        <a href={site?.announcement.link}>{site?.announcement.link}</a>
+      </div>
+    )
+  }
+
+
+  return(
+    <div className='card rounded px-3 py-2 col-3'>
+      {renderAnnouncementCard()}
+    </div>
+  )
+}
+
+export default AnnouncementCard;

canopeum_frontend/src/pages/MapSite.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
+import AnnouncementCard from '../components/AnnouncementCard/AnnouncementCard';
 import SiteSummaryCard from '../components/site/SiteSummaryCard'
 import type { SiteSocial } from '../services/api'
 import api from '../services/apiInterface'
@@ -31,6 +32,7 @@ const MapSite = () => {
             <div className='bg-white rounded-2 2 py-2'>
               <h1>Left</h1>
             </div>
+            <AnnouncementCard siteId={ Number(siteId) } />
           </div>
           <div className='col-8'>
             <div className='bg-white rounded-2 px-3 py-2'>