create-lumen 1.1.3 → 1.2.0-beta.1

package/templates/conditional/icons/huge/component-based/tailwind/src/pages/Home/Home.tsx

@@ -0,0 +1,20 @@
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Sun01Icon, Moon01Icon, Github01Icon } from "@hugeicons/core-free-icons";
+import { Button } from "@/components/common";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <HugeiconsIcon icon={Sun01Icon} className="w-8 h-8 text-yellow-500" />
+        <HugeiconsIcon icon={Moon01Icon} className="w-8 h-8 text-blue-500" />
+        <HugeiconsIcon icon={Github01Icon} className="w-8 h-8 text-gray-800" />
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/huge/feature-based/bootstrap/src/features/home/pages/HomePage.jsx

@@ -0,0 +1,20 @@
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Sun01Icon, Moon01Icon, Github01Icon } from "@hugeicons/core-free-icons";
+import { Button } from "@/shared/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="d-flex justify-content-center gap-3 mb-4">
+        <HugeiconsIcon icon={Sun01Icon} style={{ width: 32, height: 32 }} className="text-warning" />
+        <HugeiconsIcon icon={Moon01Icon} style={{ width: 32, height: 32 }} className="text-primary" />
+        <HugeiconsIcon icon={Github01Icon} style={{ width: 32, height: 32 }} className="text-dark" />
+      </div>
+      <h1 className="h1 fw-bold text-dark mb-4">Welcome to Lumen</h1>
+      <p className="text-muted mb-5">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/huge/feature-based/bootstrap/src/features/home/pages/HomePage.tsx

@@ -0,0 +1,20 @@
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Sun01Icon, Moon01Icon, Github01Icon } from "@hugeicons/core-free-icons";
+import { Button } from "@/shared/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="d-flex justify-content-center gap-3 mb-4">
+        <HugeiconsIcon icon={Sun01Icon} style={{ width: 32, height: 32 }} className="text-warning" />
+        <HugeiconsIcon icon={Moon01Icon} style={{ width: 32, height: 32 }} className="text-primary" />
+        <HugeiconsIcon icon={Github01Icon} style={{ width: 32, height: 32 }} className="text-dark" />
+      </div>
+      <h1 className="h1 fw-bold text-dark mb-4">Welcome to Lumen</h1>
+      <p className="text-muted mb-5">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/huge/feature-based/src/features/home/pages/HomePage.jsx

@@ -1,20 +1,36 @@
-import React from "react";
-import { Sun, Moon, Github } from "@hugeicons/react";
-import { Button } from "@/components/ui";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Sun01Icon, Moon01Icon, Github01Icon } from "@hugeicons/core-free-icons";
+import { Button } from "@/shared/components/ui";
 
 export function HomePage() {
   return (
-    <div className="text-center">
-      <div className="flex justify-center gap-4 mb-6">
-        <Sun className="w-8 h-8 text-yellow-500" />
-        <Moon className="w-8 h-8 text-blue-500" />
-        <Github className="w-8 h-8 text-gray-800" />
+    <div style={{ textAlign: "center" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          gap: "1rem",
+          marginBottom: "1.5rem",
+        }}
+      >
+        <HugeiconsIcon icon={Sun01Icon} style={{ width: 32, height: 32, color: "#eab308" }} />
+        <HugeiconsIcon icon={Moon01Icon} style={{ width: 32, height: 32, color: "#3b82f6" }} />
+        <HugeiconsIcon icon={Github01Icon} style={{ width: 32, height: 32, color: "#1f2937" }} />
       </div>
-      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
-      <p className="text-gray-600 mb-8">
+      <h1
+        style={{
+          fontSize: "2.25rem",
+          fontWeight: 700,
+          color: "#111827",
+          marginBottom: "1rem",
+        }}
+      >
+        Welcome to Lumen
+      </h1>
+      <p style={{ color: "#4b5563", marginBottom: "2rem" }}>
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>
     </div>
   );
-}
+}

package/templates/conditional/icons/huge/feature-based/src/features/home/pages/HomePage.tsx

@@ -1,20 +1,36 @@
-import React from "react";
-import { Sun, Moon, Github } from "@hugeicons/react";
-import { Button } from "@/components/ui";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Sun01Icon, Moon01Icon, Github01Icon } from "@hugeicons/core-free-icons";
+import { Button } from "@/shared/components/ui";
 
 export function HomePage() {
   return (
-    <div className="text-center">
-      <div className="flex justify-center gap-4 mb-6">
-        <Sun className="w-8 h-8 text-yellow-500" />
-        <Moon className="w-8 h-8 text-blue-500" />
-        <Github className="w-8 h-8 text-gray-800" />
+    <div style={{ textAlign: "center" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          gap: "1rem",
+          marginBottom: "1.5rem",
+        }}
+      >
+        <HugeiconsIcon icon={Sun01Icon} style={{ width: 32, height: 32, color: "#eab308" }} />
+        <HugeiconsIcon icon={Moon01Icon} style={{ width: 32, height: 32, color: "#3b82f6" }} />
+        <HugeiconsIcon icon={Github01Icon} style={{ width: 32, height: 32, color: "#1f2937" }} />
       </div>
-      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
-      <p className="text-gray-600 mb-8">
+      <h1
+        style={{
+          fontSize: "2.25rem",
+          fontWeight: 700,
+          color: "#111827",
+          marginBottom: "1rem",
+        }}
+      >
+        Welcome to Lumen
+      </h1>
+      <p style={{ color: "#4b5563", marginBottom: "2rem" }}>
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>
     </div>
   );
-}
+}

package/templates/conditional/icons/huge/feature-based/tailwind/src/features/home/pages/HomePage.jsx

@@ -0,0 +1,20 @@
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Sun01Icon, Moon01Icon, Github01Icon } from "@hugeicons/core-free-icons";
+import { Button } from "@/shared/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <HugeiconsIcon icon={Sun01Icon} className="w-8 h-8 text-yellow-500" />
+        <HugeiconsIcon icon={Moon01Icon} className="w-8 h-8 text-blue-500" />
+        <HugeiconsIcon icon={Github01Icon} className="w-8 h-8 text-gray-800" />
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/huge/feature-based/tailwind/src/features/home/pages/HomePage.tsx

@@ -0,0 +1,20 @@
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Sun01Icon, Moon01Icon, Github01Icon } from "@hugeicons/core-free-icons";
+import { Button } from "@/shared/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <HugeiconsIcon icon={Sun01Icon} className="w-8 h-8 text-yellow-500" />
+        <HugeiconsIcon icon={Moon01Icon} className="w-8 h-8 text-blue-500" />
+        <HugeiconsIcon icon={Github01Icon} className="w-8 h-8 text-gray-800" />
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/lucide/component-based/bootstrap/src/pages/Home/Home.jsx

@@ -0,0 +1,19 @@
+import { Sun, Moon, GitBranch } from "lucide-react";
+import { Button } from "@/components/common";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="d-flex justify-content-center gap-3 mb-4">
+        <Sun size={32} className="text-warning" />
+        <Moon size={32} className="text-primary" />
+        <GitBranch size={32} className="text-dark" />
+      </div>
+      <h1 className="h1 fw-bold text-dark mb-4">Welcome to Lumen</h1>
+      <p className="text-muted mb-5">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/lucide/component-based/bootstrap/src/pages/Home/Home.tsx

@@ -0,0 +1,19 @@
+import { Sun, Moon, GitBranch } from "lucide-react";
+import { Button } from "@/components/common";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="d-flex justify-content-center gap-3 mb-4">
+        <Sun size={32} className="text-warning" />
+        <Moon size={32} className="text-primary" />
+        <GitBranch size={32} className="text-dark" />
+      </div>
+      <h1 className="h1 fw-bold text-dark mb-4">Welcome to Lumen</h1>
+      <p className="text-muted mb-5">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/lucide/component-based/src/pages/Home/Home.jsx

@@ -1,20 +1,35 @@
-import React from "react";
-import { Sun, Moon, Github } from "lucide-react";
+import { Sun, Moon, GitBranch } from "lucide-react";
 import { Button } from "@/components/common";
 
 export function HomePage() {
   return (
-    <div className="text-center">
-      <div className="flex justify-center gap-4 mb-6">
-        <Sun className="w-8 h-8 text-yellow-500" />
-        <Moon className="w-8 h-8 text-blue-500" />
-        <Github className="w-8 h-8 text-gray-800" />
+    <div style={{ textAlign: "center" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          gap: "1rem",
+          marginBottom: "1.5rem",
+        }}
+      >
+        <Sun size={32} color="#eab308" />
+        <Moon size={32} color="#3b82f6" />
+        <GitBranch size={32} color="#1f2937" />
       </div>
-      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
-      <p className="text-gray-600 mb-8">
+      <h1
+        style={{
+          fontSize: "2.25rem",
+          fontWeight: 700,
+          color: "#111827",
+          marginBottom: "1rem",
+        }}
+      >
+        Welcome to Lumen
+      </h1>
+      <p style={{ color: "#4b5563", marginBottom: "2rem" }}>
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>
     </div>
   );
-}
+}

package/templates/conditional/icons/lucide/component-based/src/pages/Home/Home.tsx

@@ -1,20 +1,35 @@
-import React from "react";
-import { Sun, Moon, Github } from "lucide-react";
+import { Sun, Moon, GitBranch } from "lucide-react";
 import { Button } from "@/components/common";
 
 export function HomePage() {
   return (
-    <div className="text-center">
-      <div className="flex justify-center gap-4 mb-6">
-        <Sun className="w-8 h-8 text-yellow-500" />
-        <Moon className="w-8 h-8 text-blue-500" />
-        <Github className="w-8 h-8 text-gray-800" />
+    <div style={{ textAlign: "center" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          gap: "1rem",
+          marginBottom: "1.5rem",
+        }}
+      >
+        <Sun size={32} color="#eab308" />
+        <Moon size={32} color="#3b82f6" />
+        <GitBranch size={32} color="#1f2937" />
       </div>
-      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
-      <p className="text-gray-600 mb-8">
+      <h1
+        style={{
+          fontSize: "2.25rem",
+          fontWeight: 700,
+          color: "#111827",
+          marginBottom: "1rem",
+        }}
+      >
+        Welcome to Lumen
+      </h1>
+      <p style={{ color: "#4b5563", marginBottom: "2rem" }}>
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>
     </div>
   );
-}
+}

package/templates/conditional/icons/lucide/component-based/tailwind/src/pages/Home/Home.jsx

@@ -0,0 +1,19 @@
+import { Sun, Moon, GitBranch } from "lucide-react";
+import { Button } from "@/components/common";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <Sun className="w-8 h-8 text-yellow-500" />
+        <Moon className="w-8 h-8 text-blue-500" />
+        <GitBranch className="w-8 h-8 text-gray-800" />
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/lucide/component-based/tailwind/src/pages/Home/Home.tsx

@@ -0,0 +1,19 @@
+import { Sun, Moon, GitBranch } from "lucide-react";
+import { Button } from "@/components/common";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <Sun className="w-8 h-8 text-yellow-500" />
+        <Moon className="w-8 h-8 text-blue-500" />
+        <GitBranch className="w-8 h-8 text-gray-800" />
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/lucide/feature-based/bootstrap/src/features/home/pages/HomePage.jsx

@@ -0,0 +1,19 @@
+import { Sun, Moon, GitBranch } from "lucide-react";
+import { Button } from "@/shared/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="d-flex justify-content-center gap-3 mb-4">
+        <Sun size={32} className="text-warning" />
+        <Moon size={32} className="text-primary" />
+        <GitBranch size={32} className="text-dark" />
+      </div>
+      <h1 className="h1 fw-bold text-dark mb-4">Welcome to Lumen</h1>
+      <p className="text-muted mb-5">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/lucide/feature-based/bootstrap/src/features/home/pages/HomePage.tsx

@@ -0,0 +1,19 @@
+import { Sun, Moon, GitBranch } from "lucide-react";
+import { Button } from "@/shared/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="d-flex justify-content-center gap-3 mb-4">
+        <Sun size={32} className="text-warning" />
+        <Moon size={32} className="text-primary" />
+        <GitBranch size={32} className="text-dark" />
+      </div>
+      <h1 className="h1 fw-bold text-dark mb-4">Welcome to Lumen</h1>
+      <p className="text-muted mb-5">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/lucide/feature-based/src/features/home/pages/HomePage.jsx

@@ -1,20 +1,35 @@
-import React from "react";
-import { Sun, Moon, Github } from "lucide-react";
-import { Button } from "@/components/ui";
+import { Sun, Moon, GitBranch } from "lucide-react";
+import { Button } from "@/shared/components/ui";
 
 export function HomePage() {
   return (
-    <div className="text-center">
-      <div className="flex justify-center gap-4 mb-6">
-        <Sun className="w-8 h-8 text-yellow-500" />
-        <Moon className="w-8 h-8 text-blue-500" />
-        <Github className="w-8 h-8 text-gray-800" />
+    <div style={{ textAlign: "center" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          gap: "1rem",
+          marginBottom: "1.5rem",
+        }}
+      >
+        <Sun size={32} color="#eab308" />
+        <Moon size={32} color="#3b82f6" />
+        <GitBranch size={32} color="#1f2937" />
       </div>
-      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
-      <p className="text-gray-600 mb-8">
+      <h1
+        style={{
+          fontSize: "2.25rem",
+          fontWeight: 700,
+          color: "#111827",
+          marginBottom: "1rem",
+        }}
+      >
+        Welcome to Lumen
+      </h1>
+      <p style={{ color: "#4b5563", marginBottom: "2rem" }}>
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>
     </div>
   );
-}
+}

package/templates/conditional/icons/lucide/feature-based/src/features/home/pages/HomePage.tsx

@@ -1,20 +1,35 @@
-import React from "react";
-import { Sun, Moon, Github } from "lucide-react";
-import { Button } from "@/components/ui";
+import { Sun, Moon, GitBranch } from "lucide-react";
+import { Button } from "@/shared/components/ui";
 
 export function HomePage() {
   return (
-    <div className="text-center">
-      <div className="flex justify-center gap-4 mb-6">
-        <Sun className="w-8 h-8 text-yellow-500" />
-        <Moon className="w-8 h-8 text-blue-500" />
-        <Github className="w-8 h-8 text-gray-800" />
+    <div style={{ textAlign: "center" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          gap: "1rem",
+          marginBottom: "1.5rem",
+        }}
+      >
+        <Sun size={32} color="#eab308" />
+        <Moon size={32} color="#3b82f6" />
+        <GitBranch size={32} color="#1f2937" />
       </div>
-      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
-      <p className="text-gray-600 mb-8">
+      <h1
+        style={{
+          fontSize: "2.25rem",
+          fontWeight: 700,
+          color: "#111827",
+          marginBottom: "1rem",
+        }}
+      >
+        Welcome to Lumen
+      </h1>
+      <p style={{ color: "#4b5563", marginBottom: "2rem" }}>
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>
     </div>
   );
-}
+}

package/templates/conditional/icons/lucide/feature-based/tailwind/src/features/home/pages/HomePage.jsx

@@ -0,0 +1,19 @@
+import { Sun, Moon, GitBranch } from "lucide-react";
+import { Button } from "@/shared/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <Sun className="w-8 h-8 text-yellow-500" />
+        <Moon className="w-8 h-8 text-blue-500" />
+        <GitBranch className="w-8 h-8 text-gray-800" />
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/icons/lucide/feature-based/tailwind/src/features/home/pages/HomePage.tsx

@@ -0,0 +1,19 @@
+import { Sun, Moon, GitBranch } from "lucide-react";
+import { Button } from "@/shared/components/ui";
+
+export function HomePage() {
+  return (
+    <div className="text-center">
+      <div className="flex justify-center gap-4 mb-6">
+        <Sun className="w-8 h-8 text-yellow-500" />
+        <Moon className="w-8 h-8 text-blue-500" />
+        <GitBranch className="w-8 h-8 text-gray-800" />
+      </div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4">Welcome to Lumen</h1>
+      <p className="text-gray-600 mb-8">
+        Your React + Vite project is ready. Start building!
+      </p>
+      <Button>Get Started</Button>
+    </div>
+  );
+}

package/templates/conditional/linting/eslint/eslint.config.js

@@ -4,11 +4,12 @@ import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 
 export default [
+  js.configs.recommended,
   { ignores: ["dist"] },
   {
     files: ["**/*.{js,jsx}"],
     languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: "latest",
       globals: globals.browser,
       parserOptions: {
         ecmaVersion: "latest",
@@ -28,4 +29,25 @@ export default [
       ],
     },
   },
-];
+  {
+    // Node-runtime files: Vite/Vitest/Jest/ESLint configs and CLI scripts.
+    files: [
+      "**/*.config.{js,cjs,mjs}",
+      "eslint.config.js",
+      "scripts/**/*.{js,mjs}",
+      "jest.setup.{js,mjs}",
+    ],
+    languageOptions: {
+      ecmaVersion: "latest",
+      globals: globals.node,
+    },
+  },
+  {
+    // Test files also see Jest globals (Vitest suites import explicitly).
+    files: ["**/*.test.{js,jsx}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      globals: { ...globals.browser, ...globals.jest },
+    },
+  },
+];

package/templates/conditional/linting/eslint/eslint.config.ts

@@ -10,7 +10,7 @@ export default tseslint.config(
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ["**/*.{ts,tsx}"],
     languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: "latest",
       globals: globals.browser,
     },
     plugins: {
@@ -24,5 +24,28 @@ export default tseslint.config(
         { allowConstantExport: true },
       ],
     },
+  },
+  {
+    // Node-runtime files: Vite/Vitest/Jest/ESLint configs and CLI scripts.
+    extends: [...tseslint.configs.recommended],
+    files: [
+      "**/*.config.{ts,mts}",
+      "eslint.config.ts",
+      "scripts/**/*.{ts,mts}",
+      "jest.setup.ts",
+    ],
+    languageOptions: {
+      ecmaVersion: "latest",
+      globals: globals.node,
+    },
+  },
+  {
+    // Test files also see Jest globals (Vitest suites import explicitly).
+    extends: [...tseslint.configs.recommended],
+    files: ["**/*.test.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      globals: { ...globals.browser, ...globals.jest },
+    },
   }
-);
+);

package/templates/conditional/router/component-based/bootstrap/src/layouts/MainLayout.jsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+
+export function MainLayout() {
+  return (
+    <div className="min-vh-100 d-flex flex-column">
+      <header className="px-4 py-3 border-bottom">
+        <h2 className="h5 fw-semibold mb-0">Lumen</h2>
+      </header>
+      <main className="flex-grow-1 p-4 d-flex align-items-center justify-content-center">
+        <Outlet />
+      </main>
+      <footer className="px-4 py-3 border-top text-center text-muted">
+        <p className="mb-0">Built with Lumen</p>
+      </footer>
+    </div>
+  );
+}