update website

appleicat · Feb 5, 2024 · 2d58cbb · 2d58cbb
1 parent b8351e8
commit 2d58cbb
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git a/src/pages/_page.jsx b/src/pages/_page.jsx
@@ -0,0 +1,47 @@
+import { useState, useEffect, useRef } from 'react';
+import { motion } from 'framer-motion';
+import QRcode from 'qrcode';
+export default function Page() {
+  const ref = useRef();
+  const [data, setData] = useState('');
+  useEffect(() => {
+    QRcode.toString(
+      data,
+      {
+        type: 'svg',
+        margin: 0,
+        color: { dark: '000000FF', light: '00000000' },
+      },
+      (err, qrc) => {
+        err ? err : (ref.current.innerHTML = qrc);
+        err
+          ? (ref.current.style.backgroundColor = 'red')
+          : (ref.current.style.backgroundColor = 'transparent');
+      }
+    );
+  }, [data]);
+  return (
+    <motion.section
+      animate={{ opacity: [0, 1] }}
+      className="flex justify-center items-center h-full w-full"
+    >
+      <main className="aspect-[1/2] h-full bg-white text-black grid auto-rows-fr">
+        <section
+          ref={ref}
+          style={{ display: data ? 'grid' : 'none' }}
+          className="p-[3vmin]"
+        />
+        <section
+          style={{ display: data ? 'none' : 'grid' }}
+          className="p-[3vmin]"
+        ></section>
+        <section className="p-[3vmin] border-t border-black">
+          <textarea
+            className="outline-none bg-transparent w-full h-full resize-none font-['JetBrains_Mono']"
+            onChange={(e) => setData(e.target.value)}
+          />
+        </section>
+      </main>
+    </motion.section>
+  );
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -0,0 +1,31 @@
+---
+import Page from './_page';
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>qrc</title>
+    <link
+      href="https://api.fontshare.com/v2/css?f[]=satoshi@1&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body
+    class="bg-black text-white h-screen w-screen overflow-hidden font-['Satoshi']"
+  >
+    <Page client:only />
+  </body>
+</html>
+
+<style is:global>
+  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  ::selection {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+</style>