Skip to content

Commit

Permalink
fix: gpu pricing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@dharamveergit
dharamveergit committed Aug 27, 2024
1 parent d504644 commit f5c615e
Show file tree
Hide file tree
Showing 10 changed files with 5,523 additions and 5,325 deletions.
8,781 changes: 4,425 additions & 4,356 deletions package-lock.json
View file

Large diffs are not rendered by default.

64 changes: 34 additions & 30 deletions src/components/pricing-page/gpus/availability-bar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,42 @@
import clsx from 'clsx';
import React from 'react';
import clsx from "clsx";
import React from "react";

interface AvailabilityBarProps {
available: number;
total: number;
className?: string;
available: number;
total: number;
className?: string;
}

const AvailabilityBar: React.FC<AvailabilityBarProps> = ({ available, total, className }) => {
const filledDots = Math.round((available / total) * 15);
const emptyDots = 15 - filledDots;
const AvailabilityBar: React.FC<AvailabilityBarProps> = ({
available,
total,
className,
}) => {
const filledDots = Math.round((available / total) * 15);
const emptyDots = 15 - filledDots;

return (
<div className={clsx('flex flex-col my-5 gap-2', className)}>
<div className='flex justify-between items-center'>
<span className='font-bold text-foreground'>{available} Available</span>
<span>(out of {total})</span>
</div>
<div className='flex justify-between'>
{Array.from({ length: filledDots }).map((_, i) => (
<div
key={i}
className='w-[8px] h-[8px] bg-black rounded-full mx-[2px]'
/>
))}
{Array.from({ length: emptyDots }).map((_, i) => (
<div
key={i + filledDots}
className='w-[8px] h-[8px] bg-[#DADADA] rounded-full mx-[2px]'
/>
))}
</div>
</div>
);
return (
<div className={clsx("my-5 flex flex-col gap-2", className)}>
<div className="flex items-center justify-between">
<span className="font-bold text-foreground">{available} Available</span>
<span>(out of {total})</span>
</div>
<div className="flex justify-between">
{Array.from({ length: filledDots }).map((_, i) => (
<div
key={i}
className="mx-[2px] h-[8px] w-[8px] rounded-full bg-black dark:bg-white"
/>
))}
{Array.from({ length: emptyDots }).map((_, i) => (
<div
key={i + filledDots}
className="mx-[2px] h-[8px] w-[8px] rounded-full bg-[#DADADA] dark:bg-zinc-700"
/>
))}
</div>
</div>
);
};

export default AvailabilityBar;
615 changes: 332 additions & 283 deletions src/components/pricing-page/gpus/gpu-table.tsx
View file

Large diffs are not rendered by default.

194 changes: 106 additions & 88 deletions src/components/pricing-page/pricing.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,118 @@
import GpuTable from "@/components/pricing-page/gpus/gpu-table";
import ProviderTable from "@/components/pricing-page/provider/provider-table";
import UsageTable from "@/components/pricing-page/usage/usage-table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/radix-tabs"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/radix-tabs";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useState } from "react";

const tabs = [
{
value: 'gpus',
description: 'GPU Pricing',
},
{
value: 'usage',
description: 'Usage Pricing Calculator',
},
{
value: 'provider',
description: 'Provider Earn Calculator',
},
]
{
value: "gpus",
description: "GPU Pricing",
},
{
value: "usage",
description: "Usage Pricing Calculator",
},
{
value: "provider",
description: "Provider Earn Calculator",
},
];

function Pricing() {
const [value, setValue] = useState<string>(tabs[0].value);
const handleTabChange = (value: string) => {
setValue(value);
}
return (
<Tabs defaultValue={tabs[0].value} className="w-full" onValueChange={handleTabChange} value={value}>
<div className="flex md:hidden justify-center w-full">
<Select defaultValue={tabs[0].value} onValueChange={handleTabChange}>
<SelectTrigger className="w-full max-w-sm">
<SelectValue placeholder={tabs[0].description} />
</SelectTrigger>
<SelectContent className="bg-white">
{tabs.map((item) => {
return <SelectItem value={item.value}>{item.description}</SelectItem>
})}
</SelectContent>
</Select>
</div>
<div className="hidden md:flex justify-center w-full">
<TabsList className="bg-secondary-gray dark:bg-darkGray">
{tabs.map((item) => {
return <TabsTrigger value={item.value}>{item.description}</TabsTrigger>
})}
</TabsList>
</div>
<TabsContent value="gpus">
<div className="my-8 mx-4 md:m-[4.5rem]">
<h2 className="text-center text-2xl font-bold md:block md:text-3xl">
GPU Models, Prices & Availabilty
</h2>
<p className="text-center mt-3">
Browse the list of available GPUs along with their hourly rates.
</p>
</div>
<GpuTable initialData={null} />
</TabsContent>
<TabsContent value="usage">
<div className="my-8 mx-4 md:m-[4.5rem]">
<h2 className="text-center text-2xl font-bold md:block md:text-3xl">
Usage Pricing
</h2>
<p className="text-center hidden md:block mt-3">
Estimate your costs by selecting the resources you need. <br />
Adjust CPU, memory, storage, and other parameters to get a detailed
cost breakdown.
</p>
<p className="text-center md:hidden mt-3">
Estimate your costs by selecting the resources you need. Adjust CPU, memory, storage, and other parameters to get a detailed cost breakdown.
</p>
</div>
<UsageTable initialData={null} />
</TabsContent>
<TabsContent value="provider">
<div className="my-8 md:m-[4.5rem]">
<h2 className="text-center text-2xl font-bold hidden md:block md:text-3xl">
Provider Earn Calculator
</h2>
<h2 className="text-center text-2xl font-bold md:hidden">
Provider Earnings
</h2>
<p className="text-center mt-3">
Calculate your potential earnings by<br />providing resources to the Akash Network.
</p>
</div>
<ProviderTable initialData={null} />
</TabsContent>
</Tabs>
)
const [value, setValue] = useState<string>(tabs[0].value);
const handleTabChange = (value: string) => {
setValue(value);
};
return (
<Tabs
defaultValue={tabs[0].value}
className="w-full"
onValueChange={handleTabChange}
value={value}
>
<div className="flex w-full justify-center md:hidden">
<Select defaultValue={tabs[0].value} onValueChange={handleTabChange}>
<SelectTrigger className="w-full max-w-sm">
<SelectValue placeholder={tabs[0].description} />
</SelectTrigger>
<SelectContent className="bg-background">
{tabs.map((item) => {
return (
<SelectItem value={item.value}>{item.description}</SelectItem>
);
})}
</SelectContent>
</Select>
</div>
<div className="hidden w-full justify-center md:flex">
<TabsList className="bg-secondary-gray dark:bg-background2">
{tabs.map((item) => {
return (
<TabsTrigger value={item.value}>{item.description}</TabsTrigger>
);
})}
</TabsList>
</div>
<TabsContent value="gpus">
<div className="mx-4 my-8 md:m-[4.5rem]">
<h2 className="text-center text-2xl font-bold md:block md:text-3xl">
GPU Models, Prices & Availabilty
</h2>
<p className="mt-3 text-center">
Browse the list of available GPUs along with their hourly rates.
</p>
</div>
<GpuTable initialData={null} />
</TabsContent>
<TabsContent value="usage">
<div className="mx-4 my-8 md:m-[4.5rem]">
<h2 className="text-center text-2xl font-bold md:block md:text-3xl">
Usage Pricing
</h2>
<p className="mt-3 hidden text-center md:block">
Estimate your costs by selecting the resources you need. <br />
Adjust CPU, memory, storage, and other parameters to get a detailed
cost breakdown.
</p>
<p className="mt-3 text-center md:hidden">
Estimate your costs by selecting the resources you need. Adjust CPU,
memory, storage, and other parameters to get a detailed cost
breakdown.
</p>
</div>
<UsageTable initialData={null} />
</TabsContent>
<TabsContent value="provider">
<div className="my-8 md:m-[4.5rem]">
<h2 className="hidden text-center text-2xl font-bold md:block md:text-3xl">
Provider Earn Calculator
</h2>
<h2 className="text-center text-2xl font-bold md:hidden">
Provider Earnings
</h2>
<p className="mt-3 text-center">
Calculate your potential earnings by
<br />
providing resources to the Akash Network.
</p>
</div>
<ProviderTable initialData={null} />
</TabsContent>
</Tabs>
);
}

export { Pricing };
107 changes: 60 additions & 47 deletions src/components/pricing-page/provider/pricing-unit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,56 +2,69 @@ import React, { useEffect } from "react";
import { Slider } from "@/components/ui/slider";

type PricingUnitProps = {
progress: number;
setProgress: React.Dispatch<React.SetStateAction<number>>;
max: number;
title: string;
content: string;
position?: string;
suffix?: string;
step?: number;
flag?: boolean;
}

function PricingUnit({ title, content, position, progress, setProgress, max, suffix, step = 1, flag }: PricingUnitProps) {
progress: number;
setProgress: React.Dispatch<React.SetStateAction<number>>;
max: number;
title: string;
content: string;
position?: string;
suffix?: string;
step?: number;
flag?: boolean;
};

useEffect(() => {
if (!progress) {
setProgress(0);
}
}, [progress])
function PricingUnit({
title,
content,
position,
progress,
setProgress,
max,
suffix,
step = 1,
flag,
}: PricingUnitProps) {
useEffect(() => {
if (!progress) {
setProgress(0);
}
}, [progress]);

return (
<div className="flex flex-col space-x-4 justify-between gap-4 md:gap-5 w-full">
<div className={`lg:flex lg:justify-between space-x-2 ${position ? position : 'items-start'}`}>
<div className="">
<p className="font-semibold text-foreground whitespace-nowrap md:whitespace-normal">
{title}
</p>
<p className="font-medium text-sm md:text-base whitespace-nowrap md:whitespace-normal">
{content}
</p>
</div>
<input
className="rounded-md border w-[63px] md:w-[90px] mt-4 py-1.5 px-1 md:px-3 shadow-sm bg-transparent font-bold text-foreground focus:outline-primary dark:outline-none"
value={flag ? `${progress} ${suffix}` : `${progress}`}
onChange={(e) => { setProgress(parseInt(e.target.value)) }}
/>
</div>
<div className="relative w-full md:py-5 space-x-2">
<Slider
defaultValue={[progress]}
value={[progress]}
max={max}
step={step}
className={"w-[100%] z-10"}
onValueChange={(value) => setProgress(value[0])}
sliderLabel={suffix ? `${progress} ${suffix}` : `${progress}`}
draggable
/>
</div>
return (
<div className="flex w-full flex-col justify-between gap-4 md:gap-5 ">
<div
className={`md:space-x-2 lg:flex lg:justify-between ${position ? position : "items-start"}`}
>
<div className="">
<p className="whitespace-nowrap font-semibold text-foreground md:whitespace-normal">
{title}
</p>
<p className="whitespace-nowrap text-sm font-medium md:whitespace-normal md:text-base">
{content}
</p>
</div>
);
<input
className="mt-4 w-[63px] rounded-md border bg-transparent px-1 py-1.5 font-bold text-foreground shadow-sm focus:outline-primary dark:outline-none md:w-[90px] md:px-3"
value={flag ? `${progress} ${suffix}` : `${progress}`}
onChange={(e) => {
setProgress(parseInt(e.target.value));
}}
/>
</div>
<div className="relative w-full md:py-5">
<Slider
defaultValue={[progress]}
value={[progress]}
max={max}
step={step}
className={"z-10 w-[100%]"}
onValueChange={(value) => setProgress(value[0])}
sliderLabel={suffix ? `${progress} ${suffix}` : `${progress}`}
draggable
/>
</div>
</div>
);
}

export default PricingUnit;
Loading

0 comments on commit f5c615e

Please sign in to comment.