Toggle

"use client";

import { Bold } from "lucide-react";
import { useState } from "react";
import { Toggle } from "@/components/ui/r-toggle";

export function TogglePreview() {
  const [bold, setBold] = useState(false);

  return (
    <div className="flex min-h-[18rem] items-center justify-center px-4 py-6">
      <p className="flex flex-wrap items-center justify-center gap-x-2.5 gap-y-2 text-balance font-medium text-lg text-neutral-800 leading-snug tracking-tight sm:text-xl dark:text-neutral-100">
        <span>Ship the</span>
        <span
          className={
            bold
              ? "font-bold text-neutral-950 transition-[font-weight,color] duration-200 dark:text-neutral-50"
              : "text-neutral-800 transition-[font-weight,color] duration-200 dark:text-neutral-100"
          }
        >
          release notes
        </span>
        <span className="inline-flex translate-y-px items-center align-middle">
          <Toggle
            aria-label="Toggle bold"
            className="size-8 min-h-8 min-w-8 shrink-0 px-2 py-2"
            onPressedChange={setBold}
            pressed={bold}
            size="sm"
            variant="outline"
          >
            <Bold className="size-4" />
          </Toggle>
        </span>
      </p>
    </div>
  );
}