feat: add home page to add an another example for dashboard prefab

Author: remadex

doc-app/app/components/theme-selector.gts

@@ -54,24 +54,62 @@ export default class ThemeSelector extends Component<ThemeSelectorSignature> {
   }
 
   <template>
-    <div class="dropdown dropdown-top {{if @sidebarCollapsed "dropdown-right dropdown-end" "dropdown-start"}} {{if this.themeDropdownOpen "dropdown-open"}}">
-      <button type="button" class="btn btn-ghost btn-sm gap-1" {{on "click" this.toggleThemeDropdown}}>
-        <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
+    <div
+      class="dropdown dropdown-top
+        {{if @sidebarCollapsed 'dropdown-right dropdown-end' 'dropdown-start'}}
+        {{if this.themeDropdownOpen 'dropdown-open'}}"
+    >
+      <button
+        type="button"
+        class="btn btn-ghost btn-sm gap-1"
+        {{on "click" this.toggleThemeDropdown}}
+      >
+        <svg
+          class="size-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
+          />
         </svg>
         {{#unless @sidebarCollapsed}}
           <span>Theme</span>
-          <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          <svg
+            class="size-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
+            />
           </svg>
         {{/unless}}
       </button>
-      <ul class="dropdown-content menu bg-base-200 rounded-box z-50 w-52 p-2 shadow">
+      <ul
+        class="dropdown-content menu bg-base-200 rounded-box z-50 w-52 p-2 shadow"
+      >
         <li class="menu-title px-2 py-1 text-base-content/70">Theme</li>
         {{#each this.THEMES as |themeName|}}
           <li>
-            <button type="button" {{on "click" (fn this.setTheme themeName)}} class="flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 {{if (this.isCurrentTheme themeName) "active"}}">
-              <span data-theme={{themeName}} class="grid grid-cols-2 gap-0.5 p-0.5 rounded-sm">
+            <button
+              type="button"
+              {{on "click" (fn this.setTheme themeName)}}
+              class="flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5
+                {{if (this.isCurrentTheme themeName) 'active'}}"
+            >
+              <span
+                data-theme={{themeName}}
+                class="grid grid-cols-2 gap-0.5 p-0.5 rounded-sm"
+              >
                 <span class="w-2 h-2 rounded-sm bg-primary"></span>
                 <span class="w-2 h-2 rounded-sm bg-secondary"></span>
                 <span class="w-2 h-2 rounded-sm bg-accent"></span>

doc-app/app/router.ts

@@ -46,7 +46,8 @@ Router.map(function () {
       });
     });
   });
-  this.route('login', function () { })
-  this.route('forgot-password', function () { })
-  this.route('reset-password', function () { })
+  this.route('home', function () {});
+  this.route('login', function () {});
+  this.route('forgot-password', function () {});
+  this.route('reset-password', function () {});
 });

doc-app/app/styles/app.css

@@ -4,7 +4,11 @@
 /* stylelint-disable import-notation */
 @import 'tailwindcss';
 @plugin "daisyui" {
-  themes: nord --default, dracula, cupcake, corporate;
+  themes:
+    nord --default,
+    dracula,
+    cupcake,
+    corporate;
 }
 @import '@triptyk/ember-input/dist/app.css';
 @import '@triptyk/ember-ui/dist/app.css';

doc-app/app/styles/auth.css

@@ -12,7 +12,7 @@
 
 .auth-layout-content .tpk-login-form,
 .auth-layout-content .tpk-forgot-password-form,
-.auth-layout-content .tpk-reset-password-form  {
+.auth-layout-content .tpk-reset-password-form {
   @apply flex flex-col w-full gap-4 bg-base-100 p-8 rounded-2xl shadow-xl border border-base-200;
 }
 
@@ -24,7 +24,7 @@
   @apply w-full;
 }
 
-.auth-layout-content button[type="submit"] {
+.auth-layout-content button[type='submit'] {
   @apply w-1/2 mx-auto btn btn-primary;
 }