-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: integrate radix-ui tag to gpu pricing page
- Loading branch information
1 parent
c311d2d
commit a7d4847
Showing
13 changed files
with
651 additions
and
1,190 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,88 +1,55 @@ | ||
| import { useEffect, useId, useState } from "react"; | ||
|
|
||
| function classNames(...classes: any) { | ||
| return classes.filter(Boolean).join(" "); | ||
| } | ||
|
|
||
| export default function TabsWrapper({ | ||
| defaultTab, | ||
| children, | ||
| }: { | ||
| defaultTab?: string; | ||
| children: any; | ||
| }) { | ||
| const [currentTab, setCurrentTab] = useState<any>(defaultTab); | ||
| const [alltabs, setAllTabs] = useState<string[]>([]); | ||
| const mainId = useId(); | ||
|
|
||
| useEffect(() => { | ||
| const main = document.getElementById(mainId); | ||
| const tabs = main?.querySelectorAll("section"); | ||
| tabs?.forEach((tab) => { | ||
| if (tab.id === currentTab) { | ||
| tab.classList.remove("hidden"); | ||
| } else { | ||
| tab.classList.add("hidden"); | ||
| } | ||
| }); | ||
| }, [currentTab]); | ||
|
|
||
| useEffect(() => { | ||
| const main = document.getElementById(mainId); | ||
|
|
||
| // get all ids of section and log | ||
|
|
||
| const tabs = main?.querySelectorAll("section"); | ||
|
|
||
| const allTabs: string[] = []; | ||
| tabs?.forEach((tab) => { | ||
| allTabs.push(tab.id); | ||
| }); | ||
| setAllTabs(allTabs); | ||
|
|
||
| if (!defaultTab) { | ||
| setCurrentTab(allTabs[0]); | ||
| } | ||
| }, []); | ||
|
|
||
| console.log(currentTab); | ||
|
|
||
| return ( | ||
| <div className="bg-background2 p-5 "> | ||
| <div className="border-b border-gray-200"> | ||
| <nav className="-mb-px flex" aria-label="Tabs"> | ||
| {alltabs.map((tab) => ( | ||
| <button | ||
| onClick={() => setCurrentTab(tab)} | ||
| key={tab} | ||
| className={classNames( | ||
| currentTab === tab | ||
| ? "border-black text-black dark:border-white dark:text-white" | ||
| : "border-transparent text-[#889096] hover:border-gray-300 hover:text-gray-700 dark:hover:text-white", | ||
| " border-b-2 px-3 py-2 text-center text-sm font-medium", | ||
| )} | ||
| aria-current={tab ? "page" : undefined} | ||
| > | ||
| {tab} | ||
| </button> | ||
| ))} | ||
| </nav> | ||
| </div> | ||
| <div id={mainId}>{children}</div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export const TabContent = ({ | ||
| children, | ||
| value, | ||
| }: { | ||
| children: any; | ||
| value: string; | ||
| }) => { | ||
| return ( | ||
| <section id={value} className="hidden"> | ||
| {children} | ||
| </section> | ||
| ); | ||
| }; | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
| import * as TabsPrimitive from "@radix-ui/react-tabs" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| const Tabs = TabsPrimitive.Root | ||
|
|
||
| const TabsList = React.forwardRef< | ||
| React.ElementRef<typeof TabsPrimitive.List>, | ||
| React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> | ||
| >(({ className, ...props }, ref) => ( | ||
| <TabsPrimitive.List | ||
| ref={ref} | ||
| className={cn( | ||
| "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| TabsList.displayName = TabsPrimitive.List.displayName | ||
|
|
||
| const TabsTrigger = React.forwardRef< | ||
| React.ElementRef<typeof TabsPrimitive.Trigger>, | ||
| React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> | ||
| >(({ className, ...props }, ref) => ( | ||
| <TabsPrimitive.Trigger | ||
| ref={ref} | ||
| className={cn( | ||
| "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| TabsTrigger.displayName = TabsPrimitive.Trigger.displayName | ||
|
|
||
| const TabsContent = React.forwardRef< | ||
| React.ElementRef<typeof TabsPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> | ||
| >(({ className, ...props }, ref) => ( | ||
| <TabsPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| TabsContent.displayName = TabsPrimitive.Content.displayName | ||
|
|
||
| export { Tabs, TabsList, TabsTrigger, TabsContent } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import GpuTable from "@/components/gpu-table/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/tabs" | ||
|
|
||
| function Pricing() { | ||
|
|
||
| return ( | ||
| <Tabs defaultValue={"gpus"} className="w-full"> | ||
| <TabsList className="bg-slate-800"> | ||
| <TabsTrigger value="gpus">GPU Pricing</TabsTrigger> | ||
| <TabsTrigger value="usage">Usage Pricing Calculator</TabsTrigger> | ||
| <TabsTrigger value="provider">Provider Earn Calculator</TabsTrigger> | ||
| </TabsList> | ||
| <TabsContent value="gpus"> | ||
| <div className=""> | ||
| <h2 className="text-center text-2xl font-bold md:block md:text-3xl"> | ||
| GPU Models, Prices & Availabilty | ||
| </h2> | ||
| <p className="text-center leading-[28px]"> | ||
| Browse the list of available GPUs along with their hourly rates. | ||
| </p> | ||
| </div> | ||
| <GpuTable initialData={null} /> | ||
| </TabsContent> | ||
| <TabsContent value="usage"> | ||
| <div className=""> | ||
| <h2 className="text-center text-2xl font-bold md:block md:text-3xl"> | ||
| Usage Pricing | ||
| </h2> | ||
| <p className="text-center leading-[28px]"> | ||
| Estimate your costs by selecting the resources you need. <br /> | ||
| Adjust CPU, memory, storage, and other parameters to get a detailed | ||
| cost breakdown. | ||
| </p> | ||
| </div> | ||
| <UsageTable initialData={null} /> | ||
| </TabsContent> | ||
| <TabsContent value="provider"> | ||
| <div className=""> | ||
| <h2 className="text-center text-2xl font-bold md:block md:text-3xl"> | ||
| Provider Earn Calculator | ||
| </h2> | ||
| <p className="text-center leading-[28px]"> | ||
| Calculate your potential earnings by providing resources to the Akash Network. | ||
| </p> | ||
| </div> | ||
| <ProviderTable initialData={null} /> | ||
| </TabsContent> | ||
| </Tabs> | ||
| ) | ||
| } | ||
|
|
||
| export { Pricing }; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| --- | ||
| import Layout from "@/layouts/layout.astro"; | ||
| import { Pricing } from "./Pricing.tsx"; | ||
| --- | ||
|
|
||
| <Layout | ||
| title=" GPU Availability and Pricing" | ||
| description=" GPU Availability and Pricing" | ||
| image="/meta-images/gpus.png" | ||
| > | ||
| <section | ||
| class="container mx-auto flex max-w-[1380px] flex-col gap-16 pt-[100px]" | ||
| > | ||
| <h1 | ||
| class="text-center text-2xl font-bold md:block md:text-2lg lg:text-3lg lg:leading-[52px]" | ||
| > | ||
| Explorer pricing and calculate<br /> your costs or earnings | ||
| </h1> | ||
| <div | ||
| class="sidebar-scroll flex items-center overflow-x-auto p-2 md:overflow-x-hidden lg:justify-center" | ||
| > | ||
| <Pricing client:load /> | ||
| </div> | ||
| </section> | ||
| </Layout> |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.