Skip to content

Instantly share code, notes, and snippets.

@fzn0x
Created July 18, 2024 05:13
Show Gist options
  • Save fzn0x/35abadde3ab4465914a4ae0cb65837e4 to your computer and use it in GitHub Desktop.
Save fzn0x/35abadde3ab4465914a4ae0cb65837e4 to your computer and use it in GitHub Desktop.
QrCode with Logo on Center
import { Box, Image } from "@chakra-ui/react";
import * as qrCode from "@zag-js/qr-code";
import { useMachine, normalizeProps } from "@zag-js/react";
import { useId } from "react";
// @ts-ignore-next-line
import YEYLogoChrome from "../../../assets/imgs/yey-logo-chrome-clear.png";
export default function QRCode() {
const [state, send] = useMachine(
qrCode.machine({
id: useId(),
value: "https://github.com/fzn0x",
encoding: { ecc: "H" },
})
);
// Connect to the machine
const api = qrCode.connect(state, send, normalizeProps);
return (
<div {...api.getRootProps()}>
<svg {...api.getFrameProps()}>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop
offset="9.84%"
style={{ stopColor: "#7938c9", stopOpacity: 1 }}
/>
<stop
offset="87.58%"
style={{ stopColor: "#ff00af", stopOpacity: 1 }}
/>
</linearGradient>
</defs>
<path {...api.getPatternProps()} fill="url(#grad1)" />
</svg>
<div {...api.getOverlayProps()}>
<Box bg="white" px={3} py={5} borderRadius="8px">
<Image boxSize="40px" width="auto" src={YEYLogoChrome} alt="" />
</Box>
</div>
</div>
);
}
@fzn0x
Copy link
Author

fzn0x commented Jul 18, 2024

[data-scope="qr-code"][data-part="root"] {
  margin-top: 15px;
  border-radius: 16px;
  padding: 35px;
  background: white;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment