feat: update next demo for better pluralization example

Author: AleksandrSl

cmp/demo/next16/app/page.tsx

@@ -1,7 +1,8 @@
-import { Counter } from "@/components/counter";
+import { Counter } from "@/components/Counter";
 import { LocaleSwitcher } from "@lingo.dev/_compiler/react";
 import Link from "next/link";
-import { CounterServerChild } from "@/components/counterServerChild";
+import { ServerChild } from "@/components/ServerChild";
+import { ClientChildWrapper } from "@/components/ClientChildWrapper";
 
 const externalText = <>External text</>;
 
@@ -26,7 +27,7 @@ export default function Home() {
             { code: "en", label: "English" },
             { code: "es", label: "Spanish" },
             { code: "de", label: "Deutsch" },
-            { code: "fr", label: "Français" },
+            { code: "ru", label: "Русский" },
           ]}
         />
       </header>
@@ -40,9 +41,12 @@ export default function Home() {
           It supports both server and client components.
         </p>
         <div className="my-2">
-          <Counter>
-            <CounterServerChild />
-          </Counter>
+          <Counter />
+        </div>
+        <div className="my-2">
+          <ClientChildWrapper>
+            <ServerChild />
+          </ClientChildWrapper>
         </div>
         <div>
           Text inserted as an <code>{"{expression}"}</code> is not translated:{" "}

cmp/demo/next16/components/ClientChildWrapper.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { FC, PropsWithChildren } from "react";
+
+export const ClientChildWrapper: FC<PropsWithChildren> = ({ children }) => {
+  return <div className="flex gap-2">{children}</div>;
+};

cmp/demo/next16/components/Counter.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { FC, useState } from "react";
+
+export const Counter: FC = () => {
+  const [state, setState] = useState(0);
+  return (
+    <button onClick={() => setState((old) => old + 1)}>
+      Clicked {state} times
+    </button>
+  );
+};

…next16/components/counterClientChild.tsx …next16/components/CounterClientChild.tsxcmp/demo/next16/components/counterClientChild.tsx renamed to cmp/demo/next16/components/CounterClientChild.tsx cmp/demo/next16/components/counterClientChild.tsx renamed to cmp/demo/next16/components/CounterClientChild.tsx

@@ -1,4 +1,4 @@
-export const CounterServerChild = () => {
+export const ServerChild = () => {
   return (
     <div className="flex gap-2">
       <button>Rendered on the server</button>

…next16/components/counterServerChild.tsx …p/demo/next16/components/ServerChild.tsxcmp/demo/next16/components/counterServerChild.tsx renamed to cmp/demo/next16/components/ServerChild.tsx cmp/demo/next16/components/counterServerChild.tsx renamed to cmp/demo/next16/components/ServerChild.tsx

@@ -7,7 +7,7 @@ export default withLingo(nextConfig, {
   sourceRoot: "./app",
   lingoDir: ".lingo",
   sourceLocale: "en",
-  targetLocales: ["es", "de", "fr"],
+  targetLocales: ["es", "de", "ru"],
   useDirective: false, // Set to true to require 'use i18n' directive
   models: "lingo.dev",
   dev: {