popover.jsx

import React, { useMemo, useCallback } from 'react';
import {
  reactExtension,
  Style,
  View,
  Text,
  Button,
  Image,
  BlockStack,
} from '@shopify/ui-extensions-react/checkout';

function Example() {
  return(
  <View>
      <Image source="https://placehold.co/600x400" />
  
    <View
      background="base"
      padding="none"
      // Responsive width
      minInlineSize={Style.default("100%").when({
        viewportInlineSize: { min: "medium" }
      }, "35%")}
      maxInlineSize={Style.default("100%").when({
        viewportInlineSize: { min: "medium" }
      }, "35%")}
      // Absolute positioning
      position={Style.default(
        { type: "absolute", blockEnd: 1 } // Mobile: Card at bottom
      ).when(
        { viewportInlineSize: { min: "medium" } },
        { blockEnd: 10, inlineStart: 10 } // Desktop: Card in top left
      )}
      // Responsive border & radius
      border={Style.default("none").when({
        viewportInlineSize: { min: "medium" }
      }, "base")}
      borderRadius={Style.default("none").when({
        viewportInlineSize: { min: "medium" }
      }, "base")}
    >
      <BlockStack padding="base">
        <BlockStack spacing="tight">
              <Text size="base">Get this amazing offer</Text>

          <BlockStack spacing="none">
            <Text appearance="subdued" size="small">
              Discount 10%
            </Text>
          </BlockStack>

          <Button kind="primary" onPress={() => {}}>
            Buy now
          </Button>
        </BlockStack>
      </BlockStack>
    </View>
  </View>
  )
}

const CheckoutBlock = reactExtension(
  'purchase.checkout.block.render',
  () => <Example />,
);

export default CheckoutBlock;