🚧 feat: criou painel que mostra informações de cryptos

src/app/components/crypto-infos/crypto-infos.component.html

@@ -1,3 +1,10 @@
-<header id="crypto-infos-container">
-    <p id="info">INFOS CRYPTOS</p>
+<header id="slide-wrapper">
+  <div class="slide-track">
+    <div class="slide" *ngFor="let crypto of cryptoInfos">
+      <img class="crypto-icon" src="{{ crypto.symbol }}" />
+      <p id="info">{{ crypto.name }}</p>
+      <p id="info">{{ crypto.buyValue }}</p>
+      <p id="info">{{ crypto.priceVariationPercentage }}</p>
+    </div>
+  </div>
 </header>

src/app/components/crypto-infos/crypto-infos.component.scss

@@ -1,10 +1,59 @@
-#crypto-infos-container {
+#slide-wrapper {
     width: 100%;
-    height: 6vh;
+    height: 10vh;
     background-color: black;
+    display: flex;
+    flex-direction: row;
+    overflow-x: scroll;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
 }
 
-#info {
-    height: 10vh;
-    margin: 0px;
-}
+.crypto-icon {
+    width: 20px;
+}
+
+.slide-track {
+    display: flex;
+    width: calc(250*6);
+    animation: slidescroll 80s linear infinite;
+
+}
+
+.slide-track:hover {
+    animation-play-state: paused;
+}
+
+@keyframes slidescroll {
+    0% {
+        transform: translateX(0);
+    }
+
+    100% {
+        transform: translateX(calc(-100%*1));
+    }
+}
+
+.slide {
+    width: 400px;
+    height: 50px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 10px;
+    color: white;
+    overflow: hidden;
+    perspective: 100px;
+    cursor: pointer;
+}
+
+.slide-wrapper::after {
+
+    right: -2px;
+    top: 0;
+    transform: rotateZ(180deg);
+}
+
+

src/app/components/crypto-infos/crypto-infos.component.ts

@@ -8,15 +8,47 @@ import { CryptoCoinService } from 'src/app/services/CryptoCoin.service';
 })
 export class CryptoInfosComponent {
 
+  cryptoInfos!: any;
+
+  coinsNotSymbol = [
+    'bnbbrl',
+    'ltcbrl',
+    'bttbrl',
+    'shibbrl',
+    'busdbrl',
+    'galabrl',
+    'lunabrl',
+    'galbrl',
+    'aptbrl',
+    'linkbrl'
+  ]
+
   constructor(private cryptoService: CryptoCoinService) {
 
   }
 
   ngOnInit() {
-    this.cryptoService.getCryptoInfos().subscribe((data)=> {
+    this.cryptoService.getCryptoInfos().subscribe((data) => {
+      let cryptoName = ''
+       data.map((i) => {
+        cryptoName = i.name.replace('B', '').replace('R', '').replace('L', '')
+        if( cryptoName.toLowerCase() === 'win' || cryptoName.toLowerCase() === 'axs' || cryptoName.toLowerCase() === 'fis' || cryptoName.toLowerCase() === 'c98' || cryptoName.toLowerCase() === 'ftm' || cryptoName.toLowerCase() === 'santos') {
+          i.symbol = '../../../assets/' + `${cryptoName.toLowerCase()}.png`;
+        } else if (cryptoName.toLowerCase() === 'cake' ) {
+          i.symbol = '../../../assets/' + `${cryptoName.toLowerCase()}.webp`
+        } else {
+          i.symbol = '../../../assets/' + `${cryptoName.toLowerCase()}.svg`;
+        }
+
+      })
+
+      this.cryptoInfos = data
+
+      this.cryptoInfos = this.cryptoInfos.filter((i: any)=> !this.coinsNotSymbol.includes((i.name.toLowerCase())))
       console.log(data)
+      console.log(this.cryptoInfos)
     })
-
-    console.log(this.cryptoService.cryptosInfos)
   }
+
+
 }