feat: Aside component

package.json

@@ -22,10 +22,13 @@
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.8.0",
     "tailwindcss": "3.3.1",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@types/dom-to-image": "^2.6.4"
+    "@types/dom-to-image": "^2.6.4",
+    "@types/uuid": "^9.0.1"
   }
 }

src/components/details/index.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+import { v4 as uuid } from 'uuid'
+
+interface DetailsProps {
+    children: React.ReactNode
+    summary?: string
+}
+
+export const Details = ({ summary = 'Title', children }: DetailsProps) => {
+    const [detailsOpen, setDetailsOpen] = useState(false)
+    const [detailsId, setDetailsId] = useState('')
+
+    useEffect(() => setDetailsId(uuid()), [])
+
+    useEffect(() => {
+        const details = document.querySelector(`details[data-details-id="${detailsId}"]`) as HTMLDetailsElement
+        if (!details) return
+
+        const handleToggle = () => setDetailsOpen(details.open)
+        details.addEventListener('toggle', handleToggle)
+
+        return () => details.removeEventListener('toggle', handleToggle)
+    }, [detailsId])
+
+    return (
+        <details data-details-id={detailsId} open={detailsOpen} className='cursor-pointer'>
+            <summary className={`bg-gray-800 ${detailsOpen ? 'rounded-t-lg' : 'rounded-lg'} px-4 py-1`}>
+                {summary}
+            </summary>
+            <div className='bg-gray-700 rounded-b-lg px-4 py-1'>
+                {children}
+            </div>
+        </details>
+    )
+}

src/components/form/input/index.tsx

@@ -1,9 +1,33 @@
 import { useEffect, useRef } from 'react'
 import { useField } from '@unform/core'
 
-import { InputProps } from "@/interfaces/types"
+import { InputProps } from '@/interfaces/types'
 
-export const Input = ({ name, label, labelPosition='before', container=false, ...props }: InputProps) => {
+export const Input = ({ withForm=true, ...props }: InputProps) => withForm ? <UnFormInput {...props}/> : <InputComponent {...props}/>
+
+const InputComponent = ({ name, label, labelPosition='before', container=false, className, ...props }: InputProps) => {
+    const Input = <input className={`inputNumberValues border border-dashed rounded-lg pl-1 ${className}`} {...props}/>
+    const Label = <label htmlFor={name} className='max-w-[13rem]'>{label}</label>
+
+    return <>{ container ?
+        <div className={'flex flex-nowrap gap-1'}>
+            {
+                (label && labelPosition === 'after') && <>{Input}{Label}</>
+                ||
+                (label) && <>{Label}{Input}</>
+                || Input
+            }
+        </div>
+        :
+        <>{
+            (label && labelPosition === 'after') && <>{Input}{Label}</>
+            ||
+            (label) && <>{Label}{Input}</>
+            || Input
+        }</>
+    }</>
+}
+const UnFormInput = ({ name, label, labelPosition='before', container=false, ...props }: InputProps) => {
     const inputRef = useRef<HTMLInputElement>(null)
     const {
         fieldName,

src/interfaces/types.ts

@@ -63,6 +63,7 @@ type InputType = {
     label?:         string
     labelPosition?: 'before' | 'after'
     container?:     boolean
+    withForm?:      boolean
 }
 /**
  * Defines the types of native input properties.