Componentes

// Componente básico con props tipadas
interface GreetingProps {
  name: string;
  className?: string;
}
 
function Greeting({ name, className }: GreetingProps) {
  return <h1 className={className}>Hola, {name}</h1>;
}
 
// Componente con children
function Card({ children, title }: { children: React.ReactNode; title: string }) {
  return (
    <div className="rounded border p-4">
      <h2>{title}</h2>
      {children}
    </div>
  );
}
 
// Props por defecto mediante desestructuración
function Button({ variant = "primary", ...rest }: ButtonProps) {
  return <button className={variant} {...rest} />;
}

"use client";
 
import { useState } from "react";
 
// --- Primitivas reutilizables ---
 
interface BadgeProps {
  label: string;
  color?: "green" | "yellow" | "red";
}
 
function Badge({ label, color = "green" }: BadgeProps) {
  const colors = {
    green: "bg-green-100 text-green-800",
    yellow: "bg-yellow-100 text-yellow-800",
    red: "bg-red-100 text-red-800",
  };
  return (
    <span className={`inline-block rounded px-2 py-0.5 text-xs font-medium ${colors[color]}`}>
      {label}
    </span>
  );
}
 
// --- Componente compuesto ---
 
interface Task {
  id: number;
  title: string;
  status: "done" | "in-progress" | "blocked";
}
 
const statusColor: Record<Task["status"], BadgeProps["color"]> = {
  done: "green",
  "in-progress": "yellow",
  blocked: "red",
};
 
function TaskItem({ task }: { task: Task }) {
  return (
    <li className="flex items-center justify-between border-b py-2">
      <span>{task.title}</span>
      <Badge label={task.status} color={statusColor[task.status]} />
    </li>
  );
}
 
// --- Componente contenedor ---
 
export function TaskBoard() {
  const [tasks] = useState<Task[]>([
    { id: 1, title: "Set up CI pipeline", status: "done" },
    { id: 2, title: "Write integration tests", status: "in-progress" },
    { id: 3, title: "Deploy to production", status: "blocked" },
  ]);
 
  return (
    <section className="max-w-md rounded border p-4">
      <h2 className="mb-3 text-lg font-bold">Tablero del sprint</h2>
      <ul>
        {tasks.map(task => (
          <TaskItem key={task.id} task={task} />
        ))}
      </ul>
    </section>
  );
}

interface LayoutProps {
  header: React.ReactNode;
  sidebar: React.ReactNode;
  children: React.ReactNode;
}
 
function Layout({ header, sidebar, children }: LayoutProps) {
  return (
    <div className="grid grid-cols-[250px_1fr] grid-rows-[auto_1fr]">
      <header className="col-span-2">{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

interface ToggleProps {
  children: (isOn: boolean, toggle: () => void) => React.ReactNode;
}
 
function Toggle({ children }: ToggleProps) {
  const [isOn, setIsOn] = useState(false);
  return <>{children(isOn, () => setIsOn(prev => !prev))}</>;
}
 
// Uso
<Toggle>
  {(isOn, toggle) => (
    <button onClick={toggle}>{isOn ? "ON" : "OFF"}</button>
  )}
</Toggle>

function Tabs({ children }: { children: React.ReactNode }) {
  const [activeIndex, setActiveIndex] = useState(0);
  return <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>{children}</TabsContext.Provider>;
}
 
Tabs.Panel = function Panel({ index, children }: { index: number; children: React.ReactNode }) {
  const { activeIndex } = useContext(TabsContext);
  return activeIndex === index ? <div>{children}</div> : null;
};

// Tipar un componente que envuelve elementos nativos
interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
  variant?: "primary" | "secondary";
}
 
function Button({ variant = "primary", className, ...rest }: ButtonProps) {
  return <button className={`btn-${variant} ${className ?? ""}`} {...rest} />;
}
 
// Atajo con React.PropsWithChildren
type CardProps = React.PropsWithChildren<{ title: string }>;

// Ejemplo de producción: BackButton con props tipadas y valores por defecto
// Archivo: src/components/services/back-button.tsx
'use client';
import { useRouter } from 'next/navigation';
import { ArrowLeft } from 'lucide-react';
import { useLoadingStore } from '@/stores/loading-store';
 
interface BackButtonProps {
  href?: string;
  label?: string;
}
 
export default function BackButton({
  href,
  label = 'Volver a las secciones',
}: BackButtonProps) {
  const router = useRouter();
  const startLoading = useLoadingStore((state) => state.startLoading);
 
  const handleClick = () => {
    startLoading();
    if (href) {
      router.push(href);
    } else {
      router.back();
    }
  };
 
  return (
    <button onClick={handleClick} className="flex items-center gap-2 text-sm font-medium cursor-pointer transition-colors">
      <ArrowLeft className="h-4 w-4" />
      {label}
    </button>
  );
}