@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.3

package/docs/uk/dictionary/gender.md

@@ -27,8 +27,220 @@ author: aymericzip
 
 ## Як працює гендерна логіка
 
-У Intlayer контент, залежний від гендера, реалізується за допомогою функції `gender`, яка зіставляє конкретні значення гендера ('male', 'female') з відповідним вмістом. Такий підхід дозволяє динамічно обирати контент залежно від заданого гендера. При інтеграції з React Intlayer або Next Intlayer відповідний вміст автоматично вибирається відповідно до гендера, переданого під час виконання.
+<Tabs group="framework">
+  <Tab label="React" value="react">
 
+To utilize gender-based content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a gender to select the appropriate output.
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const GenderComponent: FC = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>
+        {
+          /* Output: my content for male users */
+          myGender("male")
+        }
+      </p>
+      <p>
+        {
+          /* Output: my content for female users */
+          myGender("female")
+        }
+      </p>
+      <p>
+        {
+          /* Output: my content for male users */
+          myGender("m")
+        }
+      </p>
+      <p>
+        {
+          /* Output: my content for female users */
+          myGender("f")
+        }
+      </p>
+      <p>
+        {
+          /* Output: my content when gender is not specified */
+          myGender("")
+        }
+      </p>
+      <p>
+        {
+          /* Output: my content when gender is not specified */
+          myGender(undefined)
+        }
+      </p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To utilize gender-based content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const GenderComponent: FC = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myGender("male")}</p>
+      <p>{myGender("female")}</p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To utilize gender-based content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { myGender } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <p>{{ myGender("male") }}</p>
+    <p>{{ myGender("female") }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To utilize gender-based content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <p>{$content.myGender("male")}</p>
+  <p>{$content.myGender("female")}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To utilize gender-based content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const GenderComponent: FC = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myGender("male")}</p>
+      <p>{myGender("female")}</p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To utilize gender-based content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const GenderComponent: Component = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myGender("male")}</p>
+      <p>{myGender("female")}</p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To utilize gender-based content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-gender",
+  template: `
+    <div>
+      <p>{{ content().myGender("male") }}</p>
+      <p>{{ content().myGender("female") }}</p>
+    </div>
+  `,
+})
+export class GenderComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To utilize gender-based content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("gender-male")!.textContent =
+    newContent.myGender("male");
+  document.getElementById("gender-female")!.textContent =
+    newContent.myGender("female");
+});
+
+// Initial render
+document.getElementById("gender-male")!.textContent = content.myGender("male");
+document.getElementById("gender-female")!.textContent =
+  content.myGender("female");
+```
+
+  </Tab>
+</Tabs>
 ## Налаштування контенту, залежного від гендера
 
 Щоб налаштувати контент залежно від гендера у вашому проекті Intlayer, створіть модуль контенту, який містить ваші визначення для конкретних гендерів. Нижче наведені приклади в різних форматах.
@@ -71,7 +283,10 @@ export default myGenderContent;
 
 ## Використання контенту за гендером у React Intlayer
 
-Щоб використовувати контент, залежний від гендеру, у React-компоненті, імпортуйте й застосуйте хук `useIntlayer` з пакету `react-intlayer`. Цей хук отримує контент за вказаним ключем і дозволяє передати гендер, щоб обрати відповідний варіант виводу.
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To utilize gender-based content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a gender to select the appropriate output.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -84,37 +299,37 @@ const GenderComponent: FC = () => {
     <div>
       <p>
         {
-          /* Вивід: мій контент для чоловіків */
+          /* Output: my content for male users */
           myGender("male")
         }
       </p>
       <p>
         {
-          /* Вивід: мій контент для жіночої аудиторії */
+          /* Output: my content for female users */
           myGender("female")
         }
       </p>
       <p>
         {
-          /* Вивід: мій контент для чоловічої аудиторії */
+          /* Output: my content for male users */
           myGender("m")
         }
       </p>
       <p>
         {
-          /* Вивід: мій контент для жіночої аудиторії */
+          /* Output: my content for female users */
           myGender("f")
         }
       </p>
       <p>
         {
-          /* Вивід: мій контент, коли стать не вказана */
+          /* Output: my content when gender is not specified */
           myGender("")
         }
       </p>
       <p>
         {
-          /* Вивід: мій контент, коли стать не вказана */
+          /* Output: my content when gender is not specified */
           myGender(undefined)
         }
       </p>
@@ -125,6 +340,164 @@ const GenderComponent: FC = () => {
 export default GenderComponent;
 ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To utilize gender-based content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const GenderComponent: FC = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myGender("male")}</p>
+      <p>{myGender("female")}</p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To utilize gender-based content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { myGender } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <p>{{ myGender("male") }}</p>
+    <p>{{ myGender("female") }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To utilize gender-based content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <p>{$content.myGender("male")}</p>
+  <p>{$content.myGender("female")}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To utilize gender-based content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const GenderComponent: FC = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myGender("male")}</p>
+      <p>{myGender("female")}</p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To utilize gender-based content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const GenderComponent: Component = () => {
+  const { myGender } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myGender("male")}</p>
+      <p>{myGender("female")}</p>
+    </div>
+  );
+};
+
+export default GenderComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To utilize gender-based content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-gender",
+  template: `
+    <div>
+      <p>{{ content().myGender("male") }}</p>
+      <p>{{ content().myGender("female") }}</p>
+    </div>
+  `,
+})
+export class GenderComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To utilize gender-based content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("gender-male")!.textContent =
+    newContent.myGender("male");
+  document.getElementById("gender-female")!.textContent =
+    newContent.myGender("female");
+});
+
+// Initial render
+document.getElementById("gender-male")!.textContent = content.myGender("male");
+document.getElementById("gender-female")!.textContent =
+  content.myGender("female");
+```
+
+  </Tab>
+</Tabs>
+
 ## Додаткові ресурси
 
 Для детальнішої інформації щодо налаштування та використання зверніться до таких ресурсів: