feat: change ESQuery Selector placeholder text based on language (#104)

Author: lumirlumir

src/components/esquery-selector-input.tsx

@@ -4,9 +4,10 @@ import { TextField } from "@/components/ui/text-field";
 import { useExplorer } from "@/hooks/use-explorer";
 import { useAST } from "@/hooks/use-ast";
 import { cn } from "@/lib/utils";
+import { esquerySelectorPlaceholder } from "@/lib/const";
 
 export const EsquerySelectorInput: FC = () => {
-	const { esquerySelector, setEsquerySelector } = useExplorer();
+	const { esquerySelector, setEsquerySelector, language } = useExplorer();
 	const astParseResult = useAST();
 	const htmlId = useId();
 
@@ -21,7 +22,7 @@ export const EsquerySelectorInput: FC = () => {
 			</Label>
 			<TextField
 				id={htmlId}
-				placeholder={'e.g. "ImportDeclaration > Literal"'}
+				placeholder={esquerySelectorPlaceholder[language]}
 				className={cn(
 					"flex-1",
 					!astParseResult.ok ||

src/lib/const.ts

@@ -256,6 +256,14 @@ export const pathViewOptions = [
 	},
 ];
 
+export const esquerySelectorPlaceholder = {
+	javascript: 'e.g. "ImportDeclaration > Literal"',
+	json: 'e.g. "Member > String"',
+	markdown: 'e.g. "Heading > Text"',
+	css: 'e.g. "Block > Declaration"',
+	html: 'e.g. "Document > Doctype"',
+};
+
 export const defaultJsCode = `
 /**
  * Type or paste some JavaScript here to learn more about