create-ng-tailwind 3.1.0 → 4.1.0

package/lib/templates/ecommerce/layout.js

@@ -0,0 +1,270 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Ecommerce Layout Components
+ * - Header (with navigation, cart icon, language switcher)
+ * - Footer (with newsletter, links)
+ */
+
+async function createLayout(config) {
+  // Header Component
+  const headerComponent = `import { Component, inject } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  heroShoppingBag,
+  heroHeart,
+  heroUser,
+  heroMagnifyingGlass,
+  heroBars3,
+  heroXMark,
+  heroLanguage,
+  heroChevronDown,
+} from '@ng-icons/heroicons/outline';
+import { CartService } from '@core/services/cart.service';
+import { WishlistService } from '@core/services/wishlist.service';
+import { TranslationService, type SupportedLanguage, type LanguageOption } from '@core/i18n/translation.service';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [RouterModule, NgIconComponent, TranslateModule],
+  viewProviders: [provideIcons({ heroShoppingBag, heroHeart, heroUser, heroMagnifyingGlass, heroBars3, heroXMark, heroLanguage, heroChevronDown })],
+  template: \`
+    <header class="sticky top-0 z-50 border-b border-gray-200 bg-white/95 backdrop-blur-sm">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="flex h-16 items-center justify-between">
+          <!-- Logo -->
+          <a routerLink="/" class="flex items-center gap-2">
+            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-linear-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30">
+              <ng-icon name="heroShoppingBag" size="20" style="color: white;"></ng-icon>
+            </div>
+            <span class="text-xl font-bold text-gray-900">${config.projectName}</span>
+          </a>
+
+          <!-- Desktop Navigation -->
+          <nav class="hidden md:flex items-center gap-8">
+            <a routerLink="/" routerLinkActive="text-primary-600" [routerLinkActiveOptions]="{exact: true}"
+               class="text-gray-600 hover:text-primary-600 transition-colors font-medium">
+              {{ 'nav.home' | translate }}
+            </a>
+            <a routerLink="/products" routerLinkActive="text-primary-600"
+               class="text-gray-600 hover:text-primary-600 transition-colors font-medium">
+              {{ 'nav.shop' | translate }}
+            </a>
+            <a routerLink="/wishlist" routerLinkActive="text-primary-600"
+               class="text-gray-600 hover:text-primary-600 transition-colors font-medium">
+              {{ 'nav.wishlist' | translate }}
+            </a>
+          </nav>
+
+          <!-- Right Side -->
+          <div class="flex items-center gap-4">
+            <!-- Search -->
+            <button class="hidden sm:flex h-10 w-10 items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 transition-colors">
+              <ng-icon name="heroMagnifyingGlass" size="20"></ng-icon>
+            </button>
+
+            <!-- Language Switcher -->
+            <div class="relative">
+              <button
+                (click)="toggleLanguageDropdown()"
+                class="flex items-center gap-1 rounded-full px-3 py-2 text-gray-600 hover:bg-gray-100 transition-colors">
+                <ng-icon name="heroLanguage" size="20"></ng-icon>
+                <span class="hidden sm:inline text-sm">{{ currentLanguage.flag }}</span>
+                <ng-icon name="heroChevronDown" size="14" [class.rotate-180]="languageDropdownOpen"></ng-icon>
+              </button>
+
+              @if (languageDropdownOpen) {
+                <div class="absolute end-0 top-full mt-1 w-36 rounded-lg border border-gray-200 bg-white py-1 shadow-lg z-50">
+                  @for (lang of translationService.languages; track lang.code) {
+                    <button
+                      (click)="setLanguage(lang.code)"
+                      class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-50 transition-colors"
+                      [class.bg-primary-50]="lang.code === currentLang"
+                      [class.text-primary-600]="lang.code === currentLang">
+                      <span>{{ lang.flag }}</span>
+                      <span>{{ lang.nativeName }}</span>
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+
+            <!-- Wishlist -->
+            <a routerLink="/wishlist" class="relative flex h-10 w-10 items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 transition-colors">
+              <ng-icon name="heroHeart" size="20"></ng-icon>
+              @if (wishlistCount > 0) {
+                <span class="absolute -end-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-danger-500 text-xs font-bold text-white">
+                  {{ wishlistCount }}
+                </span>
+              }
+            </a>
+
+            <!-- Cart -->
+            <a routerLink="/cart" class="relative flex h-10 w-10 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg shadow-primary-500/30 hover:bg-primary-600 transition-colors">
+              <ng-icon name="heroShoppingBag" size="20"></ng-icon>
+              @if (cartCount > 0) {
+                <span class="absolute -end-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-danger-500 text-xs font-bold text-white">
+                  {{ cartCount }}
+                </span>
+              }
+            </a>
+
+            <!-- Mobile Menu Button -->
+            <button
+              (click)="mobileMenuOpen = !mobileMenuOpen"
+              class="flex md:hidden h-10 w-10 items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 transition-colors">
+              <ng-icon [name]="mobileMenuOpen ? 'heroXMark' : 'heroBars3'" size="24"></ng-icon>
+            </button>
+          </div>
+        </div>
+
+        <!-- Mobile Navigation -->
+        @if (mobileMenuOpen) {
+          <nav class="md:hidden border-t border-gray-200 py-4 space-y-2">
+            <a routerLink="/" (click)="mobileMenuOpen = false"
+               class="block px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+              {{ 'nav.home' | translate }}
+            </a>
+            <a routerLink="/products" (click)="mobileMenuOpen = false"
+               class="block px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+              {{ 'nav.shop' | translate }}
+            </a>
+            <a routerLink="/wishlist" (click)="mobileMenuOpen = false"
+               class="block px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+              {{ 'nav.wishlist' | translate }}
+            </a>
+          </nav>
+        }
+      </div>
+    </header>
+  \`,
+})
+export class HeaderComponent {
+  private cartService = inject(CartService);
+  private wishlistService = inject(WishlistService);
+  translationService = inject(TranslationService);
+
+  mobileMenuOpen = false;
+  languageDropdownOpen = false;
+  currentLang: SupportedLanguage = 'en';
+  currentLanguage: LanguageOption = this.translationService.languages[0];
+
+  constructor() {
+    this.currentLang = this.translationService.getCurrentLanguage();
+    this.updateCurrentLanguage();
+  }
+
+  get cartCount(): number {
+    return this.cartService.itemCount();
+  }
+
+  get wishlistCount(): number {
+    return this.wishlistService.itemCount();
+  }
+
+  toggleLanguageDropdown(): void {
+    this.languageDropdownOpen = !this.languageDropdownOpen;
+  }
+
+  setLanguage(lang: SupportedLanguage): void {
+    this.translationService.setLanguage(lang);
+    this.currentLang = lang;
+    this.updateCurrentLanguage();
+    this.languageDropdownOpen = false;
+  }
+
+  private updateCurrentLanguage(): void {
+    const langOption = this.translationService.getLanguageOption(this.currentLang);
+    if (langOption) {
+      this.currentLanguage = langOption;
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/layout/header/header.component.ts'),
+    headerComponent
+  );
+
+  // Footer Component
+  const footerComponent = `import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroEnvelope } from '@ng-icons/heroicons/outline';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  imports: [RouterModule, TranslateModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroEnvelope })],
+  template: \`
+    <footer class="border-t border-gray-200 bg-gray-50">
+      <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+        <div class="grid grid-cols-1 gap-8 md:grid-cols-4">
+          <!-- Brand -->
+          <div class="col-span-1 md:col-span-2">
+            <h3 class="text-lg font-bold text-gray-900">${config.projectName}</h3>
+            <p class="mt-2 text-gray-600">{{ 'footer.description' | translate }}</p>
+
+            <!-- Newsletter -->
+            <div class="mt-6">
+              <p class="font-medium text-gray-900">{{ 'footer.newsletter' | translate }}</p>
+              <div class="mt-2 flex gap-2">
+                <input
+                  type="email"
+                  [placeholder]="'footer.emailPlaceholder' | translate"
+                  class="flex-1 rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                />
+                <button class="rounded-lg bg-primary-500 px-4 py-2 text-white hover:bg-primary-600 transition-colors">
+                  <ng-icon name="heroEnvelope" size="20"></ng-icon>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Quick Links -->
+          <div>
+            <h4 class="font-semibold text-gray-900">{{ 'footer.quickLinks' | translate }}</h4>
+            <ul class="mt-4 space-y-2">
+              <li><a routerLink="/" class="text-gray-600 hover:text-primary-600 transition-colors">{{ 'nav.home' | translate }}</a></li>
+              <li><a routerLink="/products" class="text-gray-600 hover:text-primary-600 transition-colors">{{ 'nav.shop' | translate }}</a></li>
+              <li><a routerLink="/cart" class="text-gray-600 hover:text-primary-600 transition-colors">{{ 'nav.cart' | translate }}</a></li>
+              <li><a routerLink="/wishlist" class="text-gray-600 hover:text-primary-600 transition-colors">{{ 'nav.wishlist' | translate }}</a></li>
+            </ul>
+          </div>
+
+          <!-- Support -->
+          <div>
+            <h4 class="font-semibold text-gray-900">{{ 'footer.support' | translate }}</h4>
+            <ul class="mt-4 space-y-2">
+              <li><a href="#" class="text-gray-600 hover:text-primary-600 transition-colors">{{ 'footer.faq' | translate }}</a></li>
+              <li><a href="#" class="text-gray-600 hover:text-primary-600 transition-colors">{{ 'footer.shipping' | translate }}</a></li>
+              <li><a href="#" class="text-gray-600 hover:text-primary-600 transition-colors">{{ 'footer.returns' | translate }}</a></li>
+              <li><a href="#" class="text-gray-600 hover:text-primary-600 transition-colors">{{ 'footer.contact' | translate }}</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="mt-8 border-t border-gray-200 pt-8 text-center text-sm text-gray-500">
+          <p>© {{ currentYear }} ${config.projectName}. {{ 'footer.rights' | translate }}</p>
+        </div>
+      </div>
+    </footer>
+  \`,
+})
+export class FooterComponent {
+  currentYear = new Date().getFullYear();
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/layout/footer/footer.component.ts'),
+    footerComponent
+  );
+}
+
+module.exports = { createLayout };