icones, cores e nova lista de produtos

src/app/@theme/components/footer/footer.component.ts

@@ -5,13 +5,11 @@ import { Component } from '@angular/core';
   styleUrls: ['./footer.component.scss'],
   template: `
     <span class="created-by">
-      Created with ♥ by <b><a href="https://akveo.page.link/8V2f" target="_blank">Akveo</a></b> 2019
+    © DesapeGrow.Todos os direitos reservados.
-    </span>
+     </span>
     <div class="socials">
-      <a href="#" target="_blank" class="ion ion-social-github"></a>
+      <a href="#" target="_blank" class="ion ion-social-instagram"></a>
       <a href="#" target="_blank" class="ion ion-social-facebook"></a>
-      <a href="#" target="_blank" class="ion ion-social-twitter"></a>
-      <a href="#" target="_blank" class="ion ion-social-linkedin"></a>
     </div>
   `,
 })

src/app/admin/paidAds/paidAds.ts

@@ -0,0 +1,37 @@
+export class PaidAds {
+    id!: string;
+    userId!: string;
+    categoryId!: string;
+    sub_categoryId!: string;
+    brandId!: string;
+    name!: string;
+    description!: string;
+    conditionId!: string;
+    price!: number;
+    countryId!: string | null;
+    stateId!: string | null;
+    cityId!: string | null;
+    neighbourhoodId!: string | null;
+    zip_code!: string | null;
+    createdAt!: Date;
+    approvedAt!: Date | null;
+    updatedAt!: Date | null;
+    isActive!: boolean;
+    isPromoted!: boolean;
+    viewCount!: number | null;
+    //user?: User;
+    //category?: Category;
+    //sub_category?: SubCategory;
+    //brand?: Brand;
+    //condition?: Condition;
+    //country?: Country | null;
+    //state?: State | null;
+    //city?: City | null;
+    //neighbourhood?: Neighbourhood | null;
+    //favorites?: Array<Favorite>;
+    //comments?: Array<Comment>;
+    //img_urls?: Array<ProductImg>;
+    //report?: Report | null;
+    //shares?: Array<Share>;
+    //_count?: ProductCount;
+}

src/app/public/home/home.component.html

@@ -7,9 +7,7 @@
     <div class="category">
       <a href="" *ngFor="let category of categories">
         <div class="text-container">
-         <i class="fa" [ngClass]="category.icon"></i>
+         <i class="fa" [ngClass]="category.icon" style="margin-bottom: 10px; font-size: 24px;"></i>
-         <!--<i class="fa fa-user"></i>-->
-         <!-- <nb-icon [icon]="category.icon" pack="eva"></nb-icon>-->
           <span class="title">{{category.name}}</span>
           <i class="line"></i>
         </div>
@@ -33,5 +31,28 @@
       </div>
     </div>
   </div>
+
+  <div class="col-12">
+    <div class="d-flex flex-col">
+      <h2>Anúncios testes</h2>
+    </div>
+    <div class="d-flex flex-row flex-nowrap overflow-auto">
+      <div *ngFor="let paidAds of paidAds" class="card-col">
+        <ngx-home-product></ngx-home-product>          
+      </div>
+    </div>
+  </div>  
+
+  <div class="col-12">
+    <div class="d-flex flex-col">
+      <h2>Anúncios padrão</h2>
+    </div>
+    <div class="d-flex flex-row flex-nowrap overflow-auto">
+      <div *ngFor="let product of products" class="card-col">
+        <ngx-home-product></ngx-home-product>          
+      </div>
+    </div>
+  </div>
+
 </div>
 

src/app/public/home/home.component.scss

@@ -61,7 +61,7 @@ mdb-carousel-item {
 }
 
 .category a {
-  color: #36f;
+  color: rgb(16, 126, 2);
   text-decoration: none;
   font-size: inherit;
   font-style: inherit;

src/app/public/home/home.component.ts

@@ -6,6 +6,8 @@ import { Banner } from '../../admin/banner/banner.model';
 import { Subject } from 'rxjs';
 import { Category } from '../../admin/category/category.model';
 import { Product } from '../../admin/product/product';
+import { PaidAds } from '../../admin/paidAds/paidAds';
+
 
 interface CardSettings {
   title: string;
@@ -23,6 +25,7 @@ export class HomeComponent implements OnDestroy {
   banners: Banner[];
   categories: Category[];
   products: any[];
+  paidAds: any[];
 
   constructor() {}
 
@@ -30,93 +33,54 @@ export class HomeComponent implements OnDestroy {
     console.log('init');
 
     this.categories = [
-      {
-        "name": "Nutrientes",
-        "id": "Nutrientes",
-        "updatedAt": new Date(),
-        "createdAt": new Date(),
-        "icon": "fa-star"
-    },
     {
         "name": "Iluminação",
-        "id": "Decoração",
+        "id": "Iluminacao",
         "updatedAt": new Date(),
         "createdAt": new Date(),
         "icon": "fa-lightbulb"
     },
     {
-        "name": "Hidroponia",
+        "name": "Exaustores/Filtros",
-        "id": "Hidroponia",
+        "id": "Exaustores",
         "updatedAt": new Date(),
         "createdAt": new Date(),
-        "icon": "fa-shower"
+        "icon": "fa-fan"
     },
     {
-        "name": "Irrigação",
+        "name": "Estufas",
-        "id": "Irrigação",
+        "id": "Estufas",
         "updatedAt": new Date(),
         "createdAt": new Date(),
-        "icon": "fa-faucet"
+        "icon": "fa-home"
     },
     {
-        "name": "Colheita",
+        "name": "Medidores",
-        "id": "Colheita",
+        "id": "Medidores",
         "updatedAt": new Date(),
         "createdAt": new Date(),
-        "icon": "fa-tree"
+        "icon": "fa-thermometer"
     },
     {
-        "name": "Pragas",
+        "name": "Acessórios",
-        "id": "Pragas",
+        "id": "Acessorios",
         "updatedAt": new Date(),
         "createdAt": new Date(),
-        "icon": "fa-bug"
+        "icon": "fa-scissors"
     },
     {
-        "name": "Potes e Vasos",
+      "name": "Outros",
-        "id": "Potes e Vasos",
+      "id": "Outros",
-        "updatedAt": new Date(),
+      "updatedAt": new Date(),
-        "createdAt": new Date(),
+      "createdAt": new Date(),
-        "icon": "fa-toilet"
+      "icon": "fa-spider"
-    },
+  }    
-    {
+    
-        "name": "Substratos",
-        "id": "Substratos",
-        "updatedAt": new Date(),
-        "createdAt": new Date(),
-        "icon": "fa-solid fa-sack-xmark"
-    },
-    {
-        "name": "Controle",
-        "id": "Controle",
-        "updatedAt": new Date(),
-        "createdAt": new Date(),
-        "icon": "arrow-ios-back-outline"
-    },
-    {
-        "name": "Clonagem",
-        "id": "Clonagem",
-        "updatedAt": new Date(),
-        "createdAt": new Date(),
-        "icon": "copy-outline"
-    },
-    {
-        "name": "Tendas",
-        "id": "Tendas",
-        "updatedAt": new Date(),
-        "createdAt": new Date(),
-        "icon": "arrow-ios-back-outline"
-    },
-    {
-        "name": "Circulação",
-        "id": "Circulação",
-        "updatedAt": new Date(),
-        "createdAt": new Date(),
-        "icon": "arrow-ios-back-outline"
-    },
     ]
 
-    this.products = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+    this.products = [1,1,1,1,1,1]
+
+    this.paidAds = [1,1,1]
   }
 
   ngOnDestroy() {

src/app/public/home/paidAds/paidAds.component.html

@@ -0,0 +1,17 @@
+<nb-card>
+    <nb-card-header class="card-img-top">
+      <ul>
+        <li>
+          <img [src]="imageUrl" />
+        </li>
+      </ul>
+      <span class="badge">{{ highlight }}</span>
+    </nb-card-header>
+    <nb-card-body>
+      <h5 class="card-title">{{ title }}</h5>
+      <p class="card-text">{{ price }}</p>
+    </nb-card-body>
+    <ul class="list-group list-group-flush">
+      <li *ngFor="let item of items" class="list-group-item">{{ item }}</li>
+    </ul>
+  </nb-card>

src/app/public/home/paidAds/paidAds.component.scss

@@ -0,0 +1,75 @@
+@import '../../../@theme/styles/themes';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
+
+.card-img-top {
+  font-size: 1.125rem;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  text-anchor: middle;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  overflow: hidden;
+  border-bottom: 0;
+  height: 180px;
+  padding: 0;
+  position: relative;
+}
+
+.card-img-top ul {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: flex-start;
+  margin: 0;
+  overflow: scroll hidden;
+  padding: 0;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  pointer-events: auto;
+}
+
+.card-img-top ul li {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  min-width: 100%;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+.card-img-top ul li img, .card-img-top ul li svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  overflow-clip-margin: content-box;
+  overflow: clip;
+}
+
+.card-img-top span.badge {
+  align-items: center;
+  background: blue;
+  color:white;
+  font-weight: 600;
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 4px;
+  font-size: 12px;
+  height: 24px;
+  left: 16px;
+  top: 16px;
+  max-width: calc(100% - 16px);
+  position: absolute;
+  z-index: 8;
+  display: block;
+  text-overflow: ellipsis;
+  padding: 4px 8px;
+}

src/app/public/home/paidAds/paidAds.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { PaidAds } from '../../../admin/paidAds/paidAds';
+
+
+@Component({
+  selector: 'ngx-home-product',
+  templateUrl: './paidAds.component.html',
+  styleUrls: ['./paidAds.component.css']
+})
+export class paidAdsComponent implements OnInit, OnDestroy{
+  private destroy$: Subject<void> = new Subject<void>();
+  @Input() product: PaidAds;
+  @Input() imageUrl: string = '';
+  @Input() title: string = '';
+  @Input() price: string = '';
+  @Input() highlight: string = ''; // Ex: "Destaque"
+  @Input() items: string[] = []; // Lista de itens
+
+  constructor() {}
+
+  ngOnInit(): void {
+    console.log('init');
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

src/app/public/home/product/product.component.html

@@ -14,10 +14,5 @@
   </nb-card-body>
   <ul class="list-group list-group-flush">
     <li class="list-group-item">An item</li>
-    <li class="list-group-item">A second item</li>
-    <li class="list-group-item">A third item</li>
   </ul>
-  <nb-card-footer>
+</nb-card>
-    <a href="#" class="card-link">Ver</a>
-  </nb-card-footer>
-</nb-card>