Text

import { Text } from "@/components/ui/text"

export function TextExample() {
  return (
    <Text>The quick brown fox jumps over the lazy dog.</Text>
  )
}

import EsuissUI
import SwiftUI

struct TextExample: View {
  var body: some View {
    Text("The quick brown fox jumps over the lazy dog.")
      .textVariant(.default)
  }
}

import androidx.compose.runtime.Composable
import com.esuiss.ui.components.Text

@Composable
fun TextExample() {
    Text("The quick brown fox jumps over the lazy dog.")
}

import { View } from "react-native"
import { Text } from "@/components/ui/text"

export function TextTypographyExample() {
  return (
    <View className="gap-4">
      <Text variant="h1">Taxing Laughter</Text>
      <Text variant="h2">The People of the Kingdom</Text>
      <Text variant="h3">The Joke Tax</Text>
      <Text variant="h4">People stopped telling jokes</Text>
      <Text variant="p">
        The king, seeing how much happier his subjects were, realized the error
        of his ways and repealed the joke tax.
      </Text>
      <Text variant="blockquote">
        &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so
        it&apos;s only fair that they should pay for the privilege.&quot;
      </Text>
      <View className="flex-row">
        <Text variant="code">npx @esuiss/ui add text</Text>
      </View>
      <Text variant="lead">
        A modal dialog that interrupts the user with important content.
      </Text>
      <Text variant="large">Are you absolutely sure?</Text>
      <Text variant="small">Email address</Text>
      <Text variant="muted">Enter your email address.</Text>
    </View>
  )
}

import EsuissUI
import SwiftUI

struct TextTypographyExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 16) {
      Text("Taxing Laughter").textVariant(.h1)
      Text("The People of the Kingdom").textVariant(.h2)
      Text("The Joke Tax").textVariant(.h3)
      Text("People stopped telling jokes").textVariant(.h4)
      Text("The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.")
        .textVariant(.p)
      Text("\"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that they should pay for the privilege.\"")
        .textVariant(.blockquote)
      Text(verbatim: "npx @esuiss/ui add text").textVariant(.code)
      Text("A modal dialog that interrupts the user with important content.").textVariant(.lead)
      Text("Are you absolutely sure?").textVariant(.large)
      Text("Email address").textVariant(.small)
      Text("Enter your email address.").textVariant(.muted)
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant

@Composable
fun TextTypography() {
    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        Text("Taxing Laughter", variant = TextVariant.H1)
        Text("The People of the Kingdom", variant = TextVariant.H2)
        Text("The Joke Tax", variant = TextVariant.H3)
        Text("People stopped telling jokes", variant = TextVariant.H4)
        Text(
            "The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.",
            variant = TextVariant.P,
        )
        Text(
            "\"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that they should pay for the privilege.\"",
            variant = TextVariant.Blockquote,
        )
        Row {
            Text("npx @esuiss/ui add text", variant = TextVariant.Code)
        }
        Text("A modal dialog that interrupts the user with important content.", variant = TextVariant.Lead)
        Text("Are you absolutely sure?", variant = TextVariant.Large)
        Text("Email address", variant = TextVariant.Small)
        Text("Enter your email address.", variant = TextVariant.Muted)
    }
}

import { View } from "react-native"
import { Text } from "@/components/ui/text"

export function TextHeadingsExample() {
  return (
    <View className="gap-4">
      <Text variant="h1">Heading 1</Text>
      <Text variant="h2">Heading 2</Text>
      <Text variant="h3">Heading 3</Text>
      <Text variant="h4">Heading 4</Text>
    </View>
  )
}

import EsuissUI
import SwiftUI

struct TextHeadingsExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 16) {
      Text("Heading 1").textVariant(.h1)
      Text("Heading 2").textVariant(.h2)
      Text("Heading 3").textVariant(.h3)
      Text("Heading 4").textVariant(.h4)
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant

@Composable
fun TextHeadings() {
    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        Text("Heading 1", variant = TextVariant.H1)
        Text("Heading 2", variant = TextVariant.H2)
        Text("Heading 3", variant = TextVariant.H3)
        Text("Heading 4", variant = TextVariant.H4)
    }
}