Start setting up Next js with the new app router

frontend/src/components/Error/Error.jsx

@@ -1,17 +0,0 @@
-import { X } from 'lucide-react'
-
-import { Wrapper, CloseButton } from './Error.styles'
-
-const Error = ({
-  children,
-  onClose,
-  open = true,
-  ...props
-}) => (
-  <Wrapper role="alert" open={open} {...props}>
-    {children}
-    <CloseButton type="button" onClick={onClose} title="Close error"><X /></CloseButton>
-  </Wrapper>
-)
-
-export default Error

frontend/src/components/Error/Error.module.scss

@@ -1,6 +1,4 @@
-import { styled } from 'goober'
-
-export const Wrapper = styled('div')`
+.error {
   border-radius: 3px;
   background-color: var(--error);
   color: #FFFFFF;
@@ -15,21 +13,21 @@ export const Wrapper = styled('div')`
   visibility: hidden;
   transition: margin .2s, padding .2s, max-height .2s;
 
-  ${props => props.open && `
-    opacity: 1;
-    visibility: visible;
-    margin: 20px 0;
-    padding: 12px 16px;
-    max-height: 60px;
-    transition: opacity .15s .2s, max-height .2s, margin .2s, padding .2s, visibility .2s;
-  `}
-
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
-`
+}
 
-export const CloseButton = styled('button')`
+.open {
+  opacity: 1;
+  visibility: visible;
+  margin: 20px 0;
+  padding: 12px 16px;
+  max-height: 60px;
+  transition: opacity .15s .2s, max-height .2s, margin .2s, padding .2s, visibility .2s;
+}
+
+.closeButton {
   border: 0;
   background: none;
   height: 30px;
@@ -41,4 +39,4 @@ export const CloseButton = styled('button')`
   justify-content: center;
   margin-left: 16px;
   padding: 0;
-`
+}

frontend/src/components/Error/Error.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { X } from 'lucide-react'
+
+import { makeClass } from '/src/utils'
+
+import styles from './Error.module.scss'
+
+interface ErrorProps {
+  children?: React.ReactNode
+  onClose: () => void
+}
+
+const Error = ({ children, onClose }: ErrorProps) =>
+  <div role="alert" className={makeClass(styles.error, children && styles.open)}>
+    {children}
+    <button
+      className={styles.closeButton}
+      type="button"
+      onClick={onClose}
+      title="Dismiss error"
+    ><X /></button>
+  </div>
+
+export default Error