Merge pull request #157 from LuanRoger/new-home

README.md

@@ -29,6 +29,7 @@ To develop a Electron app, you probably will need some UI, test, formatter, styl
 - [Shadcn UI](https://ui.shadcn.com)
 - [Geist](https://vercel.com/font) as default font
 - [i18next](https://www.i18next.com)
+- [TanStack Router](https://tanstack.com/router)
 - [Lucide](https://lucide.dev)
 
 ### Test 🧪
@@ -52,6 +53,7 @@ To develop a Electron app, you probably will need some UI, test, formatter, styl
 - `titleBarStyle`: hidden (Using custom title bar)
 - Geist as default font
 - Some default styles was applied, check the [`styles`](https://github.com/LuanRoger/electron-shadcn/tree/main/src/styles) directory
+- React DevTools are installed by default
 
 > If you don't know some of these libraries or tools, I recommend you to check their documentation to understand how they work and how to use them.
 
@@ -63,6 +65,7 @@ To develop a Electron app, you probably will need some UI, test, formatter, styl
     ├── ./src/assets/
     │   └── ./src/assets/fonts/
     ├── ./src/components/
+    │   ├── ./src/components/template
     │   └── ./src/components/ui/
     ├── ./src/helpers/
     │   └── ./src/helpers/ipc/
@@ -76,6 +79,7 @@ To develop a Electron app, you probably will need some UI, test, formatter, styl
 - `src/`: Main directory
   - `assets/`: Store assets like images, fonts, etc.
   - `components/`: Store UI components
+    - `template/`: Store the all not important components used by the template. It doesn't include the `WindowRegion` or the theme toggler, if you want to start an empty project, you can safely delete this directory.
     - `ui/`: Store Shadcn UI components (this is the default direcotry used by Shadcn UI)
   - `helpers/`: Store IPC related functions to be called in the renderer process
     - `ipc/`: Directory to store IPC context and listener functions

package.json

@@ -67,6 +67,8 @@
     "vite": "^6.0.7"
   },
   "dependencies": {
+    "@icons-pack/react-simple-icons": "^11.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-toggle-group": "^1.1.1",

src/components/template/Footer.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function Footer() {
+  return (
+    <footer className="font-tomorrow inline-flex justify-between text-[0.7rem] uppercase text-muted-foreground">
+      <p>Made by LuanRoger - Based in Brazil 🇧🇷</p>
+      <p>Powered by Electron</p>
+    </footer>
+  );
+}

src/components/template/InitialIcons.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { SiElectron, SiReact, SiVite } from "@icons-pack/react-simple-icons";
+
+export default function InitalIcons() {
+  const iconSize = 48;
+
+  return (
+    <div className="inline-flex gap-2">
+      <SiReact size={iconSize} />
+      <SiVite size={iconSize} />
+      <SiElectron size={iconSize} />
+    </div>
+  );
+}

src/components/template/NavigationMenu.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Link } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import {
+  NavigationMenu as NavigationMenuBase,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  navigationMenuTriggerStyle,
+} from "../ui/navigation-menu";
+
+export default function NavigationMenu() {
+  const { t } = useTranslation();
+
+  return (
+    <NavigationMenuBase className="px-2 font-mono text-muted-foreground">
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <Link to="/">
+            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+              {t("titleHomePage")}
+            </NavigationMenuLink>
+          </Link>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <Link to="/second-page">
+            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+              {t("titleSecondPage")}
+            </NavigationMenuLink>
+          </Link>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenuBase>
+  );
+}

src/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/utils/tailwind";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",