QR Code Generator

Copypublic static encodeSegments(
  segs: Readonly<Array<QrSegment>>,
  ecl: QrCode.Ecc,
  minVersion: int = 1,
  maxVersion: int = 40,
  mask: int = -1,
  boostEcl: boolean = true,
): QrCode {
  if (
    !(
      QrCode.MIN_VERSION <= minVersion &&
      minVersion <= maxVersion &&
      maxVersion <= QrCode.MAX_VERSION
    ) ||
    mask < -1 ||
    mask > 7
  )
    throw new RangeError("Invalid value");
 
  // Find the minimal version number to use
  let version: int;
  let dataUsedBits: int;
  for (version = minVersion; ; version++) {
    const dataCapacityBits: int =
      QrCode.getNumDataCodewords(version, ecl) * 8; // Number of data bits available
    const usedBits: number = QrSegment.getTotalBits(segs, version);
    if (usedBits <= dataCapacityBits) {
      dataUsedBits = usedBits;
      break; // This version number is found to be suitable
    }
    if (version >= maxVersion)
      // All versions in the range could not fit the given data
      throw new RangeError("Data too long");
  }
 
  // Increase the error correction level while the data still fits in the current version number
  for (const newEcl of [
    QrCode.Ecc.MEDIUM,
    QrCode.Ecc.QUARTILE,
    QrCode.Ecc.HIGH,
  ]) {
    // From low to high
    if (
      boostEcl &&
      dataUsedBits <= QrCode.getNumDataCodewords(version, newEcl) * 8
    )
      ecl = newEcl;
  }
 
  // Concatenate all segments to create the data bit string
  let bb: Array<bit> = [];
  for (const seg of segs) {
    appendBits(seg.mode.modeBits, 4, bb);
    appendBits(seg.numChars, seg.mode.numCharCountBits(version), bb);
    for (const b of seg.getData()) bb.push(b);
  }
  assert(bb.length == dataUsedBits);
 
  // Add terminator and pad up to a byte if applicable
  const dataCapacityBits: int =
    QrCode.getNumDataCodewords(version, ecl) * 8;
  assert(bb.length <= dataCapacityBits);
  appendBits(0, Math.min(4, dataCapacityBits - bb.length), bb);
  appendBits(0, (8 - (bb.length % 8)) % 8, bb);
  assert(bb.length % 8 == 0);
 
  // Pad with alternating bytes until data capacity is reached
  for (
    let padByte = 0xec;
    bb.length < dataCapacityBits;
    padByte ^= 0xec ^ 0x11
  )
    appendBits(padByte, 8, bb);
 
  // Pack bits into bytes in big endian
  let dataCodewords: Array<byte> = [];
  while (dataCodewords.length * 8 < bb.length) dataCodewords.push(0);
  bb.forEach(
    (b: bit, i: int) => (dataCodewords[i >>> 3] |= b << (7 - (i & 7))),
  );

Copy// The width and height of this QR Code, measured in modules, between
// 21 and 177 (inclusive). This is equal to version * 4 + 17.
public readonly size: int;
 
// The index of the mask pattern used in this QR Code, which is between 0 and 7 (inclusive).
// Even if a QR Code is created with automatic masking requested (mask = -1),
// the resulting object still has a mask value between 0 and 7.
public readonly mask: int;
 
// The modules of this QR Code (false = light, true = dark).
// Immutable after constructor finishes. Accessed through getModule().
private readonly modules: Array<Array<boolean>> = [];
 
// Indicates function modules that are not subjected to masking. Discarded when constructor finishes.
private readonly isFunction: Array<Array<boolean>> = [];
 
/*-- Constructor (low level) and fields --*/
 
// Creates a new QR Code with the given version number,
// error correction level, data codeword bytes, and mask number.
// This is a low-level API that most users should not use directly.
// A mid-level API is the encodeSegments() function.
public constructor(
  // The version number of this QR Code, which is between 1 and 40 (inclusive).
  // This determines the size of this barcode.
  public readonly version: int,
 
  // The error correction level used in this QR Code.
  public readonly errorCorrectionLevel: QrCode.Ecc,
 
  dataCodewords: Readonly<Array<byte>>,
 
  msk: int,
) {
  // Check scalar arguments
  if (version < QrCode.MIN_VERSION || version > QrCode.MAX_VERSION)
    throw new RangeError("Version value out of range");
  if (msk < -1 || msk > 7) throw new RangeError("Mask value out of range");
  this.size = version * 4 + 17;
 
  // Initialize both grids to be size*size arrays of Boolean false
  let row: Array<boolean> = [];
  for (let i = 0; i < this.size; i++) row.push(false);
  for (let i = 0; i < this.size; i++) {
    this.modules.push(row.slice()); // Initially all light
    this.isFunction.push(row.slice());
  }
 
  // Compute ECC, draw modules
  this.drawFunctionPatterns();
  const allCodewords: Array<byte> = this.addEccAndInterleave(dataCodewords);
  this.drawCodewords(allCodewords);
 
  // Do masking
  if (msk == -1) {
    // Automatically choose best mask
    let minPenalty: int = 1000000000;
    for (let i = 0; i < 8; i++) {
      this.applyMask(i);
      this.drawFormatBits(i);
      const penalty: int = this.getPenaltyScore();
      if (penalty < minPenalty) {
        msk = i;
        minPenalty = penalty;
      }

Copyexport const ERROR_LEVEL_MAP: { [index: string]: qrcodegen.QrCode.Ecc } = {
  L: qrcodegen.QrCode.Ecc.LOW,
  M: qrcodegen.QrCode.Ecc.MEDIUM,
  Q: qrcodegen.QrCode.Ecc.QUARTILE,
  H: qrcodegen.QrCode.Ecc.HIGH,
};

Copyexport type DotStyle = "square" | "rounded" | "extra-rounded";
export type MarkerCenterStyle = "square" | "circle";
export type MarkerBorderStyle = "square" | "rounded-square" | "circle";

Copyfunction finderBorderPath(
  x: number,
  y: number,
  borderStyle: MarkerBorderStyle,
): string {
  const cx = x + 3.5;
  const cy = y + 3.5;
 
  if (borderStyle === "square") {
    const outer = `M${x},${y}H${x + 7}V${y + 7}H${x}Z`;
    const inner = `M${x + 1},${y + 1}H${x + 6}V${y + 6}H${x + 1}Z`;
    return `${outer} ${inner}`;
  }
 
  if (borderStyle === "rounded-square") {
    const outer = roundedRectPath(x, y, 7, 7, 1.5);
    // Inner cutout uses a smaller radius so corners look intentional
    const inner = roundedRectPath(x + 1, y + 1, 5, 5, 0.75);
    return `${outer} ${inner}`;
  }
 
  // circle
  const outer = circlePath(cx, cy, 3.5);
  const inner = circlePath(cx, cy, 2.5);
  return `${outer} ${inner}`;
}

Copyconst effectiveMarkerColor = markerColor ?? fgColor;

Copylet excavation: Excavation | null = null;
if (imageSettings.excavate) {
  const floorX = Math.floor(x);
  const floorY = Math.floor(y);
  const ceilW = Math.ceil(w + x - floorX);
  const ceilH = Math.ceil(h + y - floorY);
  excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
}

Copyconst shouldUseHigherErrorLevel =
  isOGContext && imageSettings?.excavate && (level === "L" || level === "M");
 
const effectiveLevel = shouldUseHigherErrorLevel ? "Q" : level;

Copyexport async function getQRAsSVGDataUri(props: QRProps) {
  const {
    value,
    size = DEFAULT_SIZE,
    level = DEFAULT_LEVEL,
    bgColor = DEFAULT_BGCOLOR,
    fgColor = DEFAULT_FGCOLOR,
    margin = DEFAULT_MARGIN,
    imageSettings,
    dotStyle = "square",
    markerCenterStyle = "square",
    markerBorderStyle = "square",
    markerColor,
  } = props;
 
  const effectiveMarkerColor = markerColor ?? fgColor;
 
  let cells = qrcodegen.QrCode.encodeText(
    value,
    ERROR_LEVEL_MAP[level],
  ).getModules();
 
  const numCells = cells.length + margin * 2;
  const calculatedImageSettings = getImageSettings(
    cells,
    size,
    margin,
    imageSettings,
  );
 
  let image = "";
  if (imageSettings != null && calculatedImageSettings != null) {
    if (calculatedImageSettings.excavation != null)
      cells = excavateModules(cells, calculatedImageSettings.excavation);
 
    const base64Image = await getBase64Image(imageSettings.src);
 
    image = [
      `<image href="${base64Image}"`,
      `height="${calculatedImageSettings.h}"`,
      `width="${calculatedImageSettings.w}"`,
      `x="${calculatedImageSettings.x + margin}"`,
      `y="${calculatedImageSettings.y + margin}"`,
      'preserveAspectRatio="none"></image>',
    ].join(" ");
  }

Copy  const fgPath =
    dotStyle === "rounded"
      ? generateRoundedDotPath(cells, margin)
      : dotStyle === "extra-rounded"
        ? generateExtraRoundedDotPath(cells, margin)
        : generateSquareDotPath(cells, margin);
 
  const numModules = cells.length;
  const finderPositions = [
    { x: margin, y: margin },
    { x: numModules - 7 + margin, y: margin },
    { x: margin, y: numModules - 7 + margin },
  ];
 
  const finderSVG = finderPositions
    .map((pos) =>
      getFinderPatternSVGString({
        x: pos.x,
        y: pos.y,
        markerColor: effectiveMarkerColor,
        bgColor,
        borderStyle: markerBorderStyle,
        centerStyle: markerCenterStyle,
      }),
    )
    .join("");
 
  const svgData = [
    `<svg xmlns="http://www.w3.org/2000/svg" height="${size}" width="${size}" viewBox="0 0 ${numCells} ${numCells}">`,
    `<path fill="${bgColor}" d="M0,0 h${numCells}v${numCells}H0z" shape-rendering="crispEdges"></path>`,
    `<path fill="${fgColor}" d="${fgPath}" shape-rendering="crispEdges"></path>`,
    finderSVG,
    image,
    "</svg>",
  ].join("");
 
  return `data:image/svg+xml,${encodeURIComponent(svgData)}`;
}

Copyconst getBase64Image = (imgUrl: string) => {
  return new Promise(function (resolve, reject) {
    const img = new Image();
    img.src = imgUrl;
    img.setAttribute("crossOrigin", "anonymous");
 
    img.onload = function () {
      const canvas = document.createElement("canvas");
 
      canvas.width = img.width;
      canvas.height = img.height;
 
      const ctx = canvas.getContext("2d");
      ctx?.drawImage(img, 0, 0);
 
      const dataURL = canvas.toDataURL("image/png");
      resolve(dataURL);
    };
 
    img.onerror = function () {
      reject("The image could not be loaded.");
    };
  });
};

Copyexport async function getQRAsCanvas(
  props: QRProps,
  type: string,
  getCanvas?: boolean,
): Promise<HTMLCanvasElement | string> {
  const {
    value,
    size = DEFAULT_SIZE,
    level = DEFAULT_LEVEL,
    bgColor = DEFAULT_BGCOLOR,
    fgColor = DEFAULT_FGCOLOR,
    margin = DEFAULT_MARGIN,
    imageSettings,
    dotStyle = "square",
    markerCenterStyle = "square",
    markerBorderStyle = "square",
    markerColor,
  } = props;
 
  const effectiveMarkerColor = markerColor ?? fgColor;
 
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
 
  let cells = qrcodegen.QrCode.encodeText(
    value,
    ERROR_LEVEL_MAP[level],
  ).getModules();
  const numCells = cells.length + margin * 2;
  const calculatedImageSettings = getImageSettings(
    cells,
    size,
    margin,
    imageSettings,
  );
 
  const image = new Image();
  image.crossOrigin = "anonymous";
  if (calculatedImageSettings) {
    // @ts-expect-error: imageSettings is not null
    await waitUntilImageLoaded(image, imageSettings.src);
    if (calculatedImageSettings.excavation != null) {
      cells = excavateModules(cells, calculatedImageSettings.excavation);
    }
  }
 
  const pixelRatio = window.devicePixelRatio || 1;
  canvas.height = canvas.width = size * pixelRatio;
  const scale = (size / numCells) * pixelRatio;
  ctx.scale(scale, scale);
 
  // Background
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, numCells, numCells);
 

Copy// Data dots (excluding finder pattern cells)
ctx.fillStyle = fgColor;
if (dotStyle === "rounded") {
  const r = 0.4;
  cells.forEach((row, y) => {
    row.forEach((cell, x) => {
      if (!cell || isFinderPatternCell(x, y, cells.length)) return;
      const px = x + margin;
      const py = y + margin;
      drawRoundedRect(ctx, px, py, 1, 1, r);
    });
  });
} else if (dotStyle === "extra-rounded") {
  const r = 0.5;
  const n = cells.length;
  const isDark = (xi: number, yi: number) =>
    xi >= 0 &&
    yi >= 0 &&
    xi < n &&
    yi < n &&
    !!(cells[yi][xi] && !isFinderPatternCell(xi, yi, n));
 
  cells.forEach((row, y) => {
    row.forEach((cell, x) => {
      if (!cell || isFinderPatternCell(x, y, n)) return;
 
      const px = x + margin;
      const py = y + margin;
      const top = isDark(x, y - 1);
      const right = isDark(x + 1, y);
      const bottom = isDark(x, y + 1);
      const left = isDark(x - 1, y);
 
      // Draw as a rounded rect where connected sides have no arc
      const rTL = top || left ? 0 : r;
      const rTR = top || right ? 0 : r;
      const rBR = bottom || right ? 0 : r;
      const rBL = bottom || left ? 0 : r;
 
      ctx.beginPath();
      ctx.moveTo(px + rTL, py);
      ctx.lineTo(px + 1 - rTR, py);
      if (rTR > 0) ctx.arcTo(px + 1, py, px + 1, py + rTR, rTR);
      ctx.lineTo(px + 1, py + 1 - rBR);
      if (rBR > 0) ctx.arcTo(px + 1, py + 1, px + 1 - rBR, py + 1, rBR);
      ctx.lineTo(px + rBL, py + 1);

Copyfunction waitUntilImageLoaded(img: HTMLImageElement, src: string) {
  return new Promise((resolve) => {
    function onFinish() {
      img.onload = null;
      img.onerror = null;
      resolve(true);
    }
    img.onload = onFinish;
    img.onerror = onFinish;
    img.src = src;
    img.loading = "eager";
  });
}

Copyexport const QRCode = memo(
  ({
    url,
    fgColor,
    hideLogo,
    logo,
    scale = 1,
    margin = DEFAULT_MARGIN,
    dotStyle,
    markerCenterStyle,
    markerBorderStyle,
    markerColor,
  }: {
    url: string;
    fgColor?: string;
    hideLogo?: boolean;
    logo?: string;
    scale?: number;
    margin?: number;
    dotStyle?: DotStyle;
    markerCenterStyle?: MarkerCenterStyle;
    markerBorderStyle?: MarkerBorderStyle;
    markerColor?: string;
  }) => {
    const qrData = useMemo(
      () =>
        getQRData({
          url,
          fgColor,
          hideLogo,
          logo,
          margin,
          dotStyle,
          markerCenterStyle,
          markerBorderStyle,
          markerColor,
        }),
      [
        url,
        fgColor,
        hideLogo,
        logo,
        margin,
        dotStyle,
        markerCenterStyle,
        markerBorderStyle,
        markerColor,
      ],
    );
 
    return (
      <QRCodeSVG
        value={qrData.value}
        size={(qrData.size / 8) * scale}
        bgColor={qrData.bgColor}
        fgColor={qrData.fgColor}
        level={qrData.level}
        margin={qrData.margin}
        dotStyle={qrData.dotStyle}
        markerCenterStyle={qrData.markerCenterStyle}
        markerBorderStyle={qrData.markerBorderStyle}
        markerColor={qrData.markerColor}
        {...(qrData.imageSettings && {
          imageSettings: {
            ...qrData.imageSettings,
            height: qrData.imageSettings
              ? (qrData.imageSettings.height / 8) * scale
              : 0,
            width: qrData.imageSettings
              ? (qrData.imageSettings.width / 8) * scale
              : 0,
          },
        })}
      />
    );
  },
);
 
QRCode.displayName = "QRCode";

Copyexport const runtime = "edge";
 
const CORS_HEADERS = new Headers({
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, OPTIONS",
});
 
export async function GET(req: NextRequest) {
  try {
    const paramsParsed = getQRCodeQuerySchema.parse(getSearchParams(req.url));
 

Copyexport const qrCodePaths: ZodOpenApiPathsObject = {
  "/qr": {
    get: getQRCode,
  },
};

Copyexport const getQRCodeQuerySchema = z.object({
  url: parseUrlSchema.describe("The URL to generate a QR code for."),
  logo: z
    .string()
    .optional()
    .describe(
      "The logo to include in the QR code. Can only be used with a paid plan on Dub.",
    ),
  size: z.coerce
    .number()
    .optional()
    .default(600)
    .describe(
      "The size of the QR code in pixels. Defaults to `600` if not provided.",
    ),
  level: z
    .enum(QR_LEVELS)
    .optional()
    .default("L")
    .describe(
      "The level of error correction to use for the QR code. Defaults to `L` if not provided.",
    ),
  fgColor: z
    .string()
    .optional()
    .default(DEFAULT_FGCOLOR)
    .describe(
      "The foreground color of the QR code in hex format. Defaults to `#000000` if not provided.",
    ),
  bgColor: z
    .string()
    .optional()
    .default(DEFAULT_BGCOLOR)
    .describe(
      "The background color of the QR code in hex format. Defaults to `#ffffff` if not provided.",
    ),
  hideLogo: booleanQuerySchema
    .optional()
    .default(false)
    .describe(
      "Whether to hide the logo in the QR code. Can only be used with a paid plan on Dub.",
    ),
  margin: z.coerce
    .number()
    .optional()
    .default(DEFAULT_MARGIN)
    .describe(
      `The size of the margin around the QR code. Defaults to ${DEFAULT_MARGIN} if not provided.`,
    ),
  includeMargin: booleanQuerySchema
    .optional()
    .default(true)
    .describe(
      "DEPRECATED: Margin is included by default. Use the `margin` prop to customize the margin size.",
    )
    .meta({ deprecated: true }),
});

CopyincludeMargin: booleanQuerySchema
  .optional()
  .default(true)
  .describe(
    "DEPRECATED: Margin is included by default. Use the `margin` prop to customize the margin size.",
  )
  .meta({ deprecated: true }),

Copyawait ratelimitOrThrow(req, "qr");
 
const { logo, url, size, level, fgColor, bgColor, margin, hideLogo } =
  paramsParsed;
 
const qrCodeLogo = await getQRCodeLogo({ url, logo, hideLogo });
 
return new ImageResponse(
  QRCodeSVG({
    value: url,
    size,
    level,
    fgColor,
    bgColor,
    margin,
    ...(qrCodeLogo
      ? {
          imageSettings: {
            src: qrCodeLogo,
            height: size / 4,
            width: size / 4,
            excavate: true,
          },
        }
      : {}),
    isOGContext: true,
  }),
  {
    width: size,
    height: size,
    headers: CORS_HEADERS,
  },
);

Copyexport const getQRCode: ZodOpenApiOperationObject = {
  operationId: "getQRCode",
  "x-speakeasy-name-override": "get",
  summary: "Retrieve a QR code",
  description: "Retrieve a QR code for a link.",
  requestParams: {
    query: getQRCodeQuerySchema,
  },
  responses: {
    "200": {
      description: "The QR code",
      content: {
        "image/png": {
          schema: z.string(),
        },
      },
    },
    ...openApiErrorResponses,
  },
  tags: ["QR Codes"],
};

Copyexport function OPTIONS() {
  return new Response(null, {
    status: 204,
    headers: CORS_HEADERS,
  });
}

Copyconst getQRCodeLogo = async ({
  url,
  logo,
  hideLogo,
}: {
  url: string;
  logo: string | undefined;
  hideLogo: boolean;
}) => {
  const shortLink = await getShortLinkViaEdge(url.split("?")[0]);

Copy 
  // Not a Dub link
  if (!shortLink) {
    return DUB_QR_LOGO;
  }
 
  const workspace = await getWorkspaceViaEdge({
    workspaceId: shortLink.projectId,
  });
 
  if (workspace?.plan === "free") {
    return DUB_QR_LOGO;
  }
 
  // if hideLogo is set, return null
  if (hideLogo) {
    return null;
  }
 
  // if logo is passed, return it
  if (logo) {
    return logo;
  }
 
  // if it's a Dub owned domain and no  workspace logo is set, use the Dub logo
  if (isDubDomain(shortLink.domain) && !workspace?.logo) {
    return DUB_QR_LOGO;
  }
 
  // if it's a custom domain, check if it has a logo
  const domain = await getDomainViaEdge(shortLink.domain);
 
  // return domain logo if it has one, otherwise fallback to workspace logo, and finally fallback to Dub logo
  return domain?.logo || workspace?.logo || DUB_QR_LOGO;
};

Copyexport function QRCodeDesignFields({
  data,
  setData,
  url,
  logo,
  linkProps,
  qrData,
  onClose,
  logoSection,
}: {
  data: QRCodeDesign;
  setData: Dispatch<SetStateAction<QRCodeDesign>>;
  url?: string;
  logo?: string;
  linkProps: QRLinkProps;
  qrData: ReturnType<typeof getQRData> | null;
  onClose: () => void;
  /** Optional slot rendered left of Dot style (link modal uses this for Logo toggle). */
  logoSection?: React.ReactNode;
}) {

Copyfunction LinkQRModal(
  props: {
    showLinkQRModal: boolean;
    setShowLinkQRModal: Dispatch<SetStateAction<boolean>>;
  } & LinkQRModalProps,
) {
  return (
    <Modal
      showModal={props.showLinkQRModal}
      setShowModal={props.setShowLinkQRModal}
      className="max-w-[500px]"
    >
      <LinkQRModalInner {...props} />
    </Modal>
  );
}
 
function LinkQRModalInner({
  props,
  onSave,
  showLinkQRModal,
  setShowLinkQRModal,
}: {
  showLinkQRModal: boolean;
  setShowLinkQRModal: Dispatch<SetStateAction<boolean>>;
} & LinkQRModalProps) {
  const { id: workspaceId, slug, plan, logo: workspaceLogo } = useWorkspace();
  const { logo: domainLogo } = useDomain({
    slug: props.domain,
    enabled: showLinkQRModal,
  });
 
  const isPro = plan && plan !== "free";
 
  const url = useMemo(
    () =>
      props.key && props.domain
        ? linkConstructor({ key: props.key, domain: props.domain })
        : undefined,
    [props.key, props.domain],
  );
 
  const [dataPersisted, setDataPersisted] = useLocalStorage<QRCodeDesign>(
    `qr-code-design-${workspaceId}`,
    DEFAULT_QR_DESIGN,
  );
 
  const [data, setData] = useState<QRCodeDesign>(dataPersisted);
 

Copyfunction PartnerLinkQRModal(
  props: {
    showLinkQRModal: boolean;
    setShowLinkQRModal: Dispatch<SetStateAction<boolean>>;
  } & PartnerLinkQRModalProps,
) {
  return (
    <Modal
      showModal={props.showLinkQRModal}
      setShowModal={props.setShowLinkQRModal}
      className="max-w-[500px]"
    >
      <PartnerLinkQRModalInner {...props} />
    </Modal>
  );
}
 
function PartnerLinkQRModalInner({
  props,
  onSave,
  setShowLinkQRModal,
}: {
  showLinkQRModal: boolean;
  setShowLinkQRModal: Dispatch<SetStateAction<boolean>>;
} & PartnerLinkQRModalProps) {
  const { programEnrollment } = useProgramEnrollment();
  const { logo } = programEnrollment?.program ?? {};
 
  const url = useMemo(
    () =>
      props.key && props.domain
        ? linkConstructor({ key: props.key, domain: props.domain })
        : undefined,
    [props.key, props.domain],
  );
 
  const [dataPersisted, setDataPersisted] = useLocalStorage<QRCodeDesign>(
    `qr-code-design-program-${programEnrollment?.program?.id}`,
    DEFAULT_QR_DESIGN,
  );
 
  const [data, setData] = useState<QRCodeDesign>(dataPersisted);

Copyexport const DEFAULT_QR_DESIGN: QRCodeDesign = {
  fgColor: "#000000",
  hideLogo: false,
  dotStyle: "square",
  markerCenterStyle: "square",
  markerBorderStyle: "square",
};

Copy    <SegmentedControl
      activeIndex={
        data.dotStyle === "rounded"
          ? 1
          : data.dotStyle === "extra-rounded"
            ? 2
            : 0
      }
      count={3}
    >
      <SegmentTab
        active={!data.dotStyle || data.dotStyle === "square"}
        onClick={() => setData((d) => ({ ...d, dotStyle: "square" }))}
        ariaLabel="Square dots"
      >
        <SquareDotIcon />
      </SegmentTab>
      <SegmentTab
        active={data.dotStyle === "rounded"}
        onClick={() => setData((d) => ({ ...d, dotStyle: "rounded" }))}
        ariaLabel="Rounded dots"
      >
        <RoundedDotIcon />
      </SegmentTab>
      <SegmentTab
        active={data.dotStyle === "extra-rounded"}
        onClick={() =>
          setData((d) => ({ ...d, dotStyle: "extra-rounded" }))
        }
        ariaLabel="Extra-rounded dots"
      >
        <ExtraRoundedDotIcon />
      </SegmentTab>
    </SegmentedControl>
  </div>
</div>
 
{/* Marker center + Marker border */}
<div className="grid grid-cols-2 gap-4">
  <div>
    <div className="flex items-center gap-1.5">
      <label className="text-sm font-medium text-neutral-700">
        Marker center
      </label>
    </div>
    <SegmentedControl
      activeIndex={data.markerCenterStyle === "circle" ? 1 : 0}
      count={2}
    >
      <SegmentTab
        active={
          !data.markerCenterStyle || data.markerCenterStyle === "square"
        }
        onClick={() =>
          setData((d) => ({ ...d, markerCenterStyle: "square" }))
        }
        ariaLabel="Square marker center"
      >
        <MarkerCenterSquareIcon />
      </SegmentTab>
      <SegmentTab
        active={data.markerCenterStyle === "circle"}
        onClick={() =>
          setData((d) => ({ ...d, markerCenterStyle: "circle" }))
        }
        ariaLabel="Circle marker center"
      >
        <MarkerCenterCircleIcon />
      </SegmentTab>
    </SegmentedControl>
  </div>
 
  <div>
    <div className="flex items-center gap-1.5">
      <label className="text-sm font-medium text-neutral-700">
        Marker border
      </label>
    </div>
    <SegmentedControl
      activeIndex={

Copyconst onColorChange = useDebouncedCallback(
  (color: string) => setData((d) => ({ ...d, fgColor: color })),
  500,
);

Copyconst previewKey = `${data.fgColor}-${data.hideLogo}-${data.dotStyle}-${data.markerCenterStyle}-${data.markerBorderStyle}-${data.markerColor ?? ""}`;
 
return (
  <>
    {/* Preview */}
    <div>
      <div className="flex items-center justify-between gap-2">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium text-neutral-700">
            QR Code Preview
          </span>
          <InfoTooltip content="Customize your QR code to fit your brand. [Learn more.](https://dub.co/help/article/custom-qr-codes)" />
        </div>
        {url && qrData && (
          <div className="flex items-center gap-2">
            <DownloadPopover qrData={qrData} linkProps={linkProps}>
              <div>
                <ButtonTooltip tooltipProps={{ content: "Download QR code" }}>
                  <Download className="h-4 w-4 text-neutral-500" />
                </ButtonTooltip>
              </div>
            </DownloadPopover>
            <CopyPopover qrData={qrData} linkProps={linkProps}>
              <div>
                <ButtonTooltip tooltipProps={{ content: "Copy QR code" }}>
                  <Copy className="h-4 w-4 text-neutral-500" />
                </ButtonTooltip>
              </div>
            </CopyPopover>
          </div>
        )}
      </div>
      <div className="relative mt-2 flex h-44 items-center justify-center overflow-hidden rounded-md border border-neutral-300">
        {!isMobile && (
          <ShimmerDots className="opacity-30 [mask-image:radial-gradient(40%_80%,transparent_50%,black)]" />
        )}
        {url && (
          <AnimatePresence mode="wait">
            <motion.div
              key={previewKey}
              initial={{ filter: "blur(2px)", opacity: 0.4 }}
              animate={{ filter: "blur(0px)", opacity: 1 }}
              exit={{ filter: "blur(2px)", opacity: 0.4 }}
              transition={{ duration: 0.1 }}
              className="relative flex size-full items-center justify-center"
            >
              <QRCode
                url={url}
                fgColor={data.fgColor}
                hideLogo={data.hideLogo}
                logo={logo}
                scale={1}
                dotStyle={data.dotStyle}
                markerCenterStyle={data.markerCenterStyle}
                markerBorderStyle={data.markerBorderStyle}
                markerColor={data.markerColor}
              />
            </motion.div>
          </AnimatePresence>
        )}
      </div>

Copyconst isPro = plan && plan !== "free";
 
const url = useMemo(
  () =>
    props.key && props.domain
      ? linkConstructor({ key: props.key, domain: props.domain })
      : undefined,
  [props.key, props.domain],
);
 
const [dataPersisted, setDataPersisted] = useLocalStorage<QRCodeDesign>(
  `qr-code-design-${workspaceId}`,
  DEFAULT_QR_DESIGN,
);
 
const [data, setData] = useState<QRCodeDesign>(dataPersisted);
 
const hideLogo = data.hideLogo && !!isPro;
const logo = !isPro
  ? DUB_QR_LOGO
  : domainLogo || workspaceLogo || DUB_QR_LOGO;

Copy  activeIndex={data.hideLogo && isPro ? 1 : 0}
  count={2}
  disabled={!isPro}
>
  <SegmentTab
    active={!data.hideLogo || !isPro}
    onClick={() => setData((d) => ({ ...d, hideLogo: false }))}
    disabled={!isPro}
  >
    <span className="text-sm">Show</span>
  </SegmentTab>
  <SegmentTab
    active={!!(data.hideLogo && isPro)}
    onClick={() => setData((d) => ({ ...d, hideLogo: true }))}
    disabled={!isPro}
  >
    {!isPro && (
      <Tooltip
        content={
          <TooltipContent
            title="Upgrade to Pro to show or hide your QR code logo."
            cta="Upgrade to Pro"
            href={
              slug ? `/${slug}/upgrade` : "https://dub.co/pricing"
            }
            target="_blank"
          />
        }
      >
        <Crown className="text-content-default mr-1 size-4" />
      </Tooltip>
    )}
    <span className="text-sm">Hide</span>
  </SegmentTab>
</SegmentedControl>