Rename main folders and write sql backend adaptor

frontend/src/components/Error/Error.jsx

@@ -0,0 +1,17 @@
+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.styles.js

@@ -0,0 +1,44 @@
+import { styled } from 'goober'
+
+export const Wrapper = styled('div')`
+  border-radius: 3px;
+  background-color: var(--error);
+  color: #FFFFFF;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 18px;
+  opacity: 0;
+  max-height: 0;
+  margin: 0;
+  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')`
+  border: 0;
+  background: none;
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 16px;
+  padding: 0;
+`