template_0205

RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoText.tsx

@@ -0,0 +1,142 @@
+/* eslint-disable react/jsx-key, react-native/no-inline-styles */
+import { Text } from "@/components/Text"
+import { translate } from "@/i18n/translate"
+
+import { DemoDivider } from "../DemoDivider"
+import { Demo } from "./types"
+import { DemoUseCase } from "../DemoUseCase"
+
+export const DemoText: Demo = {
+  name: "Text",
+  description: "demoText:description",
+  data: ({ theme }) => [
+    <DemoUseCase
+      name="demoText:useCase.presets.name"
+      description="demoText:useCase.presets.description"
+    >
+      <Text>{translate("demoText:useCase.presets.default")}</Text>
+
+      <DemoDivider />
+
+      <Text preset="bold">{translate("demoText:useCase.presets.bold")}</Text>
+
+      <DemoDivider />
+
+      <Text preset="subheading">{translate("demoText:useCase.presets.subheading")}</Text>
+
+      <DemoDivider />
+
+      <Text preset="heading">{translate("demoText:useCase.presets.heading")}</Text>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoText:useCase.sizes.name"
+      description="demoText:useCase.sizes.description"
+    >
+      <Text size="xs">{translate("demoText:useCase.sizes.xs")}</Text>
+
+      <DemoDivider />
+
+      <Text size="sm">{translate("demoText:useCase.sizes.sm")}</Text>
+
+      <DemoDivider />
+
+      <Text size="md">{translate("demoText:useCase.sizes.md")}</Text>
+
+      <DemoDivider />
+
+      <Text size="lg">{translate("demoText:useCase.sizes.lg")}</Text>
+
+      <DemoDivider />
+
+      <Text size="xl">{translate("demoText:useCase.sizes.xl")}</Text>
+
+      <DemoDivider />
+
+      <Text size="xxl">{translate("demoText:useCase.sizes.xxl")}</Text>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoText:useCase.weights.name"
+      description="demoText:useCase.weights.description"
+    >
+      <Text weight="light">{translate("demoText:useCase.weights.light")}</Text>
+
+      <DemoDivider />
+
+      <Text weight="normal">{translate("demoText:useCase.weights.normal")}</Text>
+
+      <DemoDivider />
+
+      <Text weight="medium">{translate("demoText:useCase.weights.medium")}</Text>
+
+      <DemoDivider />
+
+      <Text weight="semiBold">{translate("demoText:useCase.weights.semibold")}</Text>
+
+      <DemoDivider />
+
+      <Text weight="bold">{translate("demoText:useCase.weights.bold")}</Text>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoText:useCase.passingContent.name"
+      description="demoText:useCase.passingContent.description"
+    >
+      <Text text={translate("demoText:useCase.passingContent.viaText")} />
+
+      <DemoDivider />
+
+      <Text>
+        <Text tx="demoText:useCase.passingContent.viaTx" />
+        <Text tx="showroomScreen:lorem2Sentences" />
+      </Text>
+
+      <DemoDivider />
+
+      <Text>{translate("demoText:useCase.passingContent.children")}</Text>
+
+      <DemoDivider />
+
+      <Text>
+        <Text>{translate("demoText:useCase.passingContent.nestedChildren")}</Text>
+        <Text preset="bold">{translate("demoText:useCase.passingContent.nestedChildren2")}</Text>
+        {` `}
+        <Text preset="default">{translate("demoText:useCase.passingContent.nestedChildren3")}</Text>
+        {` `}
+        <Text preset="bold"> {translate("demoText:useCase.passingContent.nestedChildren4")}</Text>
+      </Text>
+    </DemoUseCase>,
+
+    <DemoUseCase
+      name="demoText:useCase.styling.name"
+      description="demoText:useCase.styling.description"
+    >
+      <Text>
+        <Text style={{ color: theme.colors.error }}>
+          {translate("demoText:useCase.styling.text")}
+        </Text>
+        {` `}
+        <Text
+          style={{
+            color: theme.colors.palette.neutral100,
+            backgroundColor: theme.colors.error,
+          }}
+        >
+          {translate("demoText:useCase.styling.text2")}
+        </Text>
+        {` `}
+        <Text
+          style={{
+            textDecorationLine: "underline line-through",
+            textDecorationStyle: "dashed",
+            color: theme.colors.error,
+            textDecorationColor: theme.colors.error,
+          }}
+        >
+          {translate("demoText:useCase.styling.text3")}
+        </Text>
+      </Text>
+    </DemoUseCase>,
+  ],
+}