Placeholders

import { Placeholder } from "@pictum/react";

export function Example() {
  return (
    <Placeholder
      width={640}
      height={360}
      background="#ede9fe"
      color="#4c1d95"
      text="Product preview"
      alt="Product preview placeholder"
    />
  );
}

import { usePlaceholder } from "@pictum/react";

export function Example() {
  const asset = usePlaceholder({
    size: 320,
    format: "webp",
    density: 2,
    text: "Coming soon",
  });

  return (
    <img
      src={asset.url}
      alt="Coming soon placeholder"
      width={320}
      height={320}
    />
  );
}