add ninth challenge

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1"

public/challenges.json

@@ -63,6 +63,14 @@
       "image_src": "./thumbnails/random-quote.png",
       "solution_link": "https://devchallenges.io/solution/26204",
       "github_link": "https://github.com/jonathan-eduardo/dev-challenges/tree/random-quote"
+    },
+    {
+      "id": 26298,
+      "title": "QR Code Generator",
+      "slug": "qr-code-generator",
+      "image_src": "./thumbnails/qr-code-generator.png",
+      "solution_link": "https://devchallenges.io/solution/26298",
+      "github_link": "https://github.com/jonathan-eduardo/dev-challenges/tree/qr-code-generator"
     }
   ]
 }

src/challenges/qr-code-generator/helpers.tsx

@@ -0,0 +1,24 @@
+export function svgToPng(svgElement: Element): Promise<Blob | null> {
+  return new Promise((resolve) => {
+    if (!svgElement) return resolve(null)
+
+    const svgData = new XMLSerializer().serializeToString(svgElement)
+    const base64Encoded = btoa(svgData)
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+
+    const svgSize = svgElement.getBoundingClientRect()
+    canvas.width = svgSize.width
+    canvas.height = svgSize.height
+
+    const img = new Image()
+
+    img.onload = () => {
+      ctx?.drawImage(img, 0, 0)
+      canvas.toBlob((blob) => {
+        resolve(blob)
+      }, 'image/png')
+    }
+    img.src = `data:image/svg+xml;base64,${base64Encoded}`
+  })
+}

src/challenges/qr-code-generator/qr-code-generator.module.css

@@ -0,0 +1,147 @@
+.qrCodeBackground {
+  --page-bg: #111729;
+  --search-bg: #030617;
+  --qr-bg: #1e2c51;
+  --action-color: #3662e3;
+  --white: #f2f5f9;
+  --gray: #364153;
+  --default-font: 'Outfit', sans-serif;
+  --default-font-size: 16px;
+  --default-font-weight: 500;
+  --hover-color: #4b72e7;
+
+  background: var(--page-bg);
+  font-family: var(--default-font);
+}
+
+.wrapper {
+  flex-basis: 1280px;
+  height: 100vh;
+  background-image: url('../images/bg-illustration.svg');
+  background-repeat: no-repeat;
+  background-position: 85% 72px;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search {
+  flex-basis: 609px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  margin: 0 16px;
+  margin-top: 240px;
+}
+
+.searchForm {
+  display: flex;
+  justify-content: space-between;
+  background: var(--search-bg);
+  border: 2px solid var(--action-color);
+  border-radius: 20px;
+  padding: 6px;
+  align-items: center;
+  width: 100%;
+  height: 68px;
+}
+
+.input,
+.qrCodeBtn {
+  border: none;
+  background: transparent;
+  font-family: var(--default-font);
+
+  font-size: var(--default-font-size);
+  font-weight: var(--default-font-weight);
+}
+
+.input {
+  outline: none;
+  height: 100%;
+  padding-left: 24px;
+  color: var(--white);
+  flex: 1;
+  min-width: 132px;
+  width: 100%;
+}
+
+.input::placeholder {
+  color: var(--gray);
+}
+
+.qrCodeBtn {
+  background: var(--action-color);
+  color: var(--white);
+  border-radius: 12px;
+  padding: 16px 40px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.qrCodeBtn:hover {
+  background: var(--white);
+  color: var(--action-color);
+}
+
+.qrCode {
+  margin-top: 160px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 64px;
+}
+
+.qrCodeContainer {
+  border-radius: 50%;
+  background: var(--qr-bg);
+  padding: 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 307px;
+}
+
+.qrCodeImage {
+  border-radius: 24px;
+}
+
+.fixedLogo {
+  margin-left: 72px;
+  margin-top: 40px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  gap: 32px;
+}
+
+.btn {
+  cursor: pointer;
+  font-family: 'Outfit', sans-serif;
+  font-size: 16px;
+  line-height: 1rem;
+  border: none;
+  background: var(--action-color);
+  color: var(--white);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 16px 40px;
+  border-radius: 12px;
+}
+
+.btn:hover {
+  background: var(--hover-color);
+}
+
+.btn:active {
+  transform: scale(1.05);
+}