143 lines
4.0 KiB
TypeScript
143 lines
4.0 KiB
TypeScript
/* 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>,
|
|
],
|
|
}
|