Instalación Angular

      
// src/app/components/primary-card/primary-card.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-primary-card',
  templateUrl: './primary-card.component.html',
  styleUrls: ['./primary-card.component.css']
})
export class PrimaryCardComponent {
  // Puedes agregar lógica si es necesario en el futuro
}

<!-- src/app/components/primary-card/primary-card.component.html -->
<article class="w-full md:w-80 bg-white border-none shadow-lg hover:shadow-xl transition-all duration-300 rounded-xl p-6">
  <header class="relative pb-0">
    <div class="absolute top-4 right-4">
      <span class="px-2 py-1 text-xs font-semibold text-white bg-emerald-500 rounded-lg hover:bg-emerald-800 transition duration-150">PRO</span>
    </div>
    <div class="flex flex-col items-center">
      <figure class="border-white border-solid shadow-md px-3 py-2 rounded-full">
        <i class="ri-user-line text-3xl"></i>
      </figure>
      <h2 class="mt-4 text-xl font-semibold">Jane Doe</h2>
      <p class="text-gray-500">Product Designer</p>
    </div>
  </header>
  <section class="pt-6">
    <div class="flex justify-between text-center mb-6">
      <div class="flex-1">
        <p class="text-2xl font-bold text-gray-900">28</p>
        <p class="text-xs text-gray-500">Projects</p>
      </div>
      <div class="flex-1">
        <p class="text-2xl font-bold text-gray-900">160</p>
        <p class="text-xs text-gray-500">Likes</p>
      </div>
      <div class="flex-1">
        <p class="text-2xl font-bold text-gray-900">5.2k</p>
        <p class="text-xs text-gray-500">Followers</p>
      </div>
    </div>
    <div class="space-y-2">
      <div class="flex justify-between text-sm">
        <span class="text-gray-500">Profile Completion</span>
        <span class="font-medium">85%</span>
      </div>
      <div class="w-full bg-gray-100 h-2 rounded-full overflow-hidden">
        <div class="bg-blue-500 h-2 w-[85%]"></div>
      </div>
    </div>
  </section>
  <footer class="flex gap-2 items-center mt-4">
    <button class="cursor-pointer flex-1 flex items-center justify-center px-3 py-2 text-sm border border-gray-200 rounded-lg">
      <i class="ri-heart-fill text-lg text-rose-500"></i>
      <span class="ml-1">Liked</span>
    </button>
    <button class="cursor-pointer flex-1 flex items-center justify-center px-3 py-2 text-sm border border-gray-200 rounded-lg">
      <i class="ri-message-3-line text-lg text-gray-500"></i>
      <span class="ml-1">Message</span>
    </button>
    <button class="cursor-pointer w-9 h-9 flex items-center justify-center border border-gray-200 rounded-lg">
      <i class="ri-share-line text-lg text-gray-500"></i>
    </button>
  </footer>
</article>


    

      

// src/app/components/Secondary-card/Secondary-card.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-Secondary-card',
  templateUrl: './Secondary-card.component.html',
  styleUrls: ['./Secondary-card.component.css']
})
export class SecondaryCardComponent {
  // Puedes agregar lógica si es necesario en el futuro
}

<!-- src/app/components/secondary-card/secondary-card.component.html -->
<article class="flex flex-col w-96 rounded-2xl gap-2 shadow-xl py-4 transition duration-150 hover:shadow-2xl">
  <img src="/React.svg" alt="react-svg" class="bg-slate-200 w-full h-52" />
  <div class="flex px-3 items-center gap-3 pt-2">
    <span class="text-base font-bold">Tecnología</span>
    <span class="text-sm text-slate-500">Lectura 5 min</span>
  </div>
  <div class="flex flex-col gap-1 px-3">
    <h3 class="text-2xl font-semibold">El futuro de la IA en el desarrollo web</h3>
    <p class="text-slate-600">Descubre cómo la inteligencia artificial está transformando la manera en que diseñamos y desarrollamos sitios web.</p>
  </div>
  <div class="flex justify-between px-3">
    <span class="flex gap-2 items-center text-sm">
      <i class="ri-user-fill"></i>Por Alex Brown
    </span>
    <a href="#" class="text-cyan-500 transition duration-150 hover:underline font-bold">Leer más</a>
  </div>
</article>


    

      
// src/app/components/third-card/third-card.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-third-card',
  templateUrl: './third-card.component.html',
  styleUrls: ['./third-card.component.css']
})
export class ThirdCardComponent {
  // Puedes agregar lógica aquí si es necesario
}

<!-- src/app/components/third-card/third-card.component.html -->
<div class="w-[300px] overflow-hidden bg-white rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
  <div class="relative aspect-square overflow-hidden">
    <img
      src="/React.svg"
      alt="react-svg"
      class="w-full opacity-60 h-full object-cover transition-transform duration-300 ease-in-out hover:scale-110"
    />
    <span class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded">New</span>
  </div>
  <div class="p-4">
    <h2 class="text-lg font-semibold mb-2">Minimalist Desk Lamp</h2>
    <p class=" text-gray-500 mb-2">Adjustable arm with warm LED light</p>
    <div class="flex items-center justify-between px-1">
      <span class="text-lg font-bold">$89.99</span>
      <div class="flex items-center">
        <i class="ri-star-fill text-yellow-400 h-4 w-4" aria-hidden="true"></i>
        <span class="ml-1 text-sm">4.8 <span class="sr-only">(out of 5 stars)</span></span>
      </div>
    </div>
  </div>
  <div class="p-4 pt-0">
    <button
      class="w-full flex items-center justify-center bg-blue-600 text-white py-2 rounded transition-transform duration-300 ease-in-out group hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
      aria-label="Add Minimalist Desk Lamp to cart"
    >
      Add to Cart
      <i class="ri-add-line ml-2 h-4 w-4 transition-transform duration-300 ease-in-out group-hover:rotate-180" aria-hidden="true"></i>
    </button>
  </div>
</div>


    

      
// src/app/components/primary-input/primary-input.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-primary-input',
  templateUrl: './primary-input.component.html',
  styleUrls: ['./primary-input.component.css']
})
export class PrimaryInputComponent {
  email: string = '';

  handleEmailChange(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.email = input.value;
  }
}

<!-- src/app/components/primary-input/primary-input.component.html -->
<div class="space-y-2 w-full max-w-md">
  <label for="email" class="block font-medium text-gray-700">Email</label>
  <input
    type="email"
    id="email"
    placeholder="Enter your email"
    [value]="email"
    (input)="handleEmailChange($event)"
    class="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 border-gray-300 focus:ring-blue-500"
  />
</div>



    

      
// src/app/components/secondary-input/secondary-input.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-secondary-input',
  templateUrl: './secondary-input.component.html',
  styleUrls: ['./secondary-input.component.css']
})
export class SecondaryInputComponent {
  password: string = '';
  showPassword: boolean = false;

  handlePasswordChange(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.password = input.value;
  }

  togglePasswordVisibility(): void {
    this.showPassword = !this.showPassword;
  }
}

<!-- src/app/components/secondary-input/secondary-input.component.html -->
<div class="space-y-2 w-full max-w-md">
  <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
  <div class="relative">
    <input
      type="{{ showPassword ? 'text' : 'password' }}"
      id="password"
      placeholder="Enter your password"
      [value]="password"
      (input)="handlePasswordChange($event)"
      class="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 border-gray-300 focus:ring-blue-500"
    />
    <button
      type="button"
      class="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
      (click)="togglePasswordVisibility()"
      [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'"
    >
      <i *ngIf="showPassword" class="ri-eye-off-line h-4 w-4" aria-hidden="true"></i>
      <i *ngIf="!showPassword" class="ri-eye-line h-4 w-4" aria-hidden="true"></i>
    </button>
  </div>
</div>


    

      
// src/app/components/primary-alert/primary-alert.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-primary-alert',
  templateUrl: './primary-alert.component.html',
  styleUrls: ['./primary-alert.component.css']
})
export class PrimaryAlertComponent {}

<!-- src/app/components/primary-alert/primary-alert.component.html -->
<div class="flex items-center p-3 rounded-2xl bg-blue-100 text-blue-700" role="alert">
  <i class="ri-information-line mr-2"></i>
  <span>This is an informational alert message.</span>
</div>


    

      
// src/app/components/primary-form/primary-form.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-primary-form',
  templateUrl: './primary-form.component.html',
  styleUrls: ['./primary-form.component.css']
})
export class PrimaryFormComponent {}

<!-- src/app/components/primary-form/primary-form.component.html -->
<div class="w-full max-w-xs mx-auto border rounded p-4 transition duration-150 shadow-xl hover:shadow-2xl">
  <h2 class="text-xl font-bold mb-2">Login</h2>
  <p class="text-gray-600 mb-4 max-sm:text-base">Enter your credentials to access your account</p>
  <form class="space-y-4">
    <div class="space-y-2">
      <label for="email" class="block font-medium">Email</label>
      <div class="relative">
        <i class="ri-mail-line absolute left-3 top-3 text-gray-400"></i>
        <input id="email" type="email" placeholder="Enter your email" class="w-full pl-10 p-2 border rounded" />
      </div>
    </div>
    <div class="space-y-2">
      <label for="password" class="block font-medium">Password</label>
      <div class="relative">
        <i class="ri-lock-line absolute left-3 top-3 text-gray-400"></i>
        <input id="password" type="password" placeholder="Enter your password" class="w-full pl-10 p-2 border rounded" />
      </div>
    </div>
    <button type="submit" class="w-full bg-blue-500 transition duration-150 hover:bg-blue-700 text-white p-2 rounded mt-4">Log In</button>
  </form>
</div>


    

      
// src/app/components/secondary-form/secondary-form.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-secondary-form',
  templateUrl: './secondary-form.component.html',
  styleUrls: ['./secondary-form.component.css']
})
export class SecondaryFormComponent {}

<!-- src/app/components/secondary-form/secondary-form.component.html -->
<div class="w-full max-w-2xl mx-auto border rounded p-4 shadow-xl hover:shadow-2xl">
  <h2 class="text-xl font-bold mb-2">Contact Us</h2>
  <p class="text-gray-600 mb-4">Send us a message and we will get back to you as soon as possible</p>
  <form class="space-y-4">
    <div class="space-y-2">
      <label for="name" class="block font-medium">Name</label>
      <div class="relative">
        <i class="ri-user-line absolute left-3 top-3 text-gray-400"></i>
        <input id="name" placeholder="Enter your name" class="w-full pl-10 p-2 border rounded" />
      </div>
    </div>
    <div class="space-y-2">
      <label for="message" class="block font-medium">Message</label>
      <textarea id="message" placeholder="Type your message here" class="w-full p-2 border rounded"></textarea>
    </div>
    <button type="submit" class="w-full bg-blue-500 transition duration-150 hover:bg-blue-700 text-white p-2 rounded mt-4">
      <i class="ri-send-plane-line mr-2"></i>
      Send Message
    </button>
  </form>
</div>


    

      
// src/app/components/subscription-form/subscription-form.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-subscription-form',
  templateUrl: './subscription-form.component.html',
  styleUrls: ['./subscription-form.component.css']
})
export class SubscriptionFormComponent {}

<!-- src/app/components/subscription-form/subscription-form.component.html -->
<div class="w-full shadow-xl hover:shadow-2xl max-w-md mx-auto border rounded p-4">
  <h2 class="text-xl font-bold mb-2">Subscribe to Our Newsletter</h2>
  <p class="text-gray-600 mb-4">Stay updated with our latest news</p>
  <form class="space-y-4">
    <label class="block font-medium">Choose your plan</label>
    <div class="space-y-2">
      <label class="flex items-center">
        <input type="radio" name="plan" value="basic" class="mr-2" checked />
        Basic
      </label>
      <label class="flex items-center">
        <input type="radio" name="plan" value="premium" class="mr-2" />
        Premium
      </label>
      <label class="flex items-center">
        <input type="radio" name="plan" value="pro" class="mr-2" />
        Pro
      </label>
    </div>
    <button type="submit" class="w-full transition duration-150 hover:bg-blue-700 bg-blue-500 text-white p-2 rounded mt-4">
      <i class="ri-check-line mr-2"></i>
      Subscribe
    </button>
  </form>
</div>


    

      
// src/app/components/primary-table/primary-table.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-primary-table',
  templateUrl: './primary-table.component.html',
  styleUrls: ['./primary-table.component.css']
})
export class PrimaryTableComponent {}

<!-- src/app/components/primary-table/primary-table.component.html -->
<div class="overflow-x-auto bg-white shadow-md rounded-lg">
  <table class="min-w-full text-sm text-left text-gray-600">
    <thead class="bg-gray-200">
      <tr>
        <th class="px-6 py-3">#</th>
        <th class="px-6 py-3">Name</th>
        <th class="px-6 py-3">Age</th>
        <th class="px-6 py-3">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="px-6 py-3">1</td>
        <td class="px-6 py-3">John Doe</td>
        <td class="px-6 py-3">25</td>
        <td class="px-6 py-3">USA</td>
      </tr>
      <tr class="bg-gray-50">
        <td class="px-6 py-3">2</td>
        <td class="px-6 py-3">Jane Smith</td>
        <td class="px-6 py-3">30</td>
        <td class="px-6 py-3">Canada</td>
      </tr>
    </tbody>
  </table>
</div>


    

      
// src/app/components/secondary-table/secondary-table.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-secondary-table',
  templateUrl: './secondary-table.component.html',
  styleUrls: ['./secondary-table.component.css']
})
export class SecondaryTableComponent {
  searchTerm: string = '';
}

<!-- src/app/components/secondary-table/secondary-table.component.html -->
<div class="overflow-x-auto bg-white shadow-md rounded-lg">
  <div class="flex justify-between items-center p-4">
    <input
      type="text"
      placeholder="Search..."
      class="px-4 py-2 border rounded-lg text-sm w-1/4"
      [(ngModel)]="searchTerm"  <!-- Angular two-way binding for search term -->
    />
    <div class="flex space-x-2">
      <button class="px-4 py-2 bg-blue-500 text-white text-sm rounded">Filter</button>
      <button class="px-4 py-2 bg-gray-500 text-white text-sm rounded">Reset</button>
    </div>
  </div>
  
  <table class="min-w-full text-sm text-left text-gray-600">
    <thead class="bg-blue-100">
      <tr>
        <th class="px-6 py-3">#</th>
        <th class="px-6 py-3">Name</th>
        <th class="px-6 py-3">Age</th>
        <th class="px-6 py-3">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="px-6 py-3">1</td>
        <td class="px-6 py-3">John Doe</td>
        <td class="px-6 py-3">25</td>
        <td class="px-6 py-3">USA</td>
      </tr>
      <tr class="bg-gray-50">
        <td class="px-6 py-3">2</td>
        <td class="px-6 py-3">Jane Smith</td>
        <td class="px-6 py-3">30</td>
        <td class="px-6 py-3">Canada</td>
      </tr>
    </tbody>
  </table>

  <div class="flex justify-between items-center p-4">
    <div class="text-sm">Showing 1 to 2 of 50 entries</div>
    <div class="space-x-2">
      <button class="px-4 py-2 border rounded">Previous</button>
      <button class="px-4 py-2 border rounded">Next</button>
    <


    

      
// src/app/components/primary-acordion/primary-acordion.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.css']
})
export class FaqComponent {
  isOpen: boolean[] = [false, false, false]; // Array para manejar el estado de cada 'details'

  toggle(index: number): void {
    this.isOpen[index] = !this.isOpen[index];
  }
}

<!-- src/app/components/primary-Acordion/primary-acordion.component.html -->
<div class="w-full border border-gray-300 rounded-lg bg-black py-2 px-4">
  <details class="faq-border mb-4 pb-2 group" [ngClass]="{ 'max-lg:px-5': true }">
    <summary class="text-white cursor-pointer flex justify-between items-center" (click)="toggle(0)">
      ¿Puedo usar esto en mi proyecto?
      <span class="ml-2">
        <svg class="w-4 h-4 transition-transform" [class.'group-open:rotate-90']>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </span>
    </summary>
    <p class="text-white pt-5" *ngIf="isOpen[0]">
      Sí. Es de uso gratuito para proyectos personales y comerciales. No se requiere atribución.
    </p>
  </details>

  <details class="faq-border mb-4 pb-2 group" [ngClass]="{ 'max-lg:px-5': true }">
    <summary class="text-white cursor-pointer flex justify-between items-center" (click)="toggle(1)">
      ¿Por qué no lo publicas como paquete npm?
      <span class="ml-2">
        <svg class="w-4 h-4 transition-transform" [class.'group-open:rotate-90']>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </span>
    </summary>
    <p class="text-white pt-5" *ngIf="isOpen[1]">
      La idea detrás de esto es darle propiedad y control sobre el código, permitiéndole decidir cómo se construyen y diseñan los componentes.
    </p>
  </details>

  <details class="faq-border mb-4 pb-2 group" [ngClass]="{ 'max-lg:px-5': true }">
    <summary class="text-white cursor-pointer flex justify-between items-center" (click)="toggle(2)">
      ¿Qué frameworks son compatibles?
      <span class="ml-2">
        <svg class="w-4 h-4 transition-transform" [class.'group-open:rotate-90']>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </span>
    </summary>
    <p class="text-white pt-5" *ngIf="isOpen[2]">
      Puedes usarlo en cualquiera, React, Astro, Angular, Vue, etc.
    </p>
  </details>
</div>



    

      
// src/app/components/secondary-acordion/secondary-acordion.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.css']
})
export class AccordionComponent {
  // Array para manejar el estado de apertura de los detalles
  isOpen: boolean[] = [false, false, false];

  // Método para alternar el estado de apertura de cada detalle
  toggle(index: number): void {
    this.isOpen[index] = !this.isOpen[index];
  }
}


<!-- src/app/components/secondary-acordion/secondary-acordion.component.html -->
<div class="w-full">
  <details class="mb-2" [attr.open]="isOpen[0] ? true : null">
    <summary class="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center" (click)="toggle(0)">
      <i class="ri-edit-2-line mr-2"></i>
      Custom Header 1
    </summary>
    <div class="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
      This accordion has custom styling applied to it.
    </div>
  </details>

  <details class="mb-2" [attr.open]="isOpen[1] ? true : null">
    <summary class="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center" (click)="toggle(1)">
      <i class="ri-settings-2-line mr-2"></i>
      Custom Header 2
    </summary>
    <div class="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
      You can customize the colors, padding, and other styles.
    </div>
  </details>

  <details [attr.open]="isOpen[2] ? true : null">
    <summary class="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center" (click)="toggle(2)">
      <i class="ri-lightbulb-line mr-2"></i>
      Custom Header 3
    </summary>
    <div class="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
      This demonstrates how flexible the accordion component can be.
    </div>
  </details>
</div>



    

      
<!-- terms-checkbox.component.html -->
<div class="bg-black flex items-center space-x-2 p-2 rounded">
  <input
    type="checkbox"
    id="exampleCheckbox"
    name="example"
    class="peer"
  />
  <label
    for="exampleCheckbox"
    class="text-sm text-white font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </label>
</div>

<!-- terms-checkbox.component.ts -->
import { Component } from '@angular/core';

@Component({
  selector: 'app-terms-checkbox',
  templateUrl: './terms-checkbox.component.html',
  styleUrls: ['./terms-checkbox.component.css']
})
export class TermsCheckboxComponent {}

/* terms-checkbox.component.css */