Reshaped Toast

import { Button, Dismissible, Image, Reshaped, Text, View } from "reshaped/bundle";
import { useToast } from "@/components/ui/reshaped-toast";

function Trigger() {
  const toast = useToast();
  return (
    <Button
      onClick={() => {
        const id = toast.show({
          children: (
            <View gap={4} direction="row">
              <View aspectRatio={1 / 1}>
                <Image
                  height="100px"
                  src="https://www.reshaped.so/img/examples/architecture-4.webp"
                  borderRadius="medium"
                />
              </View>
              <View.Item grow>
                <View gap={1}>
                  <Dismissible
                    closeAriaLabel="Close notification"
                    onClose={() => toast.hide(id)}
                  >
                    <Text variant="body-1" weight="bold">
                      Say thanks! 🙌
                    </Text>
                  </Dismissible>
                  <Text variant="body-2">
                    Give a shoutout to the author on social media or copy the text
                    below to attribute.
                  </Text>
                  <View.Item gapBefore={2}>
                    <View
                      padding={2}
                      borderColor="neutral-faded"
                      backgroundColor="neutral-faded"
                      borderRadius="small"
                    >
                      Photo by Pierre Châtel-Innocenti
                    </View>
                  </View.Item>
                </View>
              </View.Item>
            </View>
          ),
          color: "neutral",
          position: "bottom-start",
          timeout: 0,
          width: "long",
        });
      }}
    >
      Show promotion banner
    </Button>
  );
}

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ minHeight: 420, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
        <Trigger />
      </div>
    </Reshaped>
  );
}