🚀 Tailwind `inview:` aplica estilos cuando el componente entra en pantalla

Marcos Montero — Wed, 27 Mar 2024 10:25:08 +0000

✨ Fácil: usa inview: en tus classNames para aplicar estilos solo cuando tu componente aparezca en pantalla!

Añade un InviewSensor en tu componente para usar inview: en sus classNames. Así detectamos dinámicamente si el elemento está en pantalla solo cuando el componente está renderizado

Instalación 🚀

Instala el paquete usando npm:

npm i tailwind-inview

Uso 🛠️

Para comenzar, añade el plugin en el archivo tailwind.config.ts de tu proyecto

import inviewPlugin from 'tailwind-inview';

// ...
plugins: [..., inviewPlugin]
//...

Luego importa el InviewSensor del paquete tailwind-inview y úsalo dentro de tus componentes React. El InviewSensor va dentro de un useEffect para que dentro de este componente puedas añadir tantos inview: como quieras. Así de simple!✨

import React, { useEffect } from "react";
import { InviewSensor } from "tailwind-inview";

const Componente = () => {
  useEffect(inViewSensor, []);

  return (
    <h1 className="inview:animate-bounce repeat-1">Texto Animado al Desplazar</h1>
  );
};

export default Componente;

Demo:
https://tailwind-inview.marcosmontero.dev/

Repo:
https://github.com/Marcos-Montero/tailwind-inview

En 5 Minutos: Crea una App de Next.js con IA de OpenAI

Marcos Montero — Sat, 09 Mar 2024 08:54:08 +0000

🚀 Introducción:

Descubre cómo construir una aplicación de inteligencia artificial con Next.js y OpenAI en un abrir y cerrar de ojos. En este artículo, te proporciono un adelanto de la creación de esta app, pero para capturar la magia del desarrollo en tiempo real, te invito a ver el vídeo completo que te guiará a través de cada paso con precisión.

✨ Resumen del Proceso:

Comienza con una cuenta en OpenAI y obtén tus claves API. Configura tu proyecto Next.js y prepárate para instalar las dependencias cruciales: ai y openai. Integra el chat en tu aplicación utilizando el hook useChat, y crea una ruta API que manejará las peticiones POST para interactuar con OpenAI.

🧩 Código Clave: Desvelando la Magia del Desarrollo:

Para la API, tu archivo app/api/chat/route-.ts se verá así:

import { OpenAIStream, StreamingTextResponse } from "ai";
import OpenAI from "openai";

export const runtime = "edge";

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY! });

export async function POST(req: Request) {
  const { messages } = await req.json();

  const res = await openai.chat.completions.create({
    model: "gpt-4-turbo-preview",
    stream: true,
    messages,
  });

  const stream = OpenAIStream(res);

  return new StreamingTextResponse(stream);
}

Y tu componente principal en app/page.tsx incorporará el chat de esta manera:

"use client";
import { useChat } from "ai/react";

export default function Home() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-3xl">Fast AI app</h1>

      <form onSubmit={handleSubmit} className="flex flex-col gap-2">
        <label className="flex flex-col gap-2">
          <input
            placeholder="What are your thoughts?"
            value={input}
            onChange={handleInputChange}
            className="bg-black outline text-white p-2 rounded-sm"
          />
        </label>
        <button type="submit" className="bg-white text-black rounded-xl">
          **Ask AI**
        </button>
      </form>
      <ul>
        {messages.map((m, index) => (
          <li key={index} className="p-2 bg-white/05 rounded-xl">
            {m.role === "user" ? "**User:** " : "**AI:** "}
            {m.content}
          </li>
        ))}
      </ul>
    </main>
  );
}

🎬 Conclusión

Con estos fragmentos de código, estás a un paso de dar vida a tu aplicación con IA. Pero para entender cada detalle, desde los estilos hasta la gestión de respuestas, el vídeo tutorial es tu recurso definitivo. Sumérgete en el código y la configuración junto a nosotros y lleva tus habilidades de desarrollo al siguiente nivel. ¡No esperes más y dale play al vídeo ahora!

DEV Community: Marcos Montero