feat: change ESQuery Selector placeholder text based on language

Author: lumirlumir

src/components/esquery-selector-input.tsx

@@ -1,12 +1,27 @@
 import { useId, type FC } from "react";
 import { Label } from "@/components/ui/label";
 import { TextField } from "@/components/ui/text-field";
-import { useExplorer } from "@/hooks/use-explorer";
+import { useExplorer, type Language } from "@/hooks/use-explorer";
 import { useAST } from "@/hooks/use-ast";
 import { cn } from "@/lib/utils";
 
+const esquerySelectorPlaceholder = (language: Language) => {
+	switch (language) {
+		case "javascript":
+			return 'e.g. "ImportDeclaration > Literal"';
+		case "json":
+			return 'e.g. "Member > String"';
+		case "markdown":
+			return 'e.g. "Heading > Text"';
+		case "css":
+			return 'e.g. "Block > Declaration"';
+		case "html":
+			return 'e.g. "Document > Doctype"';
+	}
+};
+
 export const EsquerySelectorInput: FC = () => {
-	const { esquerySelector, setEsquerySelector } = useExplorer();
+	const { esquerySelector, setEsquerySelector, language } = useExplorer();
 	const astParseResult = useAST();
 	const htmlId = useId();
 
@@ -21,7 +36,7 @@ export const EsquerySelectorInput: FC = () => {
 			</Label>
 			<TextField
 				id={htmlId}
-				placeholder={'e.g. "ImportDeclaration > Literal"'}
+				placeholder={esquerySelectorPlaceholder(language)}
 				className={cn(
 					"flex-1",
 					!astParseResult.ok ||