From ca1024c34324752bb9766a8484a651787eed3b04 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Thu, 25 Sep 2025 18:06:03 +0800
Subject: [PATCH] Added QR component

---
 src/components/QR/QR.tsx | 19 +++++++++++++++++++
 src/components/index.ts  |  1 +
 2 files changed, 20 insertions(+)
 create mode 100644 src/components/QR/QR.tsx

diff --git a/src/components/QR/QR.tsx b/src/components/QR/QR.tsx
new file mode 100644
index 0000000..ac6593e
--- /dev/null
+++ b/src/components/QR/QR.tsx
@@ -0,0 +1,19 @@
+// @ts-ignore
+import { useQRCode } from '@solidjs-use/integrations/useQRCode'
+
+interface Props {
+  value: string
+  width?: number
+}
+
+export default (props: Props) => {
+  const qrcode = useQRCode(props.value)
+
+  return (
+    <>
+      <section>
+        <img src={qrcode()} alt="QR Code" style={`width: ${props.width || 'auto' }rem`}/>
+      </section>
+    </>
+  )
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 477c6ec..2882f28 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -17,6 +17,7 @@ export { default as Modal } from './Modal/Modal'
 export { default as Table } from './Table/Table'
 export { default as Combobox } from './Combobox/Combobox'
 export { default as File } from './File/File'
+export { default as QR } from './QR/QR'
 
 // export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
 // export { default as OptimizeImage } from './Optimizers/OptimizeImage'