From dd80af7a3df15b07122624781611f73d84f59047 Mon Sep 17 00:00:00 2001
From: bush1D3v <victor.jose.lopes.navarro@gmail.com>
Date: Mon, 11 Nov 2024 18:31:25 -0300
Subject: [PATCH] bomb commit

---
 app/components/HomeTable.vue                  | 33 +++++++++++-----
 .../Skeletons/components/HomeTable.vue        |  8 ++--
 app/events/coinMarketCapEventEmitter.ts       | 34 ++++++++---------
 app/views/BrapiDev/Stocks.vue                 | 38 +++++++++----------
 app/views/Home.vue                            |  4 +-
 5 files changed, 66 insertions(+), 51 deletions(-)

diff --git a/app/components/HomeTable.vue b/app/components/HomeTable.vue
index e713b5d..45cad14 100644
--- a/app/components/HomeTable.vue
+++ b/app/components/HomeTable.vue
@@ -26,40 +26,41 @@ const props = defineProps<Props>();
                 <span> {{ props.icon }} </span>
                 <h4> {{ props.tableTitle }} </h4>
             </div>
-            <RouterLink :to="props.redirectTo" target="_self" class="text-link hover:underline mt-2 h-fit"> See more
+            <RouterLink :to="props.redirectTo" target="_self" class="text-link hover:underline mt-2 h-fit">
+                See more
             </RouterLink>
         </div>
         <hr class="h-[1px] w-full bg-gray-300" />
         <ul class="flex flex-col gap-2">
             <li v-if="props.coins" v-for="(data, i) in props.coins" :key="i">
-                <div class="flex gap-2 min-w-72 max-w-72 justify-between">
+                <div class="li-first-container">
                     <div class="flex gap-2">
                         <Image class="rounded-full"
                             :src="`https://s2.coinmarketcap.com/static/img/coins/64x64/${data.id}.png`"
                             :alt="data.name + ' logo'" width="24" height="24" />
                         <RouterLink :to="`/cryptos/${data.name}`" target="_self" class="hover:underline">
-                            <h5> {{ data.name }} </h5>
+                            <h5 class="line-clamp-1 text-left"> {{ data.name }} </h5>
                             </ RouterLink>
                     </div>
                     <span class="text-dark"> {{ data.symbol }} </span>
                 </div>
-                <div class="flex gap-2">
+                <div class="li-second-container">
                     <span> {{ numberFormatter(data.quote.USD.price) }} </span>
                     <span class="min-w-12 text-left"> {{ numberFormatter(data.quote.USD.volume_change_24h) }} </span>
                 </div>
             </li>
             <li v-if="props.stocks" v-for="(data, i) in props.stocks" :key="i">
-                <div class="flex gap-2 min-w-72 max-w-72 justify-between">
+                <div class="li-first-container">
                     <div class="flex gap-2">
                         <Image class="rounded-full" :src="data.logo" :alt="data.name + ' logo'" width="24"
                             height="24" />
                         <RouterLink :to="`/stocks/${data.name}`" target="_self" class="hover:underline">
-                            <h5> {{ data.name }} </h5>
+                            <h5 class="line-clamp-1 text-left"> {{ data.name }} </h5>
                             </ RouterLink>
                     </div>
                     <span class="text-dark"> {{ data.stock }} </span>
                 </div>
-                <div class="flex gap-2">
+                <div class="li-second-container">
                     <span> {{ numberFormatter(data.close) }} </span>
                     <span class="min-w-12 text-left"> {{ numberFormatter(data.change) }} </span>
                 </div>
@@ -69,7 +70,9 @@ const props = defineProps<Props>();
                     class="w-[82px] h-[47px] rounded-lg" />
                 <div class="flex flex-col max-h-14 text-left">
                     <Link :href="data.url" target="_blank" class="hover:underline">
-                    <h6 class="line-clamp-2 max-w-72 text-sm"> {{ data.headline }} </h6>
+                    <h6 class="line-clamp-2 max-w-56 min-w-56 md:max-w-72 md:min-w-72 text-sm">
+                        {{ data.headline }}
+                    </h6>
                     </Link>
                     <span class="text-xs text-dark">{{ new Date(data.datetime * 1000).toLocaleDateString('en-US', {
                         month: 'short',
@@ -83,10 +86,22 @@ const props = defineProps<Props>();
 
 <style lang="css" scoped>
 article {
-    @apply flex flex-col justify-center bg-secondaryDarker rounded-lg gap-1 p-3 min-w-[425px] max-w-[425px] min-h-[250px];
+    @apply flex flex-col justify-around md:justify-center bg-secondaryDarker rounded-lg gap-1 p-2 md:p-3 min-w-[355px] max-w-[355px] min-h-[250px] max-h-[250px] md:min-w-[425px] md:max-w-[425px] md:min-h-[250px] md:max-h-[250px];
+}
+
+.li-first-container {
+    @apply flex gap-2 min-w-60 max-w-60 md:min-w-72 md:max-w-72 justify-between;
+}
+
+.li-second-container {
+    @apply flex gap-2;
 }
 
 li {
     @apply flex gap-2 items-center justify-between text-center;
 }
+
+span {
+    @apply text-sm md:text-base;
+}
 </style>
diff --git a/app/components/Skeletons/components/HomeTable.vue b/app/components/Skeletons/components/HomeTable.vue
index 07b5985..ac2b801 100644
--- a/app/components/Skeletons/components/HomeTable.vue
+++ b/app/components/Skeletons/components/HomeTable.vue
@@ -7,7 +7,7 @@ const props = defineProps<Props>();
 
 <template>
     <article
-        class="flex flex-col justify-center bg-secondaryDarker rounded-lg gap-2 p-3 min-w-[425px] max-w-[425px] min-h-[250px] animate-pulse">
+        class="flex flex-col justify-around md:justify-center bg-secondaryDarker rounded-lg gap-1 p-2 md:p-3 min-w-[355px] max-w-[355px] min-h-[250px] max-h-[250px] md:min-w-[425px] md:max-w-[425px] md:min-h-[250px] md:max-h-[250px]">
         <div class="flex justify-between">
             <div class="flex gap-2 items-center">
                 <span class="bg-gray-300 h-5 w-5" :class="{ 'rounded-full': props.type === 'cryptos' }" />
@@ -21,14 +21,14 @@ const props = defineProps<Props>();
                 <div class="w-[82px] h-[47px] bg-gray-300 rounded-lg" />
                 <div class="flex flex-col max-h-14">
                     <div class="flex flex-col hover:underline gap-1">
-                        <div class="h-3 w-72 bg-gray-300 rounded" />
-                        <div class="h-3 w-72 bg-gray-300 rounded" />
+                        <div class="h-3 w-56  md:w-72 bg-gray-300 rounded" />
+                        <div class="h-3 w-56  md:w-72 bg-gray-300 rounded" />
                     </div>
                     <div class="mt-1 h-4 w-16 bg-gray-300 rounded" />
                 </div>
             </li>
             <li v-else v-for="i in 5" class="flex gap-2 items-center justify-between text-center">
-                <div class="flex gap-2 min-w-72 max-w-72 justify-between">
+                <div class="flex gap-2 min-w-60 max-w-60 md:min-w-72 md:max-w-72 justify-between">
                     <div class="flex gap-2 items-center">
                         <span class="bg-gray-300 h-6 w-6 rounded-full" />
                         <span class="bg-gray-300 h-5 w-28 rounded" />
diff --git a/app/events/coinMarketCapEventEmitter.ts b/app/events/coinMarketCapEventEmitter.ts
index 1ecdf39..2b3f6fd 100644
--- a/app/events/coinMarketCapEventEmitter.ts
+++ b/app/events/coinMarketCapEventEmitter.ts
@@ -1,32 +1,32 @@
-import mitt, {type Emitter} from "mitt";
-import {useCryptoCurrencyStore} from "@/stores/useCryptoCurrencyStore";
-import type {CryptoCurrency} from "@/types/CoinMarketCap/CryptoCurrency";
+import mitt, { type Emitter } from "mitt";
+import { useCryptoCurrencyStore } from "@/stores/useCryptoCurrencyStore";
+import type { CryptoCurrency } from "@/types/CoinMarketCap/CryptoCurrency";
 
 type CoinMarketCapEventEmitter = {
-	crypto: CryptoCurrency[];
+    crypto: CryptoCurrency[];
 };
 
 const events = {
-	getCurrencyCryptos: (payload: CoinMarketCapEventEmitter) => {
-		const cryptoStore = useCryptoCurrencyStore();
-		cryptoStore.addCryptoCurrencies(payload.crypto);
-	},
-	getSortCurrencyCryptos: (payload: CoinMarketCapEventEmitter) => {
-		const cryptoStore = useCryptoCurrencyStore();
-		cryptoStore.setHomeCryptoCurrencies(payload.crypto);
-	},
+    getCurrencyCryptos: (payload: CoinMarketCapEventEmitter) => {
+        const cryptoStore = useCryptoCurrencyStore();
+        cryptoStore.addCryptoCurrencies(payload.crypto);
+    },
+    getSortCurrencyCryptos: (payload: CoinMarketCapEventEmitter) => {
+        const cryptoStore = useCryptoCurrencyStore();
+        cryptoStore.setHomeCryptoCurrencies(payload.crypto);
+    },
 };
 
 type EventSchema<T extends Record<string, (payload: CoinMarketCapEventEmitter) => void>> = {
-	[K in keyof T]: Parameters<T[K]>[0];
+    [ K in keyof T ]: Parameters<T[ K ]>[ 0 ];
 };
 type MittSchema = EventSchema<
-	typeof events & {
-		all: (payload: CoinMarketCapEventEmitter) => void;
-	}
+    typeof events & {
+        all: (payload: CoinMarketCapEventEmitter) => void;
+    }
 >;
 export const bus: Emitter<MittSchema> = mitt<MittSchema>();
 
 bus.on("*", (type: unknown, payload) => {
-	events[type as keyof typeof events](payload);
+    events[ type as keyof typeof events ](payload);
 });
diff --git a/app/views/BrapiDev/Stocks.vue b/app/views/BrapiDev/Stocks.vue
index 0ed4dc3..67cb47d 100644
--- a/app/views/BrapiDev/Stocks.vue
+++ b/app/views/BrapiDev/Stocks.vue
@@ -3,42 +3,42 @@ import Button from "@/components/ui/button/Button.vue";
 import EntityCardSkeleton from "@/components/Skeletons/components/EntityCard.vue";
 import EntityCard from "@/components/EntityCard.vue";
 import InternalServerError from "@/views/Exceptions/InternalServerError.vue";
-import {ref, onMounted} from "vue";
-import {listStocks} from "@/services/BrapiDev";
-import {useTranslation} from "@/config/composable/translate";
-import {useStocksCurrencyStore} from "@/stores/useStocksCurrencyStore";
-import {t} from "i18next";
+import { ref, onMounted } from "vue";
+import { listStocks } from "@/services/BrapiDev";
+import { useTranslation } from "@/config/composable/translate";
+import { useStocksCurrencyStore } from "@/stores/useStocksCurrencyStore";
+import { t } from "i18next";
 
 useTranslation();
 
-const {stocksCurrencies} = useStocksCurrencyStore();
+const { stocksCurrencies } = useStocksCurrencyStore();
 const isLoading = ref<boolean>(true);
 const isLoadingMore = ref<boolean>(false);
 const start = ref<number>(1);
 const error = ref<boolean>(false);
 
 async function loadStocks() {
-	return await listStocks(12, start.value);
+    return await listStocks(12, start.value);
 }
 
 async function loadMore() {
-	isLoadingMore.value = true;
-	start.value += 12;
-	const newStocks = await loadStocks();
+    isLoadingMore.value = true;
+    start.value += 12;
+    const newStocks = await loadStocks();
 
-	if (!newStocks) {
-		error.value = true;
-	}
+    if (!newStocks) {
+        error.value = true;
+    }
 
-	isLoadingMore.value = false;
+    isLoadingMore.value = false;
 }
 
 onMounted(async () => {
-	if (!stocksCurrencies.length) {
-		const data = await loadStocks();
-		if (!data) error.value = true;
-	}
-	isLoading.value = false;
+    if (!stocksCurrencies.length) {
+        const data = await loadStocks();
+        if (!data) error.value = true;
+    }
+    isLoading.value = false;
 });
 </script>
 
diff --git a/app/views/Home.vue b/app/views/Home.vue
index ca5fcd3..769213a 100644
--- a/app/views/Home.vue
+++ b/app/views/Home.vue
@@ -46,8 +46,8 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-    <section class="container justify-center">
-        <ul class="flex gap-4 flex-wrap">
+    <section class="container justify-center gap-8">
+        <ul class="flex gap-4 flex-wrap justify-center">
             <li v-if="!onCryptoLoading">
                 <HomeTable icon="🪙" table-title="Trending Coins" redirect-to="/cryptos"
                     :coins="cryptoCurrencyStore.homeCryptoCurrencies" />