Add Tsx as a LanguageType separate from Typescript

crates/codebook/src/queries.rs

@@ -28,6 +28,7 @@ pub enum LanguageType {
     TOML,
     Text,
     Typescript,
+    Tsx,
     Typst,
     VHDL,
     YAML,
@@ -116,7 +117,7 @@ pub static LANGUAGE_SETTINGS: &[LanguageSetting] = &[
     },
     LanguageSetting {
         type_: LanguageType::Javascript,
-        ids: &["javascript", "javascriptreact"],
+        ids: &["javascript", "javascriptreact", "jsx"],
         dictionary_ids: &["javascript", "javascriptreact"],
         query: include_str!("queries/javascript.scm"),
         extensions: &["js", "jsx"],
@@ -130,10 +131,17 @@ pub static LANGUAGE_SETTINGS: &[LanguageSetting] = &[
     },
     LanguageSetting {
         type_: LanguageType::Typescript,
-        ids: &["typescript", "typescriptreact"],
-        dictionary_ids: &["typescript", "typescriptreact"],
+        ids: &["typescript"],
+        dictionary_ids: &["typescript"],
         query: include_str!("queries/typescript.scm"),
-        extensions: &["ts", "tsx"],
+        extensions: &["ts"],
+    },
+    LanguageSetting {
+        type_: LanguageType::Tsx,
+        ids: &["typescriptreact", "tsx"],
+        dictionary_ids: &["typescriptreact"],
+        query: include_str!("queries/typescript.scm"),
+        extensions: &["tsx"],
     },
     LanguageSetting {
         type_: LanguageType::Haskell,
@@ -293,6 +301,7 @@ impl LanguageSetting {
             LanguageType::TOML => Some(tree_sitter_toml_ng::LANGUAGE.into()),
             LanguageType::Text => None,
             LanguageType::Typescript => Some(tree_sitter_typescript::LANGUAGE_TYPESCRIPT.into()),
+            LanguageType::Tsx => Some(tree_sitter_typescript::LANGUAGE_TSX.into()),
             LanguageType::Typst => Some(codebook_tree_sitter_typst::LANGUAGE.into()),
             LanguageType::VHDL => Some(tree_sitter_vhdl::LANGUAGE.into()),
             LanguageType::YAML => Some(tree_sitter_yaml::LANGUAGE.into()),

examples/example.jsx

@@ -68,7 +68,7 @@ const userAccaunt = {
 function getComponentddt() {
   return (
     <divv>
-      <h1>Hello, {userAccaunt.usrname}</h1>
+      <h1>Helloz, {userAccaunt.usrname}</h1>
       <p>Your ballance is: {userAccaunt.ballance}</p>
     </divv>
   );

examples/example.tsx

@@ -1,52 +1,80 @@
-// Funktion to validate user inputt
-function validateInputt(userInputt: number | string) {
-  if (typeof userInputt !== "number") {
-    console.log("Pleese enter a valid numbr");
-    return false;
-  }
-
-  return true;
+import React, { useState, useEffect } from "react";
+
+// Interfase for user propertys
+interface UserAccaunt {
+  usrname: string;
+  emale: string;
+  ballance: number;
+  isActve: boolean;
 }
 
-const multiLineString = `This is a multi-line string
-spanning multiple lines
-with some spelling mistkes`;
+// Props interfase for the componant
+interface DashbordProps {
+  tital: string;
+  usrs: UserAccaunt[];
+  onSubmitt: (usrname: string) => void;
+}
 
-console.log(multiLineString);
+// Componant to displaye a single user
+function UserCardd({ usr }: { usr: UserAccaunt }) {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
-// Example usege
-const firstNumbr = 10;
-console.log(firstNumbr);
-const secandNumbr = 5;
-console.log(secandNumbr);
+  return (
+    <div className="user-cardd">
+      <h3 onClick={() => setIsExpanded(!isExpanded)}>{usr.usrname}</h3>
+      {isExpanded && (
+        <div className="detales">
+          <p>Emale: {usr.emale}</p>
+          <p>Ballance: ${usr.ballance.toFixed(2)}</p>
+          <span className={usr.isActve ? "actve" : "inactve"}>
+            {usr.isActve ? "Actve" : "Inactve"}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
 
-// Array of numbrs with spelling mistakes
-const arraOfNumbrs = [1, 2, 3, 4, 5];
-console.log(arraOfNumbrs);
+// Main dashbord componant
+function Dashbord({ tital, usrs, onSubmitt }: DashbordProps) {
+  const [serchTerm, setSerchTerm] = useState<string>("");
+  const [filterdUsrs, setFilterdUsrs] = useState<UserAccaunt[]>(usrs);
 
-/*
- Funcshun to prosess array
- another linet
-*/
-function prosessArray(arr: number[]) {
-  let totel = 0;
+  useEffect(() => {
+    const resalts = usrs.filter((usr) =>
+      usr.usrname.toLowerCase().includes(serchTerm.toLowerCase()),
+    );
+    setFilterdUsrs(resalts);
+  }, [serchTerm, usrs]);
 
-  for (let i = 0; i < arr.length; i++) {
-    totel += arr[i];
-  }
+  const handleSerch = (evnt: React.ChangeEvent<HTMLInputElement>) => {
+    setSerchTerm(evnt.target.value);
+  };
 
-  return totel;
+  return (
+    <div className="dashbord-containr">
+      <h1>{tital}</h1>
+      <div className="serch-secshun">
+        <label htmlFor="serch-inputt">Serch Usrs:</label>
+        <input
+          id="serch-inputt"
+          type="text"
+          placeholder={serchTerm}
+          onChange={handleSerch}
+          value={serchTerm}
+        />
+      </div>
+      <div className="usr-listt">
+        {filterdUsrs.length > 0 ? (
+          filterdUsrs.map((usr, indx) => <UserCardd key={indx} usr={usr} />)
+        ) : (
+          <p className="no-resalts">No usr foundd</p>
+        )}
+      </div>
+    </div>
+  );
 }
 
-// Object with propertys
-const userAccaunt = {
-  usrname: "JohnDoe",
-  passwrd: "12345",
-  emale: "john@example.com",
-  ballance: 1000,
-};
-
-console.log(userAccaunt);
-
-// Exportt the funcsions
-export { validateInputt, prosessArray };
+// Exportt the componants
+export { UserCardd, Dashbord };
+export type { UserAccaunt, DashbordProps };