feat/cookie menu

.prettierrc.json

@@ -3,5 +3,5 @@
   "trailingComma": "es5",
   "semi": true,
   "singleQuote": false,
-  "printWidth": 80
+  "printWidth": 100
 }

.stylelintrc.mjs

@@ -30,10 +30,7 @@ export default {
     // Allow Tailwind-based CSS Rules
     "at-rule-no-unknown": [true, { ignoreAtRules: CUSTOM_AT_RULES }],
     // Allow the Global CSS Selector
-    "selector-pseudo-class-no-unknown": [
-      true,
-      { ignorePseudoClasses: ["global"] },
-    ],
+    "selector-pseudo-class-no-unknown": [true, { ignorePseudoClasses: ["global"] }],
     // Enforces the order of the CSS properties to be in alphabetical order
     "order/properties-alphabetical-order": true,
     "no-descending-specificity": null,

app/(private)/_components/sidebar/expand.tsx

@@ -21,14 +21,8 @@ export default function ExpandDashboardSidebar() {
         )}
         onClick={dashboardCtx.toggle}
       >
-        <FaArrowLeft
-          className={cn(dashboardCtx.isExpanded ? "rotate-0" : "rotate-180")}
-        />
-        <span
-          className={cn(
-            dashboardCtx.isExpanded ? "w-auto opacity-100" : "w-0 opacity-0"
-          )}
-        >
+        <FaArrowLeft className={cn(dashboardCtx.isExpanded ? "rotate-0" : "rotate-180")} />
+        <span className={cn(dashboardCtx.isExpanded ? "w-auto opacity-100" : "w-0 opacity-0")}>
           Collapse
         </span>
       </Button>

app/(private)/_components/sidebar/itemWrapper.tsx

@@ -3,11 +3,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-} from "@/components/ui/tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { useDashboardContext } from "@/context/dashboard";
 import { cn } from "@/lib/utils";
 
@@ -17,11 +13,7 @@ type ItemWrapperProps = {
   name: string;
 };
 
-export default function ItemWrapper({
-  children,
-  alert,
-  name,
-}: ItemWrapperProps) {
+export default function ItemWrapper({ children, alert, name }: ItemWrapperProps) {
   const dashboardCtx = useDashboardContext();
   const pathname = usePathname();
   return (
@@ -43,19 +35,12 @@ export default function ItemWrapper({
           asChild
         >
           <Link href={`/dashboard/${name}`}>
-            <div
-              className={cn(
-                "flex items-center",
-                dashboardCtx.isExpanded ? "gap-3" : "gap-0"
-              )}
-            >
+            <div className={cn("flex items-center", dashboardCtx.isExpanded ? "gap-3" : "gap-0")}>
               {children}{" "}
               <span
                 className={cn(
                   "capitalize",
-                  dashboardCtx.isExpanded
-                    ? "w-[100%] opacity-100"
-                    : "w-[0%] opacity-0"
+                  dashboardCtx.isExpanded ? "w-[100%] opacity-100" : "w-[0%] opacity-0"
                 )}
               >
                 {name}
@@ -88,18 +73,13 @@ export default function ItemWrapper({
             >
               <Link href={`/dashboard/${name}`}>
                 <div
-                  className={cn(
-                    "flex items-center",
-                    dashboardCtx.isExpanded ? "gap-3" : "gap-0"
-                  )}
+                  className={cn("flex items-center", dashboardCtx.isExpanded ? "gap-3" : "gap-0")}
                 >
                   {children}
                   <span
                     className={cn(
                       "capitalize",
-                      dashboardCtx.isExpanded
-                        ? "w-[100%] opacity-100"
-                        : "w-[0%] opacity-0"
+                      dashboardCtx.isExpanded ? "w-[100%] opacity-100" : "w-[0%] opacity-0"
                     )}
                   >
                     {name}

app/(private)/_components/sidebar/wrapper.tsx

@@ -2,11 +2,7 @@
 import { useDashboardContext } from "@/context/dashboard";
 import { cn } from "@/lib/utils";
 
-export default function SidebarWrapper({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function SidebarWrapper({ children }: { children: React.ReactNode }) {
   const dashboardCtx = useDashboardContext();
   return (
     <aside

app/(private)/dashboard/layout.tsx

@@ -3,11 +3,7 @@ import Sidebar from "@/app/(private)/_components/sidebar";
 import CookieBanner from "@/components/cookies";
 import { useDashboardContext } from "@/context/dashboard";
 import { cn } from "@/lib/utils";
-export default function DashboardLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   const dashboardCtx = useDashboardContext();
   return (
     <>

app/(private)/layout.tsx

@@ -1,11 +1,7 @@
 import { TooltipProvider } from "@/components/ui/tooltip";
 import DashboardContextProvider from "@/context/dashboard";
 
-export default function PrivateLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function PrivateLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <TooltipProvider>

app/(public)/[...not-found]/page.tsx

@@ -25,10 +25,8 @@ export default async function NotFound() {
           <Logo className="mb-12 h-[8rem] w-[8rem]" length={128} />
           <span className="mb-2">404</span>
           <h1 className="mb-6">
-            <span className="special">Page</span>{" "}
-            <span className="special">could</span>{" "}
-            <span className="special">not</span>{" "}
-            <span className="special">be</span>{" "}
+            <span className="special">Page</span> <span className="special">could</span>{" "}
+            <span className="special">not</span> <span className="special">be</span>{" "}
             <span className="special">found</span>
           </h1>
           <p>This page does not exist. Try starting again from the homepage.</p>

app/(public)/_components/hero/index.tsx

@@ -25,10 +25,8 @@ export default function Hero() {
         </Link>
         <div className="z-[5] mb-12 space-y-2">
           <h1 className="mb-4 text-center">
-            <span className="special">Stop</span>{" "}
-            <span className="special">writing</span>{" "}
-            <span className="special">boilerplate</span>{" "}
-            <span className="special">code.</span>
+            <span className="special">Stop</span> <span className="special">writing</span>{" "}
+            <span className="special">boilerplate</span> <span className="special">code.</span>
           </h1>
           <p className="mx-auto max-w-[700px] text-center text-foreground md:text-xl">
             This is a Next.js project template powered by{" "}
@@ -68,16 +66,8 @@ export default function Hero() {
                 colorInterpolationFilters="sRGB"
               >
                 <feFlood floodOpacity="0" result="BackgroundImageFix" />
-                <feBlend
-                  mode="normal"
-                  in="SourceGraphic"
-                  in2="BackgroundImageFix"
-                  result="shape"
-                />
-                <feGaussianBlur
-                  stdDeviation="52.4"
-                  result="effect1_foregroundBlur_1276_1297"
-                />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="52.4" result="effect1_foregroundBlur_1276_1297" />
               </filter>
               <linearGradient
                 id="paint0_linear_1276_1297"
@@ -132,16 +122,8 @@ export default function Hero() {
                 colorInterpolationFilters="sRGB"
               >
                 <feFlood floodOpacity="0" result="BackgroundImageFix" />
-                <feBlend
-                  mode="normal"
-                  in="SourceGraphic"
-                  in2="BackgroundImageFix"
-                  result="shape"
-                />
-                <feGaussianBlur
-                  stdDeviation="52.4"
-                  result="effect1_foregroundBlur_1276_1295"
-                />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="52.4" result="effect1_foregroundBlur_1276_1295" />
               </filter>
               <linearGradient
                 id="paint0_linear_1276_1295"

app/(public)/layout.tsx

@@ -2,11 +2,7 @@ import CookieBanner from "@/components/cookies";
 import Footer from "@/components/footer";
 import Header from "@/components/header";
 
-export default function PublicLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function PublicLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Header />

app/(public)/legal/privacy-policy/page.tsx

@@ -8,77 +8,73 @@ export default function PrivacyPolicy() {
           Privacy Policy
         </h1>
         <p className="mb-[3rem] max-w-[60ch] text-[1.125rem] leading-[1.4] m:text-[1.25rem]">
-          rikhall.proj (below called &quot;We&quot; or &quot;Us&quot;) is
-          committed to protecting your data integrity. This privacy policy
-          describes how we collect, use, and protect your personal data when you
-          use our website.
+          rikhall.proj (below called &quot;We&quot; or &quot;Us&quot;) is committed to protecting
+          your data integrity. This privacy policy describes how we collect, use, and protect your
+          personal data when you use our website.
         </p>
         <h2 className="mb-[1.5rem] text-[1.5rem] font-bold leading-[1.3] m:text-[2.5rem]">
           1. Collected data
         </h2>
         <p className="mb-[3rem] max-w-[60ch] text-[1.125rem] leading-[1.4] m:text-[1.25rem]">
-          We currently only store data related to you logging in and out of this
-          website, meaning passwords (if any), and emails. We do not store any
-          more data unless you freely give that data to us with your consent.
+          We currently only store data related to you logging in and out of this website, meaning
+          passwords (if any), and emails. We do not store any more data unless you freely give that
+          data to us with your consent.
         </p>
         <h2 className="mb-[1.5rem] text-[1.5rem] font-bold leading-[1.3] m:text-[2.5rem]">
           2. Usage of data
         </h2>
         <p className="mb-[3rem] max-w-[60ch] text-[1.125rem] leading-[1.4] m:text-[1.25rem]">
-          The data we collect would be for the sake of making the website
-          function. We currently do not store any other kinds of data that are
-          not strictly for the sake of functionality.
+          The data we collect would be for the sake of making the website function. We currently do
+          not store any other kinds of data that are not strictly for the sake of functionality.
         </p>
         <h2 className="mb-[1.5rem] text-[1.5rem] font-bold leading-[1.3] m:text-[2.5rem]">
           3. Sharing of data
         </h2>
         <p className="mb-[3rem] max-w-[60ch] text-[1.125rem] leading-[1.4] m:text-[1.25rem]">
-          We do not share your personal information with third parties without
-          your consent, unless required by law.
+          We do not share your personal information with third parties without your consent, unless
+          required by law.
         </p>
         <h2 className="mb-[1.5rem] text-[1.5rem] font-bold leading-[1.3] m:text-[2.5rem]">
           4. Storage of data
         </h2>
         <p className="mb-[3rem] max-w-[60ch] text-[1.125rem] leading-[1.4] m:text-[1.25rem]">
-          We store your personal data securely and will erase the data when they
-          are either no longer necessary for the original intent of the
-          collection. If you request your data to be deleted, we will do so.
+          We store your personal data securely and will erase the data when they are either no
+          longer necessary for the original intent of the collection. If you request your data to be
+          deleted, we will do so.
         </p>
         <h2 className="mb-[1.5rem] text-[1.5rem] font-bold leading-[1.3] m:text-[2.5rem]">
           5. Cookies
         </h2>
         <p className="mb-[3rem] max-w-[60ch] text-[1.125rem] leading-[1.4] m:text-[1.25rem]">
-          We use cookies on this website to improve your user experience and
-          make it function. Some of these cookies are strictly necessary. This
-          includes cookies for authentication. We allow you to withdraw consent
-          from all non-essential cookies at any time in the footer section of
-          this website. You can press &quot;Cookie Settings&quot; to learn more.
+          We use cookies on this website to improve your user experience and make it function. Some
+          of these cookies are strictly necessary. This includes cookies for authentication. We
+          allow you to withdraw consent from all non-essential cookies at any time in the footer
+          section of this website. You can press &quot;Cookie Settings&quot; to learn more.
           <br />
           <br />
-          Another option is that you configure your browser to block said
-          cookies or remove them, if you want that.
+          Another option is that you configure your browser to block said cookies or remove them, if
+          you want that.
         </p>
         <h2 className="mb-[1.5rem] text-[1.5rem] font-bold leading-[1.3] m:text-[2.5rem]">
           6. Your rights to your data
         </h2>
         <p className="mb-[3rem] max-w-[60ch] text-[1.125rem] leading-[1.4] m:text-[1.25rem]">
-          You have the right to request your data or to correct parts of it or
-          its entirety. You have the right to recall your consent at any time.
+          You have the right to request your data or to correct parts of it or its entirety. You
+          have the right to recall your consent at any time.
         </p>
         <h2 className="mb-[1.5rem] text-[1.5rem] font-bold leading-[1.3] m:text-[2.5rem]">
           7. Changes to our privacy policy
         </h2>
         <p className="mb-[3rem] max-w-[60ch] text-[1.125rem] leading-[1.4] m:text-[1.25rem]">
-          This Privacy Policy will change at certain points in time in the
-          future. These changes will be published on our website.
+          This Privacy Policy will change at certain points in time in the future. These changes
+          will be published on our website.
         </p>
         <h2 className="mb-[1.5rem] text-[1.5rem] font-bold leading-[1.3] m:text-[2.5rem]">
           8. Contact us
         </h2>
         <p className="mb-[3rem] max-w-[60ch] text-[1.125rem] leading-[1.4] m:text-[1.25rem]">
-          If you have any questions regarding the privacy policy or how your
-          data is treated, please contact us at [email protected] <br />{" "}
-          <br />
+          If you have any questions regarding the privacy policy or how your data is treated, please
+          contact us at [email protected] <br /> <br />
           Last changed: 2024-04-29
         </p>
       </Wrapper>

app/(public)/page.tsx

@@ -44,8 +44,7 @@ export const metadata: Metadata = {
   },
   openGraph: {
     title: "NextJS Template - rikhall.proj",
-    description:
-      "This is a Next.JS template designed and made by Rikard Hallberg.",
+    description: "This is a Next.JS template designed and made by Rikard Hallberg.",
     url: env.NEXT_PUBLIC_BASE_URL,
     images: "/static/og.png",
     siteName: "RikardTemplate",
@@ -54,8 +53,7 @@ export const metadata: Metadata = {
   },
   twitter: {
     title: "NextJS Template - rikhall.proj",
-    description:
-      "This is a Next.JS template designed and made by Rikard Hallberg.",
+    description: "This is a Next.JS template designed and made by Rikard Hallberg.",
     images: "/static/og.png",
     card: "summary_large_image",
     creator: "@rikhall_",

app/(public)/sign-in/wrapper.tsx

@@ -10,13 +10,7 @@ export default function Wrapper({ children }: { children: React.ReactNode }) {
           "relative overflow-x-hidden overflow-y-visible"
         )}
       >
-        <div
-          className={cn(
-            "min-h-[40rem] max-w-[30rem] px-6",
-            "mx-auto",
-            "grid gap-6 py-[7rem]"
-          )}
-        >
+        <div className={cn("min-h-[40rem] max-w-[30rem] px-6", "mx-auto", "grid gap-6 py-[7rem]")}>
           {children}
         </div>
       </section>

app/(public)/sign-up/page.tsx

@@ -108,10 +108,7 @@ export default function Component() {
         >
           Sign up
         </Button>
-        <Button
-          className="h-12 w-full text-xl font-bold text-foreground"
-          variant="outline"
-        >
+        <Button className="h-12 w-full text-xl font-bold text-foreground" variant="outline">
           Sign up with Google
         </Button>
       </form>

app/(public)/sign-up/wrapper.tsx

@@ -10,13 +10,7 @@ export default function Wrapper({ children }: { children: React.ReactNode }) {
           "relative overflow-x-hidden overflow-y-visible"
         )}
       >
-        <div
-          className={cn(
-            "min-h-[40rem] max-w-[30rem] px-6",
-            "mx-auto",
-            "grid gap-6 py-[7rem]"
-          )}
-        >
+        <div className={cn("min-h-[40rem] max-w-[30rem] px-6", "mx-auto", "grid gap-6 py-[7rem]")}>
           {children}
         </div>
       </section>

app/layout.tsx

@@ -42,9 +42,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${PLUS_JAKARTA_SANS.variable} ${ATKINSON_HYPERLEGIBLE.variable}`}
-      >
+      <body className={`${PLUS_JAKARTA_SANS.variable} ${ATKINSON_HYPERLEGIBLE.variable}`}>
         <Providers>{children}</Providers>
         {VERCEL_ENV && (
           <>