chore: minor react router app update

AleksandrSl · AleksandrSl · commit cfec75e6e7bd · 2025-12-03T18:50:37.000+01:00
diff --git a/cmp/demo/react-router/app/root.tsx b/cmp/demo/react-router/app/root.tsx
@@ -7,9 +7,9 @@ import {
 import "./app.css";
 
 // TODO (AleksandrSl 29/11/2025): Fix the problem when TranslationProvider cannot be used in the root component.
-function App(locale: string) {
+function App(props: { locale: string }) {
   return (
-    <html lang={locale}>
+    <html lang={props.locale}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/cmp/demo/react-router/app/routes/home.tsx b/cmp/demo/react-router/app/routes/home.tsx
@@ -9,7 +9,7 @@ export default function Home() {
       <section className="bg-gradient-to-br from-purple-600 to-purple-800 text-white py-24 px-8 text-center">
         <div className="max-w-4xl mx-auto">
           <h1 className="text-5xl md:text-6xl font-bold mb-6 leading-tight">
-            Build Amazing Products Faster
+            Translate your app on the flight
           </h1>
           <p className="text-xl md:text-2xl mb-8 opacity-95">
             The all-in-one platform for modern teams to collaborate, innovate,
@@ -32,6 +32,20 @@ export default function Home() {
         </div>
       </section>
 
+      <div data-lingo-skip>
+        If you want to skip translations for a component, you can use
+        `data-lingo-skip` attribute, or `translate="no"` (which also affects
+        browser translation, see{" "}
+        <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/translate">
+          MDN
+        </a>
+        ).
+        <div>
+          Using this attribute will affect the text inside the component. Nested
+          component will still be translated.
+        </div>
+      </div>
+
       {/* Features Overview */}
       <section className="py-16 px-8 bg-gray-50">
         <div className="max-w-7xl mx-auto">
