Code Snippets

<nav className="flex items-center justify-between p-4 bg-gray-900 text-white">
  <h1 className="text-xl font-bold">MySite</h1>
  <ul className="flex space-x-4">
    <li><a href="#home" className="hover:text-blue-400">Home</a></li>
    <li><a href="#about" className="hover:text-blue-400">About</a></li>
    <li><a href="#contact" className="hover:text-blue-400">Contact</a></li>
  </ul>
</nav>

import { useForm } from "react-hook-form";

export default function ContactForm() {
  const { register, handleSubmit, reset } = useForm();

  const onSubmit = (data) => {
    console.log(data);
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="max-w-md mx-auto p-6 bg-gray-100 rounded-lg shadow-md space-y-4">
      <input
        {...register("name")}
        placeholder="Name"
        className="w-full p-2 border rounded-md"
        required
      />
      <input
        {...register("email")}
        type="email"
        placeholder="Email"
        className="w-full p-2 border rounded-md"
        required
      />
      <textarea
        {...register("message")}
        placeholder="Message"
        rows="4"
        className="w-full p-2 border rounded-md"
        required
      />
      <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">
        Send Message
      </button>
    </form>
  );
}

import { useEffect, useState } from "react";

export default function FetchData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://api_url")
      .then(res => res.json())
      .then(setData);
  }, []);

  return (
    <ul>
      {data.slice(0, 5).map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}