// title: Rich-text formatting toolbar with markdown preview "use client"; import { CodeIcon, LinkIcon, QuoteIcon, StrikethroughIcon } from "lucide-react"; import { useState } from "react"; import { Toggle } from "@/registry/default/ui/toggle"; const tools = [ { icon: StrikethroughIcon, id: "strike", label: "Strikethrough" }, { icon: CodeIcon, id: "code", label: "Inline code" }, { icon: QuoteIcon, id: "quote", label: "Blockquote" }, { icon: LinkIcon, id: "link", label: "Link" }, ]; export function Pattern() { const [active, setActive] = useState>(new Set()); const toggle = (id: string) => setActive((prev) => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; }); const preview = () => { let text = "The quick brown fox"; if (active.has("strike")) text = `~~${text}~~`; if (active.has("code")) text = `\`${text}\``; if (active.has("quote")) text = `> ${text}`; if (active.has("link")) text = `[${text}](https://example.com)`; return text || "The quick brown fox"; }; return (

{tools.map(({ icon: Icon, id, label }) => ( toggle(id)} pressed={active.has(id)} size="sm" > ))}

{preview()}

{active.size > 0 ? `Active: ${[...active].join(", ")}` : "No formatting applied"}

); }