refactor: mark props as readonly in multiple frontend components

frontend/src/app/global-error.tsx

@@ -102,7 +102,7 @@ export const ErrorWrapper: React.FC<{ children: React.ReactNode }> = ({ children
   )
 }
 
-export default function GlobalError({ error }: { error: Error }) {
+export default function GlobalError({ error }: Readonly<{ error: Error }>) {
   Sentry.captureException(error)
   const errorConfig = ERROR_CONFIGS['500']
   return <ErrorDisplay {...errorConfig} />

frontend/src/app/members/[memberKey]/layout.tsx

@@ -38,10 +38,10 @@ export async function generateMetadata({
 export default async function UserDetailsLayout({
   children,
   params,
-}: {
+}: Readonly<{
   children: React.ReactNode
   params: Promise<{ memberKey: string }>
-}) {
+}>) {
   const { memberKey } = await params
 
   const { data } = await apolloClient.query({

frontend/src/app/projects/layout.tsx

@@ -3,6 +3,10 @@ import React from 'react'
 import { getStaticMetadata } from 'utils/metaconfig'
 export const metadata: Metadata = getStaticMetadata('projects', '/projects')
 
-export default function ProjectsLayout({ children }: { children: React.ReactNode }) {
+export default function ProjectsLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
   return <>{children}</>
 }

frontend/src/components/LogoCarousel.tsx

@@ -7,7 +7,7 @@ interface MovingLogosProps {
   sponsors: Sponsor[]
 }
 
-export default function MovingLogos({ sponsors }: MovingLogosProps) {
+export default function MovingLogos({ sponsors }: Readonly<MovingLogosProps>) {
   const scrollerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {

frontend/src/components/MarkdownWrapper.tsx

@@ -2,7 +2,13 @@ import DOMPurify from 'dompurify'
 import markdownit from 'markdown-it'
 import taskLists from 'markdown-it-task-lists'
 
-export default function Markdown({ content, className }: { content: string; className?: string }) {
+export default function Markdown({
+  content,
+  className,
+}: Readonly<{
+  content: string
+  className?: string
+}>) {
   // prettier-ignore
   const md = markdownit({  // NOSONAR - Safe to use markdown-it as we use DOMPurify to sanitize the content.
     breaks: true,

frontend/src/components/NavDropDown.tsx

@@ -8,8 +8,7 @@ interface NavDropDownProps {
   pathname: string
   link: LinkType
 }
-
-export default function NavDropdown({ link, pathname }: NavDropDownProps) {
+export default function NavDropdown({ link, pathname }: Readonly<NavDropDownProps>) {
   const [isOpen, setIsOpen] = useState(false)
   const dropdownRef = useRef(null)
   const dropdownId = useId()

frontend/src/wrappers/provider.tsx

@@ -17,7 +17,11 @@ function AppInitializer() {
   return null
 }
 
-export function Providers({ children }: { children: React.ReactNode }) {
+export function Providers({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
   return (
     <Suspense>
       <SessionProvider>