Function CounterWidget

with-widgets/widgets/CounterWidget.tsx:22–100

(props: CounterWidgetProps, environment: WidgetEnvironment)

};

const CounterWidget = (props: CounterWidgetProps, environment: WidgetEnvironment) => {
  'widget';
  // Only show the full-color background in fullColor mode (or if undefined).
  const isFullColor =
    environment.widgetRenderingMode == null || environment.widgetRenderingMode === 'fullColor';
  return (
    <ZStack
      alignment="leading"
      modifiers={[containerBackground('#000000', 'widget'), clipShape('containerRelativeShape')]}>


      <ZStack
        alignment="bottomTrailing"
        modifiers={[
          frame({ maxWidth: Infinity, maxHeight: Infinity }),
          clipShape('containerRelativeShape'),
          zIndex(0),
        ]}>
        {isFullColor && (
          <Rectangle
            modifiers={[
              foregroundStyle({
                type: 'linearGradient',
                colors: ['#58BEF6', '#366DF2'],
                startPoint: { x: 0.5, y: 0 },
                endPoint: { x: 0.5, y: 1 },
              }),
              frame({ maxWidth: Infinity, maxHeight: Infinity }),
            ]}
          />
        )}

        {props.gridUri && (
          <Image
            uiImage={props.gridUri}
            modifiers={[
              resizable(),
              frame({ width: 150, height: 150 }),
              scaleEffect(3),
              offset({ x: 0, y: 100 }),
            ]}
          />
        )}
      </ZStack>

      <VStack
        alignment="leading"

        spacing={4}
        modifiers={[frame({ maxWidth: Infinity, alignment: 'leading' }), padding({ all: 16 }), zIndex(3)]}>
        <HStack spacing={16}>
          {props.logoUri && (
            <Image
              uiImage={props.logoUri}
              modifiers={[resizable(), frame({ width: 16, height: 14 })]}

            />
          )}