BIENVENIDOS A LOS COMPONENTES DE DENGEL

=== PARA UTILIZAR ESTE PAQUETE ES NECESARIO QUE PARA EMPEZAR CREE UN SU PROYECTO RAIZ LA CARPETA types y en dentro crear el archivo componentes-dengel.d.ts y añada el nombre de sus componentes

declare module 'componentes-dengel' {
  export const HeaderMobileTypeOne: any;
  export const NavMobileTypeOne: any;

}

===

COMPONENTES NAV

1. NavMobileTypeOne

   • openMenu: Es para abrir el menú del responsive y mejorar la accesesibilidad de el responsive mobile
   • children: Puedes agregar cualquier elemento como por ejemplo en next js Link

   <NavMobileTypeOne openMenu={openMenu}>
      
   </NavMobileTypeOne>
      

COMPONENTES HEADER

1. HeaderMobileTypeOne

   • openMenu: Es para abrir el menú del responsive mobile

   • setOpenMenu: Obtiene el estado si es false o true de la constante openMenu

   • children: Puedes agregar cualquier elemento

   • colorHeader: No es obligatorio añadir color de fondo de tu elemento header.

   • logo: Añada elemento img o en caso de next js Image.

   <HeaderMobileTypeOne logo={<img alt="img" src="#" className='text-white'/>} colorHeader='bg-sky-800' openMenu={openMenu} setOpenMenu={()=>setOpenMenu(!openMenu)}>
   </HeaderMobileTypeOne>

2. HeaderTwo (header principal responsive)

• openMenu: Es para abrir el menú del responsive mobile

• logo: Añada elemento img o en caso de next js Image.

• colorHeader: No es obligatorio añadir color de fondo de tu elemento header.

• setOpenMenu: Obtiene el estado si es false o true de la constante openMenu

• children: Puedes agregar cualquier elemento

• openMenuDesktop: Es para abrir el menú pequeño de desktop desktop 1024px, 1280px en general

• setOpenMenuDesktop: Obtiene el estado si es false o true de la constante openMenuDesktop -navDesktopLittle: El menú pequeño de desktop -LinksNavDesktop La lista del menú pequeño. -navMobileContent Nav mobile. -colorSubNav Solo se permite color configurado en tailwindcss -linksSubNav Se permite elementos, componentes -openSubNav Abre el sub menu | booleano -setOpenSubNav Guarda booleano EJEMPLO GENERAL

  <HeaderTwo 
  navMobileContent={ <NavMobileTypeTwo 
  colorSubNav='bg-sky-600' 
  linksSubNav={<section><h2 className='text-white'>contactos</h2>

Componente questions

• colorIconActive : Solo acepta colores en hexadecimal
• colorIconDefault : Solo acepta colores en hexadecimal
• colorTextoActive : Solo acepta colores configurados en tailwindcss
• colorTextoDefault : Solo acepta colores configurados en tailwindcss
• questions : Poner array como el siguiente ejemplo:

   const questions=[
   {
   id:1,
   question:"¿Qué caracteriza a Elon Musk?",
   state:false,
   answer:"Elon Musk es cofundador y líder de Tesla, SpaceX, Neuralink y The Boring Company. Como cofundador y director general de Tesla, Elon lidera el diseño de productos, ingeniería y fabricación de los vehículos eléctricos, productos de batería y productos"
   },
   {
   id:2,
   question:"¿Quién es Elon Musk y cuáles inventos?",
   state:false,
   answer:"En 2002, Musk fundó SpaceX, fabricante aeroespacial y empresa de servicios de transporte espacial, de la que es CEO e ingeniero jefe."
   },
   {
   id:3,
   question:"¿Cuántos idiomas habla Elon Musk?",
   state:false,
   answer:"Según sus datos, Musk genera ¡más de 22.500 dólares en un minuto! Unos 375 dólares en un segundo. En euros, gana casi 330 "
   }
   ] 

• idd y setIdd:

const [idd,setIdd]=useState<any|undefined>({id:0,state:false});

<Question colorTextAnswer="text-black" colorIconActive="#FE9800" colorIconDefault="#A599EF" colorTextoActive="text-orange-500" colorTextoDefault="tex-black" questions={questions} idd={idd} setIdd={setIdd} />