Update example and packages

.env.local.example

@@ -17,8 +17,4 @@ SAFE_BROWSING_API_KEY=""
 
 # ENTER YOUR WEBSITE DOMAIN NAME HERE
 
-NEXT_PUBLIC_BASE_URL="https://website.com/"
-
-# DEFAULT CONFIG
-
-RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false
+NEXT_PUBLIC_BASE_URL="https://website.com/"

atoms/cardsOpenState.js

@@ -1,6 +1,3 @@
-import { atom } from "recoil";
+import { atom } from "jotai";
 
-export const cardsOpenState = atom({
-  key: "cardsOpenState",
-  default: false,
-});
+export const cardsOpenState = atom(false);

atoms/downloadQRCodeState.js

@@ -1,6 +1,3 @@
-import { atom } from "recoil";
+import { atom } from "jotai";
 
-export const downloadQRCodeState = atom({
-  key: "downloadQRCode",
-  default: false,
-});
+export const downloadQRCodeState = atom(false);

atoms/linkSettingsOpenState.js

@@ -1,6 +1,3 @@
-import { atom } from "recoil";
+import { atom } from "jotai";
 
-export const linkSettingsOpenState = atom({
-  key: "linkSettingsOpenState",
-  default: false,
-});
+export const linkSettingsOpenState = atom(false);

atoms/linksState.js

@@ -1,6 +1,3 @@
-import { atom } from "recoil";
+import { atom } from "jotai";
 
-export const linksState = atom({
-  key: "linksState",
-  default: [],
-});
+export const linksState = atom([]);

atoms/navbarAtom.js

@@ -1,6 +1,3 @@
-import { atom } from "recoil";
+import { atom } from "jotai";
 
-export const navbarState = atom({
-  key: "navbarState",
-  default: false,
-});
+export const navbarState = atom(false);

components/Layout.jsx

@@ -3,10 +3,10 @@ import GridLoader from "react-spinners/GridLoader";
 import React, { useEffect, useState } from "react";
 import { navbarState } from "../atoms/navbarAtom";
 import Navbar from "./right-sidebar/Navbar";
-import { useRecoilState } from "recoil";
+import { useAtom } from "jotai";
 
 const Layout = ({ children }) => {
-  const [navbarOpen, setNavbarOpen] = useRecoilState(navbarState);
+  const [navbarOpen, setNavbarOpen] = useAtom(navbarState);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {

components/bottom-sidebar/ScrollingCards.jsx

@@ -5,7 +5,7 @@ import React, { useEffect, useState } from "react";
 import { BsFillXCircleFill } from "react-icons/bs";
 import { HiOutlineQrcode } from "react-icons/hi";
 import { useSwipeable } from "react-swipeable";
-import { useRecoilState } from "recoil";
+import { useAtom } from "jotai";
 import { useTheme } from "next-themes";
 import dynamic from "next/dynamic";
 
@@ -18,8 +18,8 @@ const ScrollingCards = () => {
   const { theme, setTheme } = useTheme();
 
   // !GLOBAL
-  const [cardsOpen, setCardsOpen] = useRecoilState(cardsOpenState);
-  const [links, setLinks] = useRecoilState(linksState);
+  const [cardsOpen, setCardsOpen] = useAtom(cardsOpenState);
+  const [links, setLinks] = useAtom(linksState);
   const [qrCodeIndex, setQRCodeIndex] = useState(null);
 
   const handlers = useSwipeable({

components/home/LinkClipboard.jsx

@@ -1,6 +1,6 @@
 import { downloadQRCodeState } from "../../atoms/downloadQRCodeState";
 import { FiCopy } from "react-icons/fi";
-import { useRecoilState } from "recoil";
+import { useAtom } from "jotai";
 import dynamic from "next/dynamic";
 import React from "react";
 
@@ -9,8 +9,7 @@ const QRCode = dynamic(() => import("../bottom-sidebar/QRCode"), {
 });
 
 const LinkClipboard = ({ copyToClipboard, outputLink }) => {
-  const [downloadQRCode, setDownloadQRCode] =
-    useRecoilState(downloadQRCodeState);
+  const [downloadQRCode, setDownloadQRCode] = useAtom(downloadQRCodeState);
 
   return (
     <>

components/home/LinkOptionsModal.jsx

@@ -1,6 +1,6 @@
 import { AiFillCheckCircle, AiFillCloseCircle } from "react-icons/ai";
 import { downloadQRCodeState } from "../../atoms/downloadQRCodeState";
-import { useRecoilState } from "recoil";
+import { useAtom } from "jotai";
 import { motion } from "framer-motion";
 import { Backdrop } from "../Backdrop";
 import React from "react";
@@ -12,8 +12,7 @@ const LinkOptionsModal = ({
   setLinkSettingsOpen,
   linkSettingsOpen,
 }) => {
-  const [downloadQRCode, setDownloadQRCode] =
-    useRecoilState(downloadQRCodeState);
+  const [downloadQRCode, setDownloadQRCode] = useAtom(downloadQRCodeState);
 
   return (
     <Backdrop
@@ -42,9 +41,7 @@ const LinkOptionsModal = ({
         </h4>
         <div className="mt-2 flex h-full w-full flex-col items-center justify-center space-y-5 p-5">
           <p className="w-52 truncate text-slate-400 dark:text-stone-400">
-            {customSlug.length < 1
-              ? BASE_URL + "example"
-              : BASE_URL}
+            {customSlug.length < 1 ? BASE_URL + "example" : BASE_URL}
             <span className="text-green-500">{customSlug.toLowerCase()}</span>
           </p>
           <input

components/right-sidebar/Navbar.jsx

@@ -4,12 +4,12 @@ import { useSwipeable } from "react-swipeable";
 import { FaGithub } from "react-icons/fa";
 import { SiBuymeacoffee } from "react-icons/si";
 import { ImMail4 } from "react-icons/im";
-import { useRecoilState } from "recoil";
+import { useAtom } from "jotai";
 import React, { useState } from "react";
 import FAQSection from "./FAQSection";
 
 const Navbar = () => {
-  const [navbarOpen, setNavbarOpen] = useRecoilState(navbarState);
+  const [navbarOpen, setNavbarOpen] = useAtom(navbarState);
 
   const handlers = useSwipeable({
     onSwipedRight: (e) => {