SafeAreaInset

import { SafeAreaInset, Surface, Text, VStack } from "@/ohmygui";

export default function Example() {
  return (
    <VStack align="stretch" gap="sm">
      <SafeAreaInset edges={["top", "leading", "trailing"]} spacing="sm">
        <Surface tone="paper" padding="md">
          <Text as="p">Header inset: top and both sides.</Text>
        </Surface>
      </SafeAreaInset>
      <SafeAreaInset edges={["bottom", "leading", "trailing"]} spacing="lg">
        <Surface appearance="outlined" padding="md">
          <Text as="p">Action area inset: bottom and both sides.</Text>
        </Surface>
      </SafeAreaInset>
    </VStack>
  );
}