beenvoice-app/widgets/TimeClockActivity.tsx

import { HStack, Image, Text } from "@expo/ui/swift-ui";
import {
  font,
  foregroundStyle,
  lineLimit,
  minimumScaleFactor,
  monospacedDigit,
  padding,
  widgetAccentedRenderingMode,
} 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 green = "green";
  const title = props.description.trim() || "Clock In";
  const subtitle = [props.clientName, props.invoiceLabel].filter(Boolean).join(" · ");
  const detailLine = subtitle ? `${title}\n${subtitle}` : title;

  const timerMods = [
    font({ design: "monospaced", weight: "bold", size: 20 }),
    monospacedDigit(),
    foregroundStyle(green),
    lineLimit(1),
    minimumScaleFactor(0.85),
  ];
  const compactTimerMods = [
    font({ design: "monospaced", weight: "semibold", size: 11 }),
    monospacedDigit(),
    foregroundStyle(green),
    lineLimit(1),
    minimumScaleFactor(0.8),
  ];
  const brandMods = [
    font({ weight: "semibold", size: 13 }),
    foregroundStyle(green),
    lineLimit(1),
    minimumScaleFactor(0.85),
  ];
  const detailMods = [
    font({ weight: "medium", size: 12 }),
    foregroundStyle({ type: "hierarchical", style: "secondary" }),
    lineLimit(2),
    minimumScaleFactor(0.85),
  ];

  return {
    banner: (
      <HStack alignment="center" spacing={10} modifiers={[padding({ all: 12 })]}>
        <Image
          systemName="dollarsign.circle.fill"
          color={green}
          size={22}
          modifiers={[widgetAccentedRenderingMode("fullColor")]}
        />
        <Text modifiers={brandMods}>beenvoice</Text>
        <Text modifiers={timerMods}>{props.elapsedShort}</Text>
      </HStack>
    ),
    bannerSmall: (
      <HStack alignment="center" spacing={8} modifiers={[padding({ all: 10 })]}>
        <Image
          systemName="dollarsign.circle.fill"
          color={green}
          size={18}
          modifiers={[widgetAccentedRenderingMode("fullColor")]}
        />
        <Text modifiers={brandMods}>beenvoice</Text>
        <Text modifiers={compactTimerMods}>{props.elapsedShort}</Text>
      </HStack>
    ),
    compactLeading: (
      <Image
        systemName="dollarsign.circle.fill"
        color={green}
        size={15}
        modifiers={[widgetAccentedRenderingMode("fullColor")]}
      />
    ),
    compactTrailing: <Text modifiers={compactTimerMods}>{props.elapsedShort}</Text>,
    minimal: (
      <Image
        systemName="dollarsign.circle.fill"
        color={green}
        size={12}
        modifiers={[widgetAccentedRenderingMode("fullColor")]}
      />
    ),
    expandedLeading: (
      <Image
        systemName="dollarsign.circle.fill"
        color={green}
        size={20}
        modifiers={[widgetAccentedRenderingMode("fullColor")]}
      />
    ),
    expandedTrailing: <Text modifiers={timerMods}>{props.elapsedShort}</Text>,
    expandedBottom: <Text modifiers={detailMods}>{detailLine}</Text>,
  };
}

export default createLiveActivity("TimeClockActivity", TimeClockActivity);