Locating and substituting text within content.
<div class="findreplace" style="--accent:#BFD9F2;">
<div class="findreplace__row">
<svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true"><circle cx="8.5" cy="8.5" r="6" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M13 13l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
<input type="text" value="colour" readonly aria-label="Find">
<span class="findreplace__count">4 matches</span>
</div>
<div class="findreplace__row">
<svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true"><path d="M4 10h9M13 10l-3-3M13 10l-3 3" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
<input type="text" value="color" readonly aria-label="Replace with">
<button type="button" class="findreplace__all">Replace all</button>
</div>
<label class="findreplace__case">
<span class="findreplace__toggle " aria-hidden="true"></span>
<span>Match case</span>
</label>
</div>
<style>
.findreplace { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143022; border-radius: 10px; padding: 12px; max-width: 300px; }
.findreplace__row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; }
.findreplace__row input { flex: 1; border: 1.5px solid #24143033; border-radius: 6px; padding: 5px 8px; font: inherit; color: #241430; background: #fff; min-width: 0; }
.findreplace__row input:focus-visible { outline: 2px solid var(--accent); }
.findreplace__count { font-size: 12px; color: #24143099; white-space: nowrap; }
.findreplace__all { margin-left: auto; border: none; background: var(--accent); color: #241430; font: 600 12px system-ui, sans-serif; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.findreplace__case { display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px; font-size: 13px; cursor: pointer; }
.findreplace__toggle { width: 30px; height: 17px; border-radius: 999px; background: #24143033; position: relative; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
.findreplace__toggle { transition: background .15s; }
}
.findreplace__toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
@media (prefers-reduced-motion: no-preference) {
.findreplace__toggle::after { transition: transform .15s; }
}
.findreplace__toggle--on { background: var(--accent); }
.findreplace__toggle--on::after { transform: translateX(13px); }
</style><div style="--accent:#BFD9F2;" class="font-sans text-sm text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143022] rounded-[10px] p-3 max-w-[300px]">
<div class="flex items-center gap-2 py-1.5 px-1">
<svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true"><circle cx="8.5" cy="8.5" r="6" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M13 13l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
<input type="text" value="colour" readonly aria-label="Find" class="flex-1 min-w-0 border-[1.5px] border-[#24143033] rounded-md px-2 py-1 bg-white text-[#241430]">
<span class="text-xs text-[#241430]/60 whitespace-nowrap">4 matches</span>
</div>
<div class="flex items-center gap-2 py-1.5 px-1">
<svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true"><path d="M4 10h9M13 10l-3-3M13 10l-3 3" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
<input type="text" value="color" readonly aria-label="Replace with" class="flex-1 min-w-0 border-[1.5px] border-[#24143033] rounded-md px-2 py-1 bg-white text-[#241430]">
<button type="button" class="ml-auto border-0 text-[#241430] font-semibold text-xs px-2.5 py-1.5 rounded-md" style="background:#BFD9F2">Replace all</button>
</div>
<label class="flex items-center gap-2 pt-1.5 pb-0.5 px-1 text-[13px] cursor-pointer">
<span class="findreplace-tw__toggle inline-block w-[30px] h-[17px] rounded-full relative" aria-hidden="true"></span>
<span>Match case</span>
</label>
</div>
<style>
.findreplace-tw__toggle { background: #24143033; }
@media (prefers-reduced-motion: no-preference) {
.findreplace-tw__toggle { transition: background .15s; }
}
.findreplace-tw__toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
@media (prefers-reduced-motion: no-preference) {
.findreplace-tw__toggle::after { transition: transform .15s; }
}
.findreplace-tw__toggle--on { background: var(--accent); }
.findreplace-tw__toggle--on::after { transform: translateX(13px); }
</style>export function FindAndReplace({
findText = "colour",
replaceText = "color",
matchCount = 4,
matchCase = false,
accent = "#BFD9F2",
}) {
return (
<div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2",
border: "1.5px solid #24143022", borderRadius: 10, padding: 12, maxWidth: 300 }}>
<div style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 4px" }}>
<svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true"><circle cx="8.5" cy="8.5" r="6" fill="none" stroke="currentColor" strokeWidth="1.6" /><path d="M13 13l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
<input type="text" readOnly value={findText} aria-label="Find" style={{ flex: 1, minWidth: 0, border: "1.5px solid #24143033", borderRadius: 6, padding: "5px 8px", font: "inherit", color: "#241430", background: "#fff" }} />
<span style={{ fontSize: 12, color: "#24143099", whiteSpace: "nowrap" }}>{matchCount} matches</span>
</div>
<div style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 4px" }}>
<svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true"><path d="M4 10h9M13 10l-3-3M13 10l-3 3" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
<input type="text" readOnly value={replaceText} aria-label="Replace with" style={{ flex: 1, minWidth: 0, border: "1.5px solid #24143033", borderRadius: 6, padding: "5px 8px", font: "inherit", color: "#241430", background: "#fff" }} />
<button type="button" style={{ marginLeft: "auto", border: "none", background: accent, color: "#241430", fontSize: 12, fontWeight: 600, padding: "6px 10px", borderRadius: 6, cursor: "pointer" }}>Replace all</button>
</div>
<label style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 4px 2px", fontSize: 13, cursor: "pointer" }}>
<span style={{ width: 30, height: 17, borderRadius: 999, position: "relative", display: "inline-block",
background: matchCase ? accent : "#24143033" }}>
<span className="far-thumb" style={{ position: "absolute", top: 2, left: matchCase ? 15 : 2, width: 13, height: 13, borderRadius: "50%", background: "#fff" }} />
</span>
<span>Match case</span>
</label>
<style>{`
@media (prefers-reduced-motion: no-preference) {
.far-thumb { transition: left .15s; }
}
`}</style>
</div>
);
}