beenvoice-app/widgets/TimeClockActivity.tsx

import { HStack, Text, VStack } from "@expo/ui/swift-ui";
import { font, foregroundStyle, padding } from "@expo/ui/swift-ui/modifiers";
import { createLiveActivity, type LiveActivityEnvironment } from "expo-widgets";

import type { TimeClockActivityProps } from "@/lib/time-clock-live-activity.types";

function TimeClockActivity(props: TimeClockActivityProps, _environment: LiveActivityEnvironment) {
  "widget";

  const title = props.description.trim() || "Timer running";
  const subtitle = [props.clientName, props.invoiceLabel].filter(Boolean).join(" · ");

  return {
    banner: (
      <HStack modifiers={[padding({ all: 14 })]}>
        <Text modifiers={[font({ weight: "bold", size: 14 }), foregroundStyle("#FFFFFF")]}>
          beenvoice
        </Text>
        <Text modifiers={[font({ weight: "bold", size: 20 }), foregroundStyle("#FFFFFF")]}>
          {props.elapsedShort}
        </Text>
      </HStack>
    ),
    compactLeading: (
      <Text modifiers={[font({ weight: "bold", size: 11 }), foregroundStyle("#FFFFFF")]}>
        bv
      </Text>
    ),
    compactTrailing: (
      <Text modifiers={[font({ weight: "semibold", size: 14 }), foregroundStyle("#FFFFFF")]}>
        {props.elapsedShort}
      </Text>
    ),
    minimal: (
      <Text modifiers={[font({ weight: "bold", size: 12 }), foregroundStyle("#FFFFFF")]}>
        {props.elapsedShort}
      </Text>
    ),
    expandedLeading: (
      <VStack modifiers={[padding({ all: 12 })]}>
        <Text modifiers={[font({ weight: "bold", size: 16 }), foregroundStyle("#FFFFFF")]}>
          beenvoice
        </Text>
        <Text modifiers={[font({ size: 12 }), foregroundStyle("#E5E5E5")]}>
          {props.clockTime}
        </Text>
      </VStack>
    ),
    expandedTrailing: (
      <VStack modifiers={[padding({ all: 12 })]}>
        <Text modifiers={[font({ weight: "bold", size: 32 }), foregroundStyle("#FFFFFF")]}>
          {props.elapsedShort}
        </Text>
        <Text modifiers={[font({ size: 12 }), foregroundStyle("#E5E5E5")]}>elapsed</Text>
      </VStack>
    ),
    expandedBottom: (
      <VStack modifiers={[padding({ horizontal: 12, bottom: 12 })]}>
        <Text modifiers={[font({ weight: "semibold", size: 15 }), foregroundStyle("#FFFFFF")]}>
          {title}
        </Text>
        {subtitle ? (
          <Text modifiers={[font({ size: 13 }), foregroundStyle("#E5E5E5")]}>{subtitle}</Text>
        ) : null}
        <Text modifiers={[font({ size: 12 }), foregroundStyle("#D4D4D4")]}>
          {props.elapsed} total
        </Text>
      </VStack>
    ),
  };
}

export default createLiveActivity("TimeClockActivity", TimeClockActivity);