feat(sink): qr code generator (#631)

Co-authored-by: deeola <71495600+deeola@users.noreply.github.com>

packages/kitchen-sink/package.json

@@ -24,6 +24,7 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.11",
     "react-icons": "^4.11.0",
+    "react-qr-code": "^2.0.12",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.15.0",
     "styled-components": "^6.0.7",

packages/kitchen-sink/src/examples/qr-code-generator.tsx

@@ -0,0 +1,38 @@
+import { block } from 'million/react';
+import { useState, useRef } from 'react';
+import QRCode from 'react-qr-code';
+
+const QRCodeGenerator = block(() => {
+  const [data, setData] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  return (
+    <div>
+      <h1>QR Code Generator</h1>
+      <div>
+        <input
+          placeholder="Enter text or URL"
+          style={{ width: '40%' }}
+          ref={inputRef}
+          type="text"
+        />
+        <button
+          style={{ marginLeft: 10 }}
+          onClick={() => {
+            if (inputRef.current) {
+              setData(inputRef.current.value);
+            }
+          }}
+        >
+          Generate
+        </button>
+      </div>
+      {data && (
+        <div className="qr-code-wrapper">
+          <QRCode value={data} />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default QRCodeGenerator;

packages/kitchen-sink/src/style.css

@@ -135,4 +135,12 @@ input[type="range"] {
   }
 }
 
-/*  */
+/*  */
+
+/* QR code styles */
+.qr-code-wrapper {
+  display: inline-flex;
+  background: white;
+  margin-top: 2rem;
+  padding: 1rem;
+}