En vez de poner ese div adicional que pone Nico para separar los íconos entre sí, pueden usan la propiedad gap-x-2 para separarlos entre sí:
<div class="flex items-center gap-x-2">
<button class="text-white" type="button">
<fa-icon [icon]="faBell"></fa-icon>
</button>
<button class="text-white" type="button">
<fa-icon [icon]="faInfoCircle"></fa-icon>
</button>
<button type="button" class="flex rounded-full" ...>
...
</button>
</div>
Como reto personal, he renderizado los boards de forma dinámica (ngFor + Array de objetos) , a los objetos le puse propiedad label y color, label contiene el nombre del board y color contiene la clase de tailwind del color de background. Utilicé ngClass para renderizar el color.
Es un reto sencillo pero sirve para practicar.
Tengo la version 13.1.3 de angular y tuve problemas instalando Font Awesome 6 por ende tuve que intentar con la version 5 y funciona !!! Espero que no existan muchas diferencias entre estas versiones de Awesome
En la versión 3.3.5 de TailwindCSS me funcionó la siguiente configuración
container: {
screens: {
mobile: "600px",
tablet: "900px",
desktop: "1200px",
},
},
Mi solución :):
<app-navbar></app-navbar>
<main class="container mx-auto md:flex">
<aside class="hidden w-64 px-4 pt-10 md:block">
<ul class="space-y-1">
<li>
<a
class="text flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500"
href=""
><fa-icon class="mx-2" [icon]="faTrello"></fa-icon>
<p>Boards</p></a
>
</li>
<li>
<a
class="flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500"
href=""
><fa-icon class="mx-2" [icon]="faBorderTopLeft"></fa-icon>
<p>Templates</p></a
>
</li>
<li>
<a
class="flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500"
href=""
><fa-icon class="mx-2" [icon]="faChartLine"></fa-icon>
<p>Home</p></a
>
</li>
</ul>
</aside>
<article class="w-full">
<section class="px-3">
<h3 class="pt-5 font-medium md:pt-10">
<fa-icon class="px-3" [icon]="faClock"></fa-icon> Recently viewed
</h4>
<div
class="my-4 grid grid-cols-[repeat(auto-fit,minmax(200px,_1fr))] gap-4"
>
<div
class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
>
<p class="absolute font-semibold text-white">Demo</p>
</div>
<div
class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
>
<p class="absolute font-semibold text-white">Proob</p>
</div>
<div
class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
>
<p class="absolute font-semibold text-white">Proob</p>
</div>
<div
class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
>
<p class="absolute font-semibold text-white">Proob</p>
</div>
</div>
</section>
</article>
</main>
import { Component } from '@angular/core';
import { faTrello } from '@fortawesome/free-brands-svg-icons';
import { faClock } from '@fortawesome/free-regular-svg-icons';
import { faBorderTopLeft, faChartLine } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-boards',
templateUrl: './boards.component.html'
})
export class BoardsComponent {
faClock = faClock;
faBorderTopLeft = faBorderTopLeft;
faChartLine= faChartLine;
faTrello = faTrello;
}
Solución del reto (no encontré todos los iconos así que puse los que mas se relacionara o pareciera):
Original:
Clon:
Cómo puedo hacer para que los iconos sean regular? no se cómo cambiar para que los iconos no sean sólidos. Asi lo tengo ahora 👇
<button class="text-gray-800 text-xl" type="button">
<fa-icon [icon]="faBell"></fa-icon>
</button>
asi quiero dejarlo 👇
Mi solución
Yo logré esto con mi solución
Comparto la solución por si alguien tiene una mejora:<app-navbar /><div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10"> <div class="w-1/4"> <ul class="py-1 mb-3" > <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faTrello"></fa-icon> <a href="#" class="ml-4" >Board</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faGopuram"></fa-icon> <a href="#" class="ml-4" >Templates</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faHome"></fa-icon> <a href="#" class="ml-4" >Home</a> </li> </ul> <div class="flex w-auto"> <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div> <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div> </div> </div> <div class="w-3/4"> <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3"> <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span> </div> <app-board color="sky-700">Demo</app-board> <div class="w-auto h-24" ></div> <h2 class="font-bold text-lg text-gray-500 ml-1 mb-3" > YOUR WORKSPACES </h3> <div class="flex w-auto h-auto justify-between" > <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1"> J </div> <div class = "flex justify-center items-center ml-3 mr-10"> <h3 class="text-sky-950 font-bold text-lg" > Juan Daniel's workspace </h4> </div> <div class="flex gap-5 justify-start w-auto" > <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Boards</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Views</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Members</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Settings</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Upgrade</button> </div> </div> <div class="flex overflow-x-auto gap-3 w-auto" > <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board> </div> </div></div>
Yo logr<app-navbar /><div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10"> <div class="w-1/4"> <ul class="py-1 mb-3" > <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faTrello"></fa-icon> <a href="#" class="ml-4" >Board</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faGopuram"></fa-icon> <a href="#" class="ml-4" >Templates</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faHome"></fa-icon> <a href="#" class="ml-4" >Home</a> </li> </ul> <div class="flex w-auto"> <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div> <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div> </div> </div> <div class="w-3/4"> <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3"> <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span> </div> <app-board color="sky-700">Demo</app-board> <div class="w-auto h-24" ></div> <h2 class="font-bold text-lg text-gray-500 ml-1 mb-3" > YOUR WORKSPACES </h3> <div class="flex w-auto h-auto justify-between" > <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1"> J </div> <div class = "flex justify-center items-center ml-3 mr-10"> <h3 class="text-sky-950 font-bold text-lg" > Juan Daniel's workspace </h4> </div> <div class="flex gap-5 justify-start w-auto" > <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Boards</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Views</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Members</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Settings</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Upgrade</button> </div> </div> <div class="flex overflow-x-auto gap-3 w-auto" > <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board> </div> </div></div>
<app-navbar />
<div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10">
<div class="w-1/4">
<ul class="py-1 mb-3" >
<li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
<fa-icon [icon]="faTrello"></fa-icon>
<a
href="#"
class="ml-4"
>Board</a>
</li>
<li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
<fa-icon [icon]="faGopuram"></fa-icon>
<a
href="#"
class="ml-4"
>Templates</a>
</li>
<li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
<fa-icon [icon]="faHome"></fa-icon>
<a
href="#"
class="ml-4"
>Home</a>
</li>
</ul>
<div class="flex w-auto">
<div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div>
<div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div>
</div>
</div>
<div class="w-3/4">
<div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3">
<fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span>
</div>
<app-board color="sky-700">Demo</app-board>
<div
class="w-auto h-24"
></div>
<h2
class="font-bold text-lg text-gray-500 ml-1 mb-3"
>
YOUR WORKSPACES
</h3>
<div
class="flex w-auto h-auto justify-between"
>
<div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1">
J
</div>
<div class = "flex justify-center items-center ml-3 mr-10">
<h3
class="text-sky-950 font-bold text-lg"
>
Juan Daniel's workspace
</h4>
</div>
<div
class="flex gap-5 justify-start w-auto"
>
<button
class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
>Boards</button>
<button
class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
>Views</button>
<button
class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
>Members</button>
<button
class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
>Settings</button>
<button
class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
>Upgrade</button>
</div>
</div>
<div
class="flex overflow-x-auto gap-3 w-auto"
>
<app-board color="sky-700" fontWeight="bold">Demo</app-board>
<app-board color="sky-700" fontWeight="bold">Demo</app-board>
<app-board color="sky-700" fontWeight="bold">Demo</app-board>
<app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board>
</div>
</div>
</div>
Yo logré hacer esto con la maquetación.
Comparto mi código, y si alguien tiene mejoras súper :)
<app-navbar />
<div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10">
<div class="w-1/4">
<ul class="py-1 mb-3" >
<li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
<fa-icon [icon]="faTrello"></fa-icon>
<a
href="#"
class="ml-4"
>Board</a>
</li>
<li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
<fa-icon [icon]="faGopuram"></fa-icon>
<a
href="#"
class="ml-4"
>Templates</a>
</li>
<li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
<fa-icon [icon]="faHome"></fa-icon>
<a
href="#"
class="ml-4"
>Home</a>
</li>
</ul>
<div class="flex w-auto">
<div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div>
<div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div>
</div>
</div>
<div class="w-3/4">
<div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3">
<fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span>
</div>
<app-board color="sky-700">Demo</app-board>
<div
class="w-auto h-24"
></div>
<h2
class="font-bold text-lg text-gray-500 ml-1 mb-3"
>
YOUR WORKSPACES
</h3>
<div
class="flex w-auto h-auto justify-between"
>
<div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1">
J
</div>
<div class = "flex justify-center items-center ml-3 mr-10">
<h3
class="text-sky-950 font-bold text-lg"
>
Juan Daniel's workspace
</h4>
</div>
<div
class="flex gap-5 justify-start w-auto"
>
<button
class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
>Boards</button>
<button
class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
>Views</button>
<button
class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
>Members</button>
<button
class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
>Settings</button>
<button
class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
>Upgrade</button>
</div>
</div>
<div
class="flex overflow-x-auto gap-3 w-auto"
>
<app-board color="sky-700" fontWeight="bold">Demo</app-board>
<app-board color="sky-700" fontWeight="bold">Demo</app-board>
<app-board color="sky-700" fontWeight="bold">Demo</app-board>
<app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board>
</div>
</div>
</div>