feat: static equipo unirse

src/components/ui/Alert.tsx

@@ -0,0 +1,36 @@
+import { cx } from '@/styled-system/css'
+import { alert, type AlertVariantProps } from '@/styled-system/recipes/alert'
+import { type MergeOmitting } from '@/types/utilities'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
+import { type ButtonHTMLAttributes, type DetailedHTMLProps, type FC, type HTMLAttributes } from 'react'
+
+export type AlertProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AlertVariantProps>
+
+const Alert: FC<AlertProps> = ({ children, className, ...props }) => {
+  const [alertArgs, allOtherProps] = alert.splitVariantProps(props)
+  return (
+    <div
+      className={cx(alert(alertArgs).body, className)}
+      {...allOtherProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+export type AlertCloseButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, AlertVariantProps>
+
+export const AlertCloseButton: FC<AlertCloseButtonProps> = ({ children, className, ...props }) => {
+  const [alertArgs, allOtherProps] = alert.splitVariantProps(props)
+  return (
+    <button
+      className={cx(alert(alertArgs).closeButton, className)}
+      {...allOtherProps}
+    >
+      {children !== undefined ? children : <FontAwesomeIcon icon={faTimes as FontAwesomeIconProps['icon']} fixedWidth />}
+    </button>
+  )
+}
+
+export default Alert

src/components/ui/BackDrop.tsx

@@ -13,30 +13,33 @@ const BackDrop: FC<BackDropProps> = ({ isOpen, onClickAway, children }) => {
   if (typeof window === 'undefined') return null
   return createPortal((
     <AnimatePresence>
-      {isOpen && (
-        <motion.div
-          className={css({
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            zIndex: 'modalBackdrop',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)'
-          })}
-          onClick={(event) => {
-            if (event.target === event.currentTarget) {
-              onClickAway()
-            }
-          }}
-          transition={{ duration: 0.3, ease: 'easeInOut' }}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-        >
-          {children}
-        </motion.div>
-      )}
+      {isOpen
+        ? (
+          <motion.div
+            className={css({
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              zIndex: 'modalBackdrop',
+              backgroundColor: 'rgba(0, 0, 0, 0.5)'
+            })}
+            onClick={(event) => {
+              if (event.target === event.currentTarget) {
+                onClickAway()
+              }
+            }}
+            transition={{ duration: 0.3, ease: 'easeInOut' }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            {children}
+          </motion.div>
+        )
+        : undefined
+      }
     </AnimatePresence>
   ), document.body)
 }

src/components/ui/form/TextArea.tsx

@@ -0,0 +1,32 @@
+import { css, cx } from '@/styled-system/css'
+import { input, type InputVariantProps } from '@/styled-system/recipes/input'
+import { type MergeOmitting } from '@/types/utilities'
+import { type DetailedHTMLProps, type FC, type TextareaHTMLAttributes } from 'react'
+
+export type InputProps = MergeOmitting<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, InputVariantProps>
+
+const TextArea: FC<InputProps> = ({ className, onChange, ...props }) => {
+  const [textAreaCss, rest] = input.splitVariantProps(props)
+  return (
+    <textarea
+      className={cx(css({
+        resize: 'none',
+        overflow: 'auto'
+      }), input(textAreaCss), className)}
+      onChange={(event) => {
+        if (event.target.value.length > 0) {
+          event.target.style.height = 'auto'
+          event.target.style.height = `${event.target.scrollHeight}px`
+        } else {
+          event.target.style.height = 'auto'
+        }
+        if (onChange !== undefined) {
+          onChange(event)
+        }
+      }}
+      {...rest}
+    />
+  )
+}
+
+export default TextArea