From 0d2b0766b82cf6faefe25e9fcac0c34299dc8cf8 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 30 Aug 2024 20:17:22 +0530 Subject: [PATCH 1/2] fixes: pricing page --- src/components/about-pages/nav-config.ts | 5 -- .../pricing-page/gpus/gpu-table.tsx | 56 +++++++++++-------- .../pricing-page/provider/month-earning.tsx | 48 ++++++++++++---- .../pricing-page/provider/provider-table.tsx | 27 +++++++-- 4 files changed, 91 insertions(+), 45 deletions(-) diff --git a/src/components/about-pages/nav-config.ts b/src/components/about-pages/nav-config.ts index c5c42b1d..4936b0da 100644 --- a/src/components/about-pages/nav-config.ts +++ b/src/components/about-pages/nav-config.ts @@ -16,9 +16,4 @@ export const nav: any = [ link: "/about/tenants/", enabled: true, }, - { - label: "Pricing", - link: "/about/pricing/custom/", - enabled: true, - }, ]; diff --git a/src/components/pricing-page/gpus/gpu-table.tsx b/src/components/pricing-page/gpus/gpu-table.tsx index cd6e0691..85097b56 100644 --- a/src/components/pricing-page/gpus/gpu-table.tsx +++ b/src/components/pricing-page/gpus/gpu-table.tsx @@ -110,7 +110,9 @@ export const modifyModel = (model: string) => { ? "A6000" : model?.includes("rtx") ? model?.replace("rtx", "RTX ").replace("ti", " Ti") - : model; + : model?.includes("gtx") + ? model?.replace("gtx", "GTX ").replace("ti", " Ti") + : model; }; export const price = (price: number) => { @@ -130,6 +132,22 @@ export const Tables = ({ }) => { const [filteredData, setFilteredData] = React.useState([]); const [filters, setFilters] = React.useState(defaultFilters); + const totalGpus = + filteredData?.length > 0 + ? filteredData?.reduce( + (prev, curr) => prev + (curr?.availability?.total ?? 0), + 0, + ) + : data?.availability?.total || 0; + + const totalAvailableGpus = + filteredData?.length > 0 + ? filteredData?.reduce( + (prev, curr) => prev + (curr?.availability?.available ?? 0), + 0, + ) + : data?.availability?.available || 0; + console.log(filteredData); return (
) : (

- {data?.availability?.total || 0} + {totalGpus}

)} @@ -160,8 +178,7 @@ export const Tables = ({

{( - ((data?.availability?.available || 0) / - (data?.availability?.total || 1)) * + ((totalAvailableGpus || 0) / (totalGpus || 1)) * 100 ).toFixed(2)} @@ -178,9 +195,7 @@ export const Tables = ({ {( 100 - - ((data?.availability?.available || 0) / - (data?.availability?.total || 1)) * - 100 + ((totalAvailableGpus || 0) / (totalGpus || 1)) * 100 ).toFixed(2)} % Used @@ -192,11 +207,7 @@ export const Tables = ({ @@ -216,10 +227,10 @@ export const Tables = ({

- {data?.availability?.total || 0}{" "} + {totalAvailableGpus || 0}{" "} - (of {data?.availability?.available || 0}) + (of {totalGpus || 0})
@@ -313,20 +324,20 @@ export const Tables = ({ Average price: - ${model?.price?.avg || 0} + {price(model?.price?.avg)}
- Min: ${model?.price?.min || 0} + Min: {price(model?.price?.min)} - - Max: ${model?.price?.max || 0} + Max: {price(model?.price?.max)}
@@ -409,7 +420,7 @@ export const Tables = ({ Availability - Price (USD) + Price (USD per hour) @@ -487,19 +498,19 @@ export const Tables = ({
Average price: - ${model?.price?.avg || 0} + {price(model?.price?.avg)}
- Min: ${model?.price?.min || 0} + Min: {price(model?.price?.min)} - - Max: ${model?.price?.max || 0} + Max: {price(model?.price?.max)} @@ -547,7 +558,8 @@ export const Tables = ({ diff --git a/src/components/pricing-page/provider/month-earning.tsx b/src/components/pricing-page/provider/month-earning.tsx index 5433cccc..701af892 100644 --- a/src/components/pricing-page/provider/month-earning.tsx +++ b/src/components/pricing-page/provider/month-earning.tsx @@ -1,17 +1,41 @@ +import { Skeleton } from "@/components/ui/skeleton"; + type MonthEarning = { - size?: 20 | 24; - className?: string; - value?: string; - title?: string; -} + size?: 20 | 24; + className?: string; + value?: string; + title?: string; + suffix?: string; + loading?: boolean; +}; -const MonthEarning = ({ size, className, value, title }: MonthEarning) => { - return ( -
-

{title}

-

{value}/month

-
- ); +const MonthEarning = ({ + size, + className, + value, + title, + suffix, + loading, +}: MonthEarning) => { + return ( +
+

+ {title} +

+ {loading ? ( + + ) : ( +

+ {value} + {suffix ?? "/month"} +

+ )} +
+ ); }; export default MonthEarning; diff --git a/src/components/pricing-page/provider/provider-table.tsx b/src/components/pricing-page/provider/provider-table.tsx index 08bed157..d1c4c680 100644 --- a/src/components/pricing-page/provider/provider-table.tsx +++ b/src/components/pricing-page/provider/provider-table.tsx @@ -153,7 +153,8 @@ export const Tables = ({ endpointInput: 1, endpointPricing: 0.01, }; - + const [loading, setIsLoading] = useState(false); + const [loadingDaily, setIsLoadingDaily] = useState(false); const [leasePercentInput, setLeasePercentInput] = useState(100); const [cpuInput, setCpuInput] = useState(10); const [cpuPricing, setCpuPricing] = useState(10); @@ -186,6 +187,8 @@ export const Tables = ({ }); useEffect(() => { + setIsLoading(true); + setIsLoadingDaily(true); let currentPrice = 0.0; let averagePrice = 0.0; fetch("https://api.coingecko.com/api/v3/coins/akash-network/tickers") @@ -198,6 +201,7 @@ export const Tables = ({ break; } } + setIsLoading(false); }); fetch( "https://api.coingecko.com/api/v3/coins/akash-network/market_chart?vs_currency=usd&days=30&interval=daily", @@ -212,6 +216,7 @@ export const Tables = ({ setAktAverage(false); } setMonthlyAverage(mean); + setIsLoadingDaily(false); }); }, []); @@ -276,6 +281,10 @@ export const Tables = ({ setAktAverage(value); }; + const convertPricing = (value: number) => { + return value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ","); + }; + return (

- Use 30day average price of AKT + Use the 30-Day Average Price of AKT

Average Price for 1 AKT is ${monthlyAverage.toFixed(2)} USD. From 8bb9f30ccd27bd71cc19547352dece0496fdbbb7 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Fri, 30 Aug 2024 20:17:32 +0530 Subject: [PATCH 2/2] delete: about/pricing --- src/pages/about/pricing/compare.astro | 133 -------------------------- src/pages/about/pricing/custom.astro | 82 ---------------- 2 files changed, 215 deletions(-) delete mode 100644 src/pages/about/pricing/compare.astro delete mode 100644 src/pages/about/pricing/custom.astro diff --git a/src/pages/about/pricing/compare.astro b/src/pages/about/pricing/compare.astro deleted file mode 100644 index a11f27fb..00000000 --- a/src/pages/about/pricing/compare.astro +++ /dev/null @@ -1,133 +0,0 @@ ---- -import Layout from "@/layouts/layout.astro"; -import PricingDashbord from "@/components/about-pages/pricing/dashboard.tsx"; -import { nav } from "@/components/about-pages/nav-config.ts"; -import MobileNav from "@/components/about-pages/mobile-nav"; -import NextPrevNav from "@/components/about-pages/next-prev-nav.astro"; -import { findPrevAndNextPages } from "@/lib/utils"; - -const pathname = new URL(Astro.request.url).pathname; - -const networkPage = await Astro.glob( - "../../../content/About_Page/_pricing/*.md", -); - -const PageContent = networkPage[0].Content; -const pageFrontMatter = networkPage[0].frontmatter; ---- - - -

-
- - -
-
- word.charAt(0).toUpperCase() + word.slice(1)) - .join(" ")} - nav={nav} - currentPath={pathname} - client:load - /> -
- -
-
-

- {pageFrontMatter.title} -

-
- -
- -
-
- -
- -
- - -
-
-
- diff --git a/src/pages/about/pricing/custom.astro b/src/pages/about/pricing/custom.astro deleted file mode 100644 index 481c4f13..00000000 --- a/src/pages/about/pricing/custom.astro +++ /dev/null @@ -1,82 +0,0 @@ ---- -import Layout from "@/layouts/layout.astro"; -import PricingDashbord from "@/components/about-pages/pricing/dashboard.tsx"; -import { nav } from "@/components/about-pages/nav-config.ts"; -import MobileNav from "@/components/about-pages/mobile-nav"; -import NextPrevNav from "@/components/about-pages/next-prev-nav.astro"; -import { findPrevAndNextPages } from "@/lib/utils"; -import TopMargin from "@/components/ui/top-margin.astro"; -import SubItemsSidebar from "@/components/sub-items-sidebar.astro"; -import { gpus } from "@/utils/api"; - -const pathname = new URL(Astro.request.url).pathname; - -const networkPage = await Astro.glob( - "../../../content/About_Page/_pricing/*.md", -); - -const PageContent = networkPage[0].Content; -const pageFrontMatter = networkPage[0].frontmatter; - -// const response = await fetch(gpus); -// const data = await response.json(); ---- - - - -
- - -
-
- word.charAt(0).toUpperCase() + word.slice(1)) - .join(" ")} - nav={nav} - currentPath={pathname} - client:load - link={"https://github.com/akash-network/website-revamp/blob/main/src/content/About_Page/_pricing/index.md"} - /> -
- -
-
-

- {pageFrontMatter.title} -

-
- -
- -
-
- -
- -
- -
- -
-
-
- -