Update all dependencies and fix code

NayamAmarshe · Feb 7, 2024 · a7cbeb9 · a7cbeb9
1 parent c44bab1
commit a7cbeb9
Show file tree

Hide file tree

Showing 9 changed files with 6,090 additions and 2,856 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,3 @@
 {
-  "sortingMethod": "lineLength",
-  "pluginSearchDirs": ["./node_modules"],
-  "plugins": ["./node_modules/prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/components/bottom-sidebar/Card.jsx b/components/bottom-sidebar/Card.jsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { HiOutlineQrcode } from "react-icons/hi";
+import { colorsList, shadowList } from "../../utils/bgColors";
+import { useTheme } from "next-themes";
+import QRCode from "./QRCode";
+import { RiCloseFill } from "react-icons/ri";
+
+const Card = ({ link, linkIndex, qrCodeIndex, setQRCodeIndex }) => {
+  const { theme, setTheme } = useTheme();
+  const color = Math.floor(Math.random() * colorsList.length);
+
+  return (
+    <div
+      key={linkIndex}
+      className={`animate mx-auto my-5 flex max-w-md flex-col items-center justify-between gap-5 rounded-xl bg-opacity-40 p-5 shadow-lg hover:bg-cyan-100/40 hover:shadow-cyan-200 dark:hover:bg-stone-600 sm:flex-row ${
+        theme === "light" && colorsList[color]
+      } ${theme === "dark" && "bg-stone-700/40"} ${
+        theme === "light" && shadowList[color]
+      } ${theme === "dark" && "shadow-none"} `}
+    >
+      <div className="flex w-full flex-col">
+        <div className="flex flex-row items-center gap-4">
+          <a
+            target="_blank"
+            rel="noreferrer"
+            className="w-full truncate text-slate-700 dark:text-stone-200"
+            href={typeof link === "string" ? link : link.link}
+            id="no-swipe"
+          >
+            {typeof link === "string" ? link : link.link}
+          </a>
+          <button
+            className="animate rounded-md bg-white/20 p-1 text-2xl text-slate-700 dark:text-stone-200"
+            type="button"
+            onClick={() => {
+              if (qrCodeIndex === null) {
+                setQRCodeIndex(linkIndex);
+              } else {
+                setQRCodeIndex(null);
+              }
+            }}
+          >
+            {qrCodeIndex === linkIndex ? <RiCloseFill /> : <HiOutlineQrcode />}
+          </button>
+        </div>
+        {link?.password?.length > 0 ? (
+          <p
+            className="break-all	text-black/50 dark:text-stone-500"
+            id="no-swipe"
+          >
+            Password: <span className="select-all">{link?.password}</span>
+          </p>
+        ) : null}
+        {qrCodeIndex === linkIndex && (
+          <QRCode qrCodeLink={typeof link === "string" ? link : link.link} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/components/bottom-sidebar/ScrollingCards.jsx b/components/bottom-sidebar/ScrollingCards.jsx
@@ -8,6 +8,7 @@ import { useSwipeable } from "react-swipeable";
 import { useAtom } from "jotai";
 import { useTheme } from "next-themes";
 import dynamic from "next/dynamic";
+import Card from "./Card";
 
 const QRCode = dynamic(() => import("./QRCode"), {
   ssr: false,
@@ -49,7 +50,7 @@ const ScrollingCards = () => {
       id="parent"
     >
       <button
-        className="animate close-button absolute top-5 right-5 z-30 bg-transparent text-xl md:text-3xl"
+        className="animate close-button absolute right-5 top-5 z-30 bg-transparent text-xl md:text-3xl"
         onClick={() => {
           setCardsOpen(!cardsOpen);
         }}
@@ -65,54 +66,14 @@ const ScrollingCards = () => {
           rounded-xl p-2 pb-10 text-center sm:w-auto"
         >
           {links.map((link, linkIndex) => {
-            let color = Math.floor(Math.random() * colorsList.length);
             return (
-              <div
+              <Card
                 key={linkIndex}
-                className={`animate mx-auto my-5 flex max-w-md flex-col items-center justify-between gap-5 rounded-xl bg-opacity-40 p-5 shadow-lg hover:bg-cyan-100/40 hover:shadow-cyan-200 dark:hover:bg-stone-600 sm:flex-row ${
-                  theme === "light" && colorsList[color]
-                } ${theme === "dark" && "bg-stone-700/40"} ${
-                  theme === "light" && shadowList[color]
-                } ${theme === "dark" && "shadow-none"} `}
-              >
-                <div className="flex w-full flex-col">
-                  <a
-                    target="_blank"
-                    rel="noreferrer"
-                    className="w-full truncate text-slate-700 dark:text-stone-200"
-                    href={typeof link === "string" ? link : link.link}
-                    id="no-swipe"
-                  >
-                    {typeof link === "string" ? link : link.link}
-                  </a>
-                  {link?.password?.length > 0 ? (
-                    <p
-                      className="break-all	text-black/50 dark:text-stone-500"
-                      id="no-swipe"
-                    >
-                      Password:{" "}
-                      <span className="select-all">{link?.password}</span>
-                    </p>
-                  ) : null}
-                  {qrCodeIndex === linkIndex && (
-                    <QRCode
-                      qrCodeLink={typeof link === "string" ? link : link.link}
-                    />
-                  )}
-                </div>
-                <button
-                  type="button"
-                  onClick={() => {
-                    if (qrCodeIndex === null) {
-                      setQRCodeIndex(linkIndex);
-                    } else {
-                      setQRCodeIndex(null);
-                    }
-                  }}
-                >
-                  <HiOutlineQrcode />
-                </button>
-              </div>
+                link={link}
+                linkIndex={linkIndex}
+                qrCodeIndex={qrCodeIndex}
+                setQRCodeIndex={setQRCodeIndex}
+              />
             );
           })}
         </div>

diff --git a/components/home/MainLogo.jsx b/components/home/MainLogo.jsx
@@ -3,9 +3,9 @@ import Link from "next/link";
 
 const MainLogo = () => {
   return (
-    <Link href="/" passHref>
+    <Link href="/" passHref legacyBehavior>
       <a className="flex w-full flex-col flex-wrap px-4 md:items-center">
-        <h1 className="flex flex-wrap items-center pb-5 text-center text-6xl font-bold text-slate-400 dark:text-stone-400 md:justify-center xs:justify-center xs:text-8xl">
+        <h1 className="flex flex-wrap items-center pb-5 text-center text-6xl font-bold text-slate-400 dark:text-stone-400 xs:justify-center xs:text-8xl md:justify-center">
           Mag
           <div className="relative h-16 w-16 xs:h-24 xs:w-24">
             <Image layout="fill" src="/fire.png" alt="MagLit Logo" priority />

diff --git a/components/right-sidebar/FAQSection.jsx b/components/right-sidebar/FAQSection.jsx
@@ -49,7 +49,7 @@ const FAQSection = () => {
               Pashword
             </h5>
             <p className="dark:text-stone-300">
-              Generate passwords that you don't need to remember and cannot ever
+              Generate passwords that you don&apos;t need to remember and cannot ever
               forget
             </p>
           </div>

diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,3 @@
 module.exports = {
-  reactStrictMode: true,
-  experimental: {
-    outputStandalone: true,
-  },
-};
+  output: 'standalone',
+}