Lista de Componentes

<Alert type="info">
  <span className="font-bold">¡Información! </span>
  <span>Este es un mensaje informativo.</span>
</Alert>

<Alert small type="info">
  <span className="font-bold">¡Información! </span>
  <span>Este es un mensaje informativo.</span>
</Alert>

<Badge type="info">
  Información
</Badge>

<Space height={40} />

<Separator />

<div className="flex gap-4 ">
  <div>Hola</div>
  <Separator type="vertical" />
  <div>Mundo </div>
</div>

<Skeleton />

<div className="flex items-center gap-2">
  <Spinner type={0} size={12} color="text-orange-500 dark:text-orange-600" />
  <Spinner type={1} size={8} color="text-blue-600 dark:text-blue-300" />
  <Spinner type={2} size={9} />
  <Spinner type={3} size={11} />
  <Spinner type={4} size={11} color="text-blue-500 dark:text-blue-400" />
  <Spinner type={5} size={7} color="text-slate-500 dark:text-slate-400" />
  <Spinner type={6} size={9} color="text-zinc-500 dark:text-zinc-400" />
  <Spinner type={7} size={9} />
</div>

<div className="flex items-center gap-2">
  <div className="size-10 inline-block border-x-4 border-blue-600 dark:border-blue-500 rounded-full animate-spin" />
  <span className="text-5xl text-slate-400 animate-spin">#</span>
  <span className="text-4xl animate-pulse">🔥</span>
  <span className="inline-block text-5xl animate-bounce">🦘</span>
  <span className="inline-block text-lg text-red-500 animate-ping">❤️</span>
</div>

<Tooltip title="Esto es un tooltip">
  <div className="bg-blue-100 dark:bg-blue-500 px-4 py-2 border border-slate-300 dark:border-slate-600">
    Al pasar el ratón por encima de este párrafo se mostrará un pequeño mensaje de ayuda o tooltip. 
  </div>
</Tooltip>

<Popover title="Popover" className="bg-blue-100 dark:bg-blue-500 px-4 py-2 border border-slate-300 dark:border-slate-600">
  <div className="flex flex-col gap-1">
    <Link href="#" className="hover:opacity-60 active:opacity-40">Dashboard</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Autores</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Libros</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Prestamos</Link>
  </div>
</Popover>

<Dropdown title="Dropdown" className="bg-blue-100 dark:bg-blue-500 px-4 py-2 border border-slate-300 dark:border-slate-600">
  <div className="flex flex-col gap-2">
    <Link href="#" className="hover:opacity-60 active:opacity-40">Dashboard</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Autores</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Libros</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Prestamos</Link>
  </div>
</Dropdown>

<Dropdown2 title="Dropdown2" className="bg-blue-100 dark:bg-blue-500 px-4 py-2 border border-slate-300 dark:border-slate-600">
  <div className="flex flex-col gap-2">
    <Link href="#" className="hover:opacity-60 active:opacity-40">Dashboard</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Autores</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Libros</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Prestamos</Link>
  </div>
</Dropdown2>

<Drawer 
  trigger={
    <div className="bg-blue-100 dark:bg-blue-500 px-4 py-2 border border-slate-300 dark:border-slate-600">
      Abrir Drawer
    </div>
  }
   position="right"    
   duration={700}
   area="w-20 md:w-40"
>
  <p>Uno</p>
  <p>Dos</p>
  <p>Tres</p>
</Drawer>

<Modal trigger={
  <div className="bg-blue-100 dark:bg-blue-500 px-4 py-2 border border-slate-300 dark:border-slate-600">
   Abrir Modal
  </div>
}>
  <div className="p-8">
    <p className="text-blue-500 font-bold">Esto es un diálogo modal.</p>
    <div className="text-wrap">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam, nostrum dignissimos illum, ratione molestiae aut, esse a porro debitis quia eius modi nulla consequuntur! Iusto nulla eaque quis libero ducimus!
      Sint corrupti soluta, doloremque beatae vero facilis praesentium, perferendis officiis nam enim ratione exercitationem dolore aliquid adipisci veniam quos error obcaecati! Quis voluptatum aut alias ad placeat aliquid nihil obcaecati.
      Iste repellat culpa eligendi dolorem deleniti officiis ex magni, placeat magnam numquam nobis eveniet beatae. Debitis labore voluptate at, sint consequuntur minus ipsum optio vero quibusdam quam fugit ullam. Nostrum?
      Nam obcaecati error id, facilis ipsum, cupiditate omnis deserunt saepe aliquam maiores in perspiciatis consequatur consequuntur iure excepturi rerum provident. Cupiditate quis impedit atque, aspernatur alias itaque. Sint, cupiditate ipsa!
      Adipisci vel ad quos temporibus dicta quidem doloremque sed deleniti eos! Quis aspernatur veniam dolor, nulla blanditiis totam molestias perspiciatis nostrum laudantium corrupti, aliquam dolore? Ab amet officiis eligendi autem.
    </div>
  </div>
</Modal>

<MenuLink href="/"><HomeIcon />Simple UI</MenuLink>
<MenuLink href="/componentes">Componentes</MenuLink>
<MenuLink href="/test">Test</MenuLink>

<MainMenu position="left">
  <MenuLink href="/"><HomeIcon /></MenuLink>
  <MenuLink href="/componentes">Componentes</MenuLink>
  <MenuLink href="/test">Test</MenuLink>
</MainMenu>

<Sidebar permanent>
 <div className="flex flex-col text-xs md:text-base md:pl-4">
    <div className="font-bold mt-4"> MENSAJES y SEPARADORES </div>
    <Link href="/componentes#alert" className="md:px-2 py-1 hover:bg-slate-200 dark:hover:bg-slate-900">Alert</Link>
    <Link href="/componentes#alertsmall" className="md:px-2 py-1 hover:bg-slate-200 dark:hover:bg-slate-900">Alert small</Link>
  </div>
</Sidebar>

export default function RootLayout({ children }) {
  return (
    <html
      lang="es"
      suppressHydrationWarning
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >

      <Layout
        header={<Header />} 
        footer={<Footer />}
        leftsidebar={ <Sidebar> <ListaComponentes /> </Sidebar> } 
      >
        {children}
      </Layout>

    </html >
  )
}

const Header = () => (
  <nav className="z-50 px-2 flex gap-2 items-center justify-between py-4 bg-neutral-500/50">

    <Link href="/" className="p-3 bg-white dark:bg-black flex gap-2 items-center hover:bg-neutral-200 dark:hover:bg-neutral-800 rounded-full">
      <HomeIcon />
      <span className="hidden md:block font-bold">
        Simple UI
      </span>
    </Link>


    <div className="flex gap-2 items-center">
      <ThemeToggle />
      <MainMenu>
        <MenuLink href="/componentes"> Componentes </MenuLink>
        <MenuLink href="/test"> Test </MenuLink>
      </MainMenu>
    </div>

  </nav>
)



const Footer = async () => {
  'use cache'
  return (
    <div className="text-center py-2 bg-neutral-500/50">{
      new Date().toLocaleDateString('es-ES', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })}
    </div>
  )
}

<Button 
  color="blue"
  className="px-12"
  onClick={() => alert("Mensaje del navegador")}
>
  Púlsame
</Button>

<Switch
    labelOn="Activo"
    labelOff="Inactivo"
    value={empleado.activo}
    onChange={(value) => toggleEmpleadoActivo(empleado.id, value)}
/>

<InputText
  label="Introduce tu nombre"
  name="nombre"
  value="José"
/>

<InputNumber
  label="Introduce tu edad"
  name="edad"
  value={18} 
/>

<InputRange
  label="Volumen"
  name="volume"
  value={50}
  min={0}
  max={100}
  step={1}
/>

<InputDate 
  type="datetime-local" 
  label="Evento musical" 
  name="evento" 
/>

<InputImage
  label="Foto de empleado"
  name="foto"
  value="https://randomuser.me/api/portraits/men/85.jpg"
  width={300}
  height={300}
/>

<InputCheck
  label="Amateur"
  name="nivel"
  value="amateur"
  checked={false}
  icon={<CrossIcon />}
/>

<InputCheck
  multiple
  label="Lectura"
  name="gustos"
  value="leer"
  checked={true}
  icon={<HeartIcon />}
/>

<InputGroup
  label="Categoria"
  name="categoria"
  options={[
    // [label, value, checked]
    ["Amateur", "amateur", false],
    ["Junior", "junior", false],
    ["Senior", "senior", true],
    ["Veterano", "veterano", false]
  ]}
  icon={<CrossIcon />}
/>

<InputGroup
  multiple
  label="Aficiones"
  name="aficiones"
  options={[
    // [label, value, checked]
    ["Lectura", "leer", true],
    ["Actividad física", "deporte", false],
    ["Cine", "cine", true],
    ["Playa", "playa", true]
  ]}
  icon={<HeartIcon />}
/>

<InputSelect
  label="Categoría"
  name="categoria2"
  options={[
    // [label, value, checked]
    ["Amateur", "amateur", false],
    ["Junior", "junior", false],
    ["Senior", "senior", true],
    ["Veterano", "veterano", false]
  ]}
  className="w-80"
/>

<InputSelect
  multiple
  label="Aficiones"
  name="aficiones2"
  options={[
    // [label, value, checked]
    ["Lectura", "leer", true],
    ["Actividad física", "deporte", false],
    ["Cine", "cine", true],
    ["Playa", "playa", true]
  ]}
  className="w-80"
/>

<InputArea
  label="Introduce tu comentario"
  name="nombre"
  value="Mi comentario es ..."
/>

<Submit
  color="red"
  className="px-12"
  formAction={async () => {}}
>
  Eliminar
</Submit>

<Form
  action={async () => {
      await new Promise(resolve => setTimeout(resolve, 1000))
      toast.info("Acción desactivada.")
  }}
  data={{ nombre: "Ana", empresa: "Junta Andalucía" }}
  className="border border-slate-100 shadow-lg rounded-md p-8 md:w-3/4 mx-auto"
  fields={[
          {
              name: "image",
              component: "InputImage",
              className: "self-end",
              width: 240,
              height: 240,
          },
          {
              name: "nombre",
              label: "Introduzca nombre:",
          },
          {
              name: "empresa",
              label: "Introduzca empresa:",
          },
          {
              name: "perfil",
              label: "Perfil laboral:",
              component: "InputGroup",
              options: [
                  // [label, value, checked]
                  ["Conserje", "conserje", false],
                  ["Administrativo", "administrativo", true],
                  ["Profesor", "profesor", true],
                  ["Alumno", "alumno", false],
              ]
          },
          {
              name: "hobbies",
              label: "Hobbies:",
              component: "InputGroup",
              multiple: true,
              options: [
                  // [label, value, checked]
                  ["Lectura", "leer", false],
                  ["Cine", "cine", true],
                  ["Música", "musica", true],
                  ["Playa", "playa", false]
              ],
              icon: <HeartIcon colorChecked="green" />
          },
          {
              labels: ["Guardar datos", "Guardando datos ..."],
              component: "Submit",
              color: "blue",
              round: "lg"
          }
          ]}
  />

<Table
    width={1000}
    data={[
      {
        id: 255,
        nombre: 'Adán Guerrero Rentería',
        empresa: 'Gil Zambrano y Baca Irizarry',
        cargo: 'Administrador de Métricas Adelante',
      },
      {
        id: 306,
        nombre: 'Agustín Aguilera Bernal',
        empresa: 'Maya Montañez y Valentín Villarreal',
        cargo: 'Productor de Grupo Gerente',
      },
      {
        id: 101,
        nombre: 'Adriana Reyes Díaz',
        empresa: 'Véliz Mendoza S.A.',
        cargo: 'Oficial de Contabilidad Dinánmico',
      }
    ]}
    actions={[
      ViewEmpleado,
      UpdateEmpleado,
      DeleteEmpleado,
    ]} 
    columns={[
        { name: "nombre", label: "Nombre" },
        { name: "empresa", label: "Empresa" },
        { name: "cargo", label: "Cargo" },
    ]}
    sort="empresa"
    direction="desc"
>
  <div className="text-xl font-bold">Lista de empleados</div>
</Table>

List
    card={CardEmpleado}
    data={[
      {
        id: 255,
        nombre: 'Adán Guerrero Rentería',
        empresa: 'Gil Zambrano y Baca Irizarry',
        cargo: 'Administrador de Métricas Adelante',
        nivel: 'junior',
        aficiones: ['leer', 'cine']
      },
      {
        id: 306,
        nombre: 'Agustín Aguilera Bernal',
        empresa: 'Maya Montañez y Valentín Villarreal',
        cargo: 'Productor de Grupo Gerente',
        nivel: 'senior',
        aficiones: ['musica', 'cine']
      },
      {
        id: 101,
        nombre: 'Adriana Reyes Díaz',
        empresa: 'Véliz Mendoza S.A.',
        cargo: 'Oficial de Contabilidad Dinánmico',
        nivel: 'junior',
        aficiones: ['baile', 'musica']
      }
    ]}
    actions={[
      ViewEmpleado,
      UpdateEmpleado,
      DeleteEmpleado,
    ]} 
    columns={[
        { name: "nombre", label: "Nombre" },
        { name: "empresa", label: "Empresa" },
        { name: "cargo", label: "Cargo" },
    ]}
    sort="empresa"
    direction="desc"
>
  <div className="text-xl font-bold">Lista de empleados</div>
</List>

'use client'

export const CardEmpleado = ({ data, actions }) => (
    <div className="p-4 rounded-xl border border-gray-300 dark:border-gray-700 flex flex-col shadow-md shadow-gray-600">

        <h3 className="text-xl font-bold">{data.nombre}</h3>

        <p className="text-stone-500 font-bold">{data.cargo}</p>
        
        <p className="text-stone-500">{data.empresa}</p>

        <p className="text-md">{data.nivel}</p>

        <p className="text-stone-500">{data.aficiones.join(', ')}</p>

        {actions &&
            <div className="flex gap-1 self-end" onClick={e => e.stopPropagation()}>
                {actions.map((Action, index) => (
                    <Action
                        key={index}
                        data={data}
                    />
                ))}
            </div>
        }
    </div>
)

const data = {
        id: 255,
        nombre: 'Adán Guerrero Rentería',
        empresa: 'Gil Zambrano y Baca Irizarry',
        cargo: 'Administrador de Métricas Adelante',
        nivel: 'junior',
        aficiones: ['leer', 'cine']
}

const actions = [
  ViewEmpleado,
  UpdateEmpleado,
  DeleteEmpleado,
]


<CardEmpleado data={data}  actions={actions} />

<List2
    card={CardEmpleado2}
    data={[
      {
        id: 255,
        nombre: 'Adán Guerrero Rentería',
        empresa: 'Gil Zambrano y Baca Irizarry',
        cargo: 'Administrador de Métricas Adelante',
        nivel: 'junior',
        aficiones: ['leer', 'cine']
      },
      {
        id: 306,
        nombre: 'Agustín Aguilera Bernal',
        empresa: 'Maya Montañez y Valentín Villarreal',
        cargo: 'Productor de Grupo Gerente',
        nivel: 'senior',
        aficiones: ['musica', 'cine']
      },
      {
        id: 101,
        nombre: 'Adriana Reyes Díaz',
        empresa: 'Véliz Mendoza S.A.',
        cargo: 'Oficial de Contabilidad Dinánmico',
        nivel: 'junior',
        aficiones: ['baile', 'musica']
      }
    ]}
    actions={[
      ViewEmpleado,
      UpdateEmpleado,
      DeleteEmpleado,
    ]} 
    columns={[
        { name: "nombre", label: "Nombre" },
        { name: "empresa", label: "Empresa" },
        { name: "cargo", label: "Cargo" },
    ]}
    sort="empresa"
    direction="desc"
>
  <div className="text-xl font-bold">Lista de empleados</div>
</List2>