Merge pull request #48 from ixartz/small-improvement2

Small-improvement2

.vscode/settings.json

@@ -37,6 +37,7 @@
   ],
 
   // Enable eslint for all supported languages
+  "eslint.format.enable": true,
   "eslint.validate": [
     "javascript",
     "javascriptreact",

README.md

@@ -85,9 +85,13 @@ Clone this project and use it to create your own SaaS. You can check the live de
 | --- | --- |
 | [![Next.js Boilerplate SaaS Sign Up](public/assets/images/nextjs-boilerplate-saas-sign-up.png)](https://react-saas.com/sign-up) | [![Next.js Boilerplate SaaS Sign In](public/assets/images/nextjs-boilerplate-saas-sign-in.png)](https://react-saas.com/sign-in) |
 
-| Landing Page Dark Mode (Pro Version) | User Dashboard Dark Mode (Pro Version) |
+| Landing Page with Dark Mode (Pro Version) | User Dashboard with Dark Mode (Pro Version) |
 | --- | --- |
-| [![Next.js Boilerplate SaaS Landing Page Dark Mode](public/assets/images/nextjs-boilerplate-saas-landing-page-dark-mode.png)](https://pro-demo.nextjs-boilerplate.com) | [![Next.js Boilerplate SaaS User Dashboard Dark Mode](public/assets/images/nextjs-boilerplate-saas-user-dashboard-dark-mode.png)](https://pro-demo.nextjs-boilerplate.com/dashboard) |
+| [![Next.js Boilerplate SaaS Landing Page Dark Mode](public/assets/images/nextjs-boilerplate-saas-landing-page-dark-mode.png)](https://pro-demo.nextjs-boilerplate.com) | [![Next.js Boilerplate SaaS User Dashboard Dark Mode](public/assets/images/nextjs-boilerplate-saas-user-dashboard-sidebar-dark-mode.png)](https://pro-demo.nextjs-boilerplate.com/dashboard) |
+
+| User Dashboard with Sidebar (Pro Version) |
+| --- |
+| [![Next.js Boilerplate SaaS User Dashboard Sidebar](public/assets/images/nextjs-boilerplate-saas-user-dashboard-sidebar.png)](https://pro-demo.nextjs-boilerplate.com) |
 
 ### Features
 
@@ -486,4 +490,6 @@ See [LICENSE](LICENSE) for more information.
 
 Made with ♥ by [CreativeDesignsGuru](https://creativedesignsguru.com) [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20%40Ixartz)](https://twitter.com/ixartz)
 
+Looking for a custom boilerplate to kick off your project? I'd be glad to discuss how I can help you build one. Feel free to reach out anytime at [email protected]!
+
 [![Sponsor Next JS Boilerplate](https://cdn.buymeacoffee.com/buttons/default-red.png)](https://github.com/sponsors/ixartz)

package.json

@@ -36,6 +36,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@sentry/nextjs": "^8.34.0",

src/app/[locale]/(auth)/dashboard/page.tsx

@@ -1,8 +1,10 @@
+import { GitHubLogoIcon } from '@radix-ui/react-icons';
 import { useTranslations } from 'next-intl';
 
 import { buttonVariants } from '@/components/ui/buttonVariants';
 import { MessageState } from '@/features/dashboard/MessageState';
 import { TitleBar } from '@/features/dashboard/TitleBar';
+import { SponsorLogos } from '@/features/sponsors/SponsorLogos';
 
 const DashboardIndexPage = () => {
   const t = useTranslations('DashboardIndex');
@@ -36,12 +38,19 @@ const DashboardIndexPage = () => {
           ),
         })}
         button={(
-          <a
-            className={buttonVariants({ size: 'lg' })}
-            href="https://nextjs-boilerplate.com/pro-saas-starter-kit"
-          >
-            {t('message_state_button')}
-          </a>
+          <>
+            <a
+              className={buttonVariants({ size: 'lg' })}
+              href="https://github.com/ixartz/SaaS-Boilerplate"
+            >
+              <GitHubLogoIcon className="mr-2 size-5" />
+              {t('message_state_button')}
+            </a>
+
+            <div className="mt-7">
+              <SponsorLogos />
+            </div>
+          </>
         )}
       />
     </>

src/components/ui/separator.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
+
+import { cn } from '@/utils/Helpers';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

src/features/dashboard/DashboardHeader.tsx

@@ -13,6 +13,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Separator } from '@/components/ui/separator';
 import { Logo } from '@/templates/Logo';
 import { getI18nPath } from '@/utils/Helpers';
 
@@ -71,8 +72,8 @@ export const DashboardHeader = (props: {
       </div>
 
       <div>
-        <ul className="flex items-center gap-x-1.5 [&_li:not(:last-child):hover]:opacity-100 [&_li:not(:last-child)]:opacity-60">
-          <li>
+        <ul className="flex items-center gap-x-1.5 [&_li[data-fade]:hover]:opacity-100 [&_li[data-fade]]:opacity-60">
+          <li data-fade>
             <div className="lg:hidden">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -91,10 +92,14 @@ export const DashboardHeader = (props: {
 
           {/* PRO: Dark mode toggle button */}
 
-          <li>
+          <li data-fade>
             <LocaleSwitcher />
           </li>
 
+          <li>
+            <Separator orientation="vertical" className="h-4" />
+          </li>
+
           <li>
             <UserButton
               userProfileMode="navigation"

src/features/landing/CenteredMenu.tsx

@@ -37,7 +37,7 @@ export const CenteredMenu = (props: {
           navClass,
         )}
       >
-        <ul className="flex flex-row items-center gap-x-1.5 text-lg font-medium [&_li:not(:last-child):hover]:opacity-100 [&_li:not(:last-child)]:opacity-60">
+        <ul className="flex flex-row items-center gap-x-1.5 text-lg font-medium [&_li[data-fade]:hover]:opacity-100 [&_li[data-fade]]:opacity-60">
           {props.rightMenu}
         </ul>
       </div>

src/features/landing/LogoCloud.tsx

@@ -4,7 +4,7 @@ export const LogoCloud = (props: { text: string; children: React.ReactNode }) =>
       {props.text}
     </div>
 
-    <div className="mt-6 grid grid-cols-2 place-items-center gap-x-3 gap-y-6 md:grid-cols-4 [&_a:hover]:opacity-100 [&_a]:opacity-60">
+    <div className="mt-6 grid grid-cols-2 place-items-center gap-x-3 gap-y-6 md:grid-cols-4 md:gap-x-20 [&_a:hover]:opacity-100 [&_a]:opacity-60">
       {props.children}
     </div>
   </>

src/features/sponsors/SponsorLogos.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable react-dom/no-unsafe-target-blank */
+import Image from 'next/image';
+
+import { LogoCloud } from '@/features/landing/LogoCloud';
+
+export const SponsorLogos = () => (
+  <LogoCloud text="Sponsored by">
+    <a
+      href="https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate"
+      target="_blank"
+      rel="noopener"
+    >
+      <Image
+        src="/assets/images/clerk-logo-dark.png"
+        alt="Clerk logo dark"
+        className="dark:hidden"
+        width="128"
+        height="37"
+      />
+      <Image
+        src="/assets/images/clerk-logo-white.png"
+        alt="Clerk logo light"
+        className="hidden dark:block"
+        width="128"
+        height="37"
+      />
+    </a>
+
+    <a
+      href="https://l.crowdin.com/next-js"
+      target="_blank"
+      rel="noopener"
+    >
+      <Image
+        src="/assets/images/crowdin-dark.png"
+        alt="Crowdin logo dark"
+        className="dark:hidden"
+        width="128"
+        height="26"
+      />
+      <Image
+        src="/assets/images/crowdin-white.png"
+        alt="Crowdin logo light"
+        className="hidden dark:block"
+        width="128"
+        height="26"
+      />
+    </a>
+
+    <a
+      href="https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
+      target="_blank"
+      rel="noopener"
+    >
+      <Image
+        src="/assets/images/sentry-dark.png"
+        alt="Sentry logo dark"
+        className="dark:hidden"
+        width="128"
+        height="38"
+      />
+      <Image
+        src="/assets/images/sentry-white.png"
+        alt="Sentry logo light"
+        className="hidden dark:block"
+        width="128"
+        height="38"
+      />
+    </a>
+
+    <a
+      href="https://nextjs-boilerplate.com/pro-saas-starter-kit"
+      target="_blank"
+      rel="noopener"
+    >
+      <Image
+        src="/assets/images/nextjs-boilerplate-saas.png"
+        alt="Nextjs SaaS Boilerplate"
+        width="128"
+        height="30"
+      />
+    </a>
+  </LogoCloud>
+);

src/libs/DB.ts

@@ -26,6 +26,7 @@ if (process.env.NEXT_PHASE !== PHASE_PRODUCTION_BUILD && Env.DATABASE_URL) {
     migrationsFolder: path.join(process.cwd(), 'migrations'),
   });
 } else {
+  // Stores the db connection in the global scope to prevent multiple instances due to hot reloading with Next.js
   const global = globalThis as unknown as { client: PGlite; drizzle: PgliteDatabase<typeof schema> };
 
   if (!global.client) {

src/locales/en.json

@@ -102,7 +102,7 @@
     "title_bar_description": "Welcome to your dashboard",
     "message_state_title": "Let's get started",
     "message_state_description": "You can customize this page by editing the file at <code>dashboard/page.tsx</code>",
-    "message_state_button": "Need Stripe Integration? Check out Next.js Boilerplate Pro"
+    "message_state_button": "Star on GitHub"
   },
   "UserProfile": {
     "title_bar": "User Profile",

src/locales/fr.json

@@ -102,7 +102,7 @@
     "title_bar_description": "Bienvenue sur votre tableau de bord",
     "message_state_title": "C'est parti",
     "message_state_description": "Vous pouvez personnaliser cette page en modifiant le fichier dans <code>dashboard/page.tsx</code>",
-    "message_state_button": "Besoin d'une intégration Stripe ? Découvrez Next.js Boilerplate Pro"
+    "message_state_button": "Mettez une étoile sur GitHub"
   },
   "UserProfile": {
     "title_bar": "Profil utilisateur",

src/templates/Navbar.tsx

@@ -18,10 +18,10 @@ export const Navbar = () => {
         rightMenu={(
           <>
             {/* PRO: Dark mode toggle button */}
-            <li>
+            <li data-fade>
               <LocaleSwitcher />
             </li>
-            <li className="ml-1 mr-2.5">
+            <li className="ml-1 mr-2.5" data-fade>
               <Link href="/sign-in">{t('sign_in')}</Link>
             </li>
             <li>