Skip to content

Commit

Permalink
bomb commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@bush1D3v
bush1D3v committed Nov 11, 2024
1 parent efefde9 commit dd80af7
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 51 deletions.
33 changes: 24 additions & 9 deletions app/components/HomeTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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',
Expand All @@ -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>
8 changes: 4 additions & 4 deletions app/components/Skeletons/components/HomeTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' }" />
Expand All @@ -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" />
Expand Down
34 changes: 17 additions & 17 deletions app/events/coinMarketCapEventEmitter.ts
View file
Original file line number Diff line number Diff line change
@@ -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);
});
38 changes: 19 additions & 19 deletions app/views/BrapiDev/Stocks.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions app/views/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down

0 comments on commit dd80af7

Please sign in to comment.